/* change these root variables to edit most of the colors and the broad dimensions of the site. for editing padding and margins you will have to scroll down to each individual element, sorry */
:root {
    /* formatting */
    --bodyBackgroundColor: skyblue;
    --bodyTextColor: black;
    --spacing: 0.4rem; /* this is the spacing between elements */
    --headerImageHeight: 200px;
    --siteWidth: 700px;

    /* element styling */
    --elementBackgroundColor: white;
    --elementBorderColor: black;
    --elementBorderWidth: 1px;
    --elementBorderStyle: solid;

    /* navigation links */
    --navColor: blue;
    --navVisited: blue;
    --navHover: green;
    --navActive: red;
    --navSticky: 5.2rem; /* leaves space for the header */
    --responsiveWidth: 30%; /* adjust spacing of responsive links */

    /* body links */
    --linkColor: blue;
    --linkVisited: purple;
    --linkHover: green;
    --linkActive: red;
}

/* these are the colors for when the dark theme is toggled */
[data-theme="dark"] {
    --bodyBackgroundColor: #222;
    --bodyTextColor: #eee;

    --elementBackgroundColor: #333;
    --elementBorderColor: black;

    --navColor: skyblue;
    --navVisited: skyblue;
    --navHover: coral;
    --navActive: khaki;

    --linkColor: skyblue;
    --linkVisited: skyblue;
    --linkHover: coral;
    --linkActive: khaki;
    
    /* you may need to play with the blend mode and background color to get the background image looking right in dark mode. if you don't want one to be active, set it to the same value as light mode */
    --darkMode: hard-light;
    --filter: 0.1;
}

html::before {
	content: "";
	width: 100%;
	height: 100%;
	position: fixed; /* this keeps the background from moving when you scroll down the page. you can change it if you want */
	background-color: var(--bodyBackgroundColor); /* the background-color property is a fall-back in case the background image doesn't load. or you can get rid of the image and just have a solid background. */
	background-image: url("/images/topography.png");
	background-blend-mode: var(--darkMode);
	filter: brightness(var(--filter));
	z-index: -1;
}

body {
    color: var(--bodyTextColor);
    font-family: "Nunito Sans", sans-serif; /* when using a font. it's generally a good idea specify a fall-back just in case. in this case, the fall back is "sans-serif" because Nunito Sans is a sans serif font */
    margin: 0;
}

header {
    position: sticky;
    top: 0;
    background-color: var(--elementBackgroundColor);
    border: var(--elementBorderWidth) var(--elementBorderStyle) var(--elementBorderColor);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    box-shadow: 0 2px 4px rgb(0, 0, 0, 0.5);
    box-sizing: border-box;
    z-index: 2;
}

header h1 {
    margin: 0;
    padding: 0;
}

#header-image {
    margin: var(--spacing) auto;
    width: var(--siteWidth);
    border: var(--elementBorderWidth) var(--elementBorderStyle) var(--elementBorderColor);
    height: var(--headerImageHeight);
    box-sizing: border-box;
}

#header-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* formats everything except the header */
.container {
    margin: var(--spacing) auto 0;
    width: var(--siteWidth);
    box-sizing: border-box;
    display: flex;
    gap: var(--spacing);
    flex-direction: row-reverse; /* to change the order of the main section and navigation, change this to just "row" */
    padding-bottom: 40px;
}

/* the flex value of #main-foot and nav change how wide the navigation and main section are */
#main-foot {
    flex: 3;
}

nav {
    flex: 1;
}

/* all this junk styles the navigation links */
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    position: sticky;
    top: var(--navSticky);
}

nav li {
    background-color: var(--elementBackgroundColor);
    border: var(--elementBorderWidth) var(--elementBorderStyle) var(--elementBorderColor);
    padding: 0.2rem 0.5rem;
}


nav a + a {
    margin-top: var(--spacing);
}

nav a:link {
    display: block;
    color: var(--navColor);
    text-decoration: none;
}

nav a:visited {
    color: var(--navVisited);
}

nav a:hover {
    color: var(--navHover);
}

nav a:active {
    color: var(--navActive);
}

/* styling the main and footer */
main {
    background-color: var(--elementBackgroundColor);
    border: var(--elementBorderWidth) var(--elementBorderStyle) var(--elementBorderColor);
    box-sizing: border-box;
    padding: 1rem;
}

footer {
    margin: var(--spacing) 0;
    background-color: var(--elementBackgroundColor);
    border: var(--elementBorderWidth) var(--elementBorderStyle) var(--elementBorderColor);
    padding: 0.2rem 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* these style all the links not in the navigation section */
a:link {
    color: var(--linkColor);
    text-decoration: none;
}

a:visited {
    color: var(--linkVisited);
}

a:hover {
    color: var(--linkHover);
}

a:active {
    color: var(--linkActive);
}

/* CSS hover effect from https://ianlunn.github.io/Hover/ */
/* these are applied to the wide screen navigation links to make them a little more interesting */
.hvr-forward {
    display: block;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.hvr-forward:hover,
.hvr-forward:focus,
.hvr-forward:active {
    -webkit-transform: translateX(0.5rem);
    transform: translateX(0.5rem);
}

/* scroll to top button */
#myBtn {
    display: none;
    z-index: 99;
    outline: none;
    cursor: pointer;
    background-color: var(--elementBackgroundColor);
    border: var(--elementBorderWidth) var(--elementBorderStyle) var(--elementBorderColor);
    margin-top: var(--spacing);
    color: var(--navColor);
    padding: 0.2rem 0.5rem;
    width: 100%;
}

#myBtn:hover {
    color: var(--navHover);
}

/* changes color of dark mode button */
.theme-toggle {
    color: var(--bodyTextColor);
}

#credit {
    font-size: 0.6rem;
}

/* stuff to make the site responsive. probably don't touch this unless you really need to */
@media only screen and (max-width: 750px) {
    .container {
        width: 95%;
    }
    
    #header-image {
        width: 95%;
    }
}

@media only screen and (max-width: 550px) {
    .container {
        width: 100%;
        flex-direction: column;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    #header-image {
        width: 100%;
    }

    nav {
        position: relative;
        top: 0;
        background-color: var(--elementBackgroundColor);
        border: var(--elementBorderWidth) var(--elementBorderStyle) var(--elementBorderColor);
    }
    
    nav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly; /* adjust this value to change how the links are distributed */
    }
    
    nav li {
        background-color: transparent;
        border: none;
        box-sizing: border-box;
        text-align: center;
        padding: 0.5rem;
    }
    
    nav a {
        width: var(--responsiveWidth); 
    }
    
    nav a + a {
        margin: 0;
    }
    
    footer {
        margin-bottom: 0;
    }
    
    .hvr-forward:hover,
    .hvr-forward:focus,
    .hvr-forward:active {
        -webkit-transform: none;
        transform: none;
    }
    
    #myBtn {
        display: none !important;
    }
}