:root {
    --header-image: url('banner-yellow.png');
    --body-bg-image: url('blacktile.png');
    --body-yellow-image: url('yellowtile.png');
    --body-green-image: url('greentile.png');
    --body-blue-image: url('bluetile.png');

    /* colors */
    --content: #43256E;
}

body {
    font-family: serif;
    font-size: 120%;
    margin: 0;
    background-color: #222;
    /* you can delete the line below if you'd prefer to not use an image */
    background-size: 65px;
    color: white;
    background-image: var(--body-bg-image);
}

* {
    box-sizing: border-box;
}

#container {
    max-width: 900px;
    margin: 0 auto;
}

#container a {
    color: red;
    font-weight: bold;
    /* text-decoration:none; */
}

#header {
    width: 100%;
    height: 150px;
    background-color: #ffd800;
    background-image: var(--header-image);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

/* navigation section!! */
#navbar {
    height: 40px;
    background-color: #13092D;
    /* navbar color */
    width: 100%;
}

#navbar ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-evenly;
}

#navbar li {
    padding-top: 10px;
}

/* navigation links*/
#navbar li a {
    color: #ED64F5;
    /* navbar text color */
    font-weight: 800;
    text-decoration: none;
}

/* navigation link when a link is hovered over */
#navbar li a:hover {
    color: #a49cba;
    text-decoration: underline;
}

#flex {
    display: flex;
}

main {    
    flex: 1;
    padding: 20px;
    order: 2;
}

footer {
    background-color: #13092D;
    /* background color for footer */
    width: 100%;
    height: 40px;
    padding: 10px;
    text-align: center;
}

h1,
h2,
h3 {
    color: #ffd800;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-weight:normal;
}

h1 {
    font-size: 35px;
}

strong {
    /* this styles bold text */
    color: white;
}

.boxyellow {
    background-color: #ffd800;
    background-image: var(--body-yellow-image);
    border: 8px solid blue;
    padding: 10px;
    color: black;
}

.boxgreen {
    background-color: #ffd800;
    background-image: var(--body-green-image);
    border: 8px solid #ffd800;
    padding: 10px;
    color: black;
}

.boxblue {
    background-color: #ffd800;
    background-image: var(--body-blue-image);
    border: 8px solid #ffd800;
    padding: 10px;
    color: black;
}


#topBar {
    width: 100%;
    height: 30px;
    padding: 10px;
    font-size: smaller;
    background-color: #13092D;
}

/* classes below are overriden in @media part */

.headerimage {
    width: 60%;
}    
.dividerimage {
    width: 60%;
    margin-bottom: 52px;
}
p {
    color: white;
}
/* max-width below is the container width (900px by default) minus 100 */
@media only screen and (max-width: 800px) {
    #flex {
        flex-wrap: wrap;
    }

    #navbar ul {
        flex-wrap: wrap;
    }

    .headerimage {
        width: 100%;
    }    
    .dividerimage {
        width: 60%;
    }
    p {
        font-size: 120%;
    }

}

.auto-resizable-iframe {
    max-width: 420px;
    margin: 0px auto;
}

.auto-resizable-iframe > div {
    position: relative;
    padding-bottom: 75%;
    height: 0px;
}

.auto-resizable-iframe iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}


table, th, td {
    border: 1px solid blueviolet;
}

#flex > main > table.boxblue > tbody > tr > td > p > a,
#flex > main > table.boxyellow > tbody > tr > td > p > a,
#flex > main > table.boxgreen > tbody > tr > td > p > a,
#flex > main > p.boxblue > a,
#flex > main > p.boxgreen > a,
#flex > main > p.boxyellow > a,
#flex > main > p.boxyellow > b > a,
#flex > main > p.boxgreen > b > a,
#flex > main > p.boxblue > b > a,
#flex > main > ul > li > p.boxyellow > a,
#flex > main > ul > li > p.boxgreen > a,
#flex > main > ul > li > p.boxblue > a
{
    color: blue;
    font-weight: bold;
}