@import url('https://fonts.googleapis.com/css2?family=Forum&display=swap'); /* Font 1: Forum (Title) */
@import url('https://fonts.googleapis.com/css2?family=Forum&family=Karla:ital,wght@0,200..800;1,200..800&display=swap'); /* Font 2: Karla (body) */

/* colors
1. dark grey #212A31
2. medium grey #2E3944
3. dark turquoise #124E66
4. light blue-grey #748D92
5. offwhite #D3D9D4
*/

html, body { /* element selectors */
    margin: 0;
    padding: 0;
    background-color: #748D92;
    width: 100%;
    min-height: 100%
}
h1, h2, nav {
    font-family: "Forum", serif;
    text-align: center;
}
@media screen and (min-width: 600px) { /* responsive font sizing (>600px width display) see bottom for where I learned it */
    h1 {
        font-size: 30px;
        margin-left: 15px;
        margin-top: 30px;
    }
    h2 {
        font-size: 25px; 
    }
    h3, figcaption {
        font-size: 20px;
        font-family: "Karla", sans-serif;
    }
    
    p {
        font-family: "Karla", sans-serif;
        font-size: 20px;
        line-height: 175%;
    }
}
@media screen and (max-width: 600px) { /* responsive font sizing (<600px width display) */
    h1 {
        font-size: 30px;
        margin-left: 15px;
        margin-top: 30px;
    }
    h2 {
        font-size: 4opx; 
    }
    h3, figcaption {
        font-size: 20px;
        font-family: "Karla", sans-serif;
    }
    
    p {
        font-family: "Karla", sans-serif;
        font-size: 15px;
        line-height: 150%
}

}
table { /* table styling */
    font-family: "Karla", sans-serif;
    font-size: 18px;
    margin-top: -200px;
    padding: 10px;
    margin-left: auto;
}
th, td {
    border: 1px solid #000;
    text-align: left;
    padding: 8px;
    background-color: #80939A; /* tint of .thispage color */
}
header {
    display: inline-flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    border-bottom: 3px solid black;
    height: 100%;
    width: 100%;
}
nav ul { /* line up the navigation elements horizontally */ /* requirement: descendant css selectors */
    display: flex;
    flex-direction: row;
}
nav li { /* style of list elements */
    font-size: 20px;
    list-style-type: none;
    border: 2px solid black;
    margin: 10px;
    padding: 10px;
    background-color: #212A31;
}
.celloscroll { /* move nav image */ /* requirement: class selectors */
    float: left;
    margin-bottom: 15px;
    margin-top: 0px;
    margin-right: -30px;
}
.thispage { /* highlights the navigation page that you are currently on */
    background-color: #124E66;
}
#mainbox { /* requirement: id selectors */
    display: inline-flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
}
.main2x2 {
    padding: 20px;
    margin: 50px 50px 10px 50px;
}
footer {
    position: static; /* stays at bottom below all other elements always */
    width: 100%;
    text-align: center;
}
#composition iframe, #videogallery iframe {
    border: solid 5px #124E66;
    padding: 5px;   
}

/* Link Pseudo-Classes (and regular classes) */
a {
    color: #A3B6B9;
}
.main2x2 a {
    color: inherit; 
}
a:active { color: #4E676B; } /* requirement: Psuedo selectors */
a:hover { color: #748D92; }
/* no link color */


/* responsive text sizing:
https://www.w3schools.com/howto/howto_css_responsive_text.asp */