:root {
    --header-image: url("images/headerimage.png");
    --body-bg-image: url('https://sadhost.neocities.org/images/tiles/purplesky.gif');
    --KHblue: #4849DF;
    --KHred: #6D1927;
    --accent-color: #4369C4;
    --link-color: #A16BEE;
    --link-visited: #B13D94;
    --link-hover: #B13D94;
    --link-active: white;
    --content-color: #BCC3EA;
    --page-bg-color: #100224;
    --text-color: #FFFF;
    --main-bg-color: ;
    --navbar-bg-color: #100224;
    --sidebar-color: ;
    --sidebar-box-color: #F4B759;
}

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-Regular.ttf');
}

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-Bold.ttf');
    font-weight: bold;
}

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-Italic.ttf');
    font-style: italic;
}

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf');
    font-style: italic;
    font-weight: bold;
}

@font-face {
    font-family: Comic Hearts;
    src: url("fonts/ComicHearts.otf");
}

@font-face {
    font-family: Cinema Calligraphy;
    src: url("fonts/MovieFont-OTF.otf");
}

@font-face {
    font-family: KHGummi;
    src: url("fonts/KHGummi.otf");
}

@font-face {
    font-family: KHMenu;
    src: url("fonts/KHMenu.otf");
}

/* SUPER: These ^ add the files for the font face to your website. They're currently sourced from the layout maker's website, but you can also get them off of Google. On my website, I have these linked in my HTML file because that's where they were put by the person who made that layout. I don't know what the difference is between doing it either way. */

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: border-box;
}

body {
    font-family: 'Nunito', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--page-bg-color);
    /* you can delete the line below if you'd prefer to not use an image */
    background-size: 65px;
    color: var(--text-color);
    background-image: var(--header-image);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100%;
}

main {
    min-height: 100dvh;
}

/* below this line is CSS for the layout */
/* the "container" is what wraps your entire website */
/* if you want something (like the header) to be Wider than
the other elements, you will need to move that div outside
of the container */
#container {
    max-width: 100%;
    /* this is the width of your layout! */
    /* if you change the above value, scroll to the bottom
and change the media query according to the comment! */
    margin: 0 auto;
    /* this centers the entire page */
    font-size: 18px;
    /* SUPER: Added this ^ to increase the font size across the page; if you want different font sizes elsewhere, take this out */
}

#container a:link {
    font-weight: bold;
    /* if you want to remove the underline
you can add a line below here that says:
text-decoration:none; */
}

#container a:hover {
    color: var(--link-hover);
    font-weight: bold;
}

#container a:active {
    color: var(--link-active);
    font-weight: bold;
}

#header {
    width: 100%;
    /* background-color: var(--page-bg-color); */
    /* header color here! */
    /* height: 200px; */
    /* this is only for a background image! */
    /* if you want to put images IN the header, 
you can add them directly to the <div id="header"></div> element! */
    /* background-image: var(--header-image); */
    background-position : top center;
    background-repeat: no-repeat;
    background-size: 100%;
}

.header-text {
font-family: Comic Hearts;
font-size:50px;
text-align:center;
color:white;
padding-top:35px;
padding-left: 18px;
padding-right: 18px;
text-shadow: 1px 0 #000, 0 1px #000, 1px 1px #000, -1px -1px #000, -1px 0 #000, 0 -1px #000, 2px 3px 2px #000;
line-height:50px;
}

.menu-light {
width: 30px;
height: 30px;
position: relative;
animation-name: lightAnimation;
animation-duration: 4s;
animation-iteration-count: infinite;
}

@keyframes lightAnimation {
0%   {left:0px; top:0px;}
25%  {left:10px; top:0px;}
50%  {left:10px; top:10px;}
75%  {left:0px; top:10px;}
100% {left:0px; top:0px;}
}

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

#navbar ul {
    display: flex;
    padding: 0;
    list-style-type: none;
    justify-content: space-evenly;
    background-position: center;
    background-repeat: repeat-x;
    background-image: url("images/navline.png");
}
/* SUPER: This navbar ul element ^ specifically styles the "container" that holds the navbar links. The navbar li element below styles the individual containers "holding" the links. */

#navbar li {
    padding-top: 5px;
    background-color: var(--navbar-bg-color);
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 5px;
    border: 3px solid var(--KHblue);
    border-radius: 40px 40px 40px 40px;
    background-image: linear-gradient(to bottom, #100224, var(--KHblue));
    font-family: KHMenu;
    font-size: 25px;
    box-shadow: 0px 3px 8px 0px rgba(0,0,0,.42);
    margin-top: 5px;
    margin-bottom: 5px;
}

/* navigation links*/
#navbar li a {
    color: #FFF;
    /* navbar text color */
    font-weight: 800;
    text-decoration: none;
    /* this removes the default link underline */
}

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

#navbar ul li.active {
    background-color: var(--navbar-bg-color);
    background-image: linear-gradient(to bottom, #100224, var(--KHred));
    border: 3px solid var(--KHred);
}

#flex {
    display: flex;
}

#flex a:link {
    color: var(--link-color);
}

#flex a:visited {
    color: var(--link-visited);
    font-weight: bold;
}

/* this styles BOTH sidebars
if you want to style them separately,
create styles for #leftSidebar and #rightSidebar */
aside {
    background-color: #100224c9;
    width: 25%;
    padding: 20px;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 5px;
    margin-top: 5px;
    border: 3px solid var(--KHblue);
    border-radius: 5px 5px 5px 5px;
    background-image: url("images/scanlines.png");
    background-repeat: repeat;
}


/* this is the color of the main content area,
between the sidebars! */
main {
    background-color: #100224c9;
    flex: 1;
    padding: 20px;
    order: 2;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 5px;
    margin-top: 5px;
    border-radius: 5px 5px 5px 5px;
    border: 3px solid var(--KHblue);
    background-image: url("images/scanlines.png");
    background-repeat: repeat;
}

/* if you're using both sidebars, the "order" value
tells the CSS the order in which to display them.
left sidebar is 1, content is 2, and right sidebar is 3! */

*/ #leftSidebar {
    order: 1;
}

#rightSidebar {
    order: 3;
}

.glovepointer {
display: block;
position: absolute;
animation-name: gloveAnimation;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
z-index: 3;
}

@keyframes gloveAnimation {
0%   {left:0px; top:0px;}
100%  {left:-20px; top:0px;}
}


/* SUPER: Below is the modified code from Paul O'Brien's Figure and Caption effect - v2 */

.book-modal {
display: flex;
flex-wrap: wrap;
max-width: 1280px;
margin: auto;
gap: 1rem;
padding: 1rem 0;
justify-content: space-evenly;
}
.book-member {
position: relative;
width: 250px;
}
.book-img-clip {
width: 200px;
position: relative;
margin: auto;
}
.book-pic {
width: 100%;
height: auto;
border: 2px outset white;
transition: all 0.2s ease-in-out;
box-shadow: 3px 4px 3px rgba(0,0,0,.3);
}
.book-spotlight:hover ~ .book-pic {
border-color: white;
transform: scale(1.08);
cursor: pointer;
}
.book-caption {
border-radius: 20px 20px 20px 20px;
text-align: center;
padding-top: 5px;
background-color: var(--KHred);
padding-left: 35px;
padding-right: 35px;
padding-bottom: 5px;
margin-top: 8px;
background-image: linear-gradient(to bottom, #100224, var(--KHred));
border: 3px solid var(--KHred);
box-shadow: 0px 3px 8px 0px rgba(0,0,0,.42);
}
.book-spotlight {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
opacity: 1;
cursor: pointer;
}
.book-spotlight span {
display: block;
position: absolute;
top: 19.8em;
left: 92%;
background: #e44545;
color: #fff;
font-weight: bold;
border-radius: 3.3rem;
font-size: 0.65em;
padding: .4em .8em;
line-height: 2em;
box-shadow: 0 3px 8px 0px rgba(0,0,0,.3);
text-shadow: 1px 1px 1px #000;
border: 2px solid white;
}
/* SUPER: The above span was adapted from the NEW label on Lospec */
.book-input-hack {
opacity: 0;
position: absolute;
z-index: -1;
}
.book-bio {
position: fixed;
pointer-events: none;
z-index: -1;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: auto;
background-color: gray;
color: white;
font-size: larger;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.5s ease;
}
.book-input-hack:checked ~ .book-bio {
opacity: 1;
background: rgba(0, 0, 0, 0.5);
z-index: 99;
pointer-events: initial;
}
.book-bio-inner {
position: relative;
max-width: 50%;
min-width: 280px;
max-height: 100vh;
overflow: auto;
padding: 1rem 1rem 2rem;
background-color: #100224c9;
border: 3px solid var(--KHblue);
border-radius: 5px 5px 5px 5px;
color: #FFF;
box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.5), inset 0px -26px 0px -1px black;
opacity: 0;
transition: opacity 0s ease 0s;
background-image: url("images/scanlines.png");
text-align: left;
}
.book-bio-inner a {
    color: var(--link-color);
}
.book-bio-inner a:visited {
    color: var(--link-visited);
    font-weight: bold;
}
.book-input-hack:checked ~ .book-bio .book-bio-inner {
opacity: 1;
transition: opacity 1s ease 0.5s;
}
.book-close {
position: absolute;
right: 1rem;
top: 1rem;
background: #000;
border: 3px solid var(--KHred);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: 0.3s ease;
background-image: linear-gradient(to bottom, #100224, var(--KHred));
}
.book-close:hover {
background: var(--KHred);
color: #fff;
}
.book-close:before {
content: "";
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: -1;
}
.book-input-hack:checked ~ .book-bio .book-bio-inner:before {
content: attr(data-caption);
position: absolute;
bottom: 0.2rem;
left: 1rem;
font-size: smaller;
color: #fff;
}
.book-input-hack:checked ~ .book-bio .book-bio-inner:after {
content: attr(data-imagename);
position: absolute;
bottom: 0.2rem;
right: 1rem;
font-size: smaller;
color: #fff;
}
.book-modal-content {
max-height: 50vh;
overflow: auto;
}
.book-modal-content-img {
    max-width: 100%;
}
/* SUPER: This version is for volunteers. */
.team-modal {
display: flex;
flex-wrap: wrap;
max-width: 1280px;
margin: auto;
gap: 1rem;
padding: 1rem 0;
justify-content: space-evenly;
}
.team-member {
position: relative;
/* width: 250px; */
}
.team-img-clip {
width: 100px;
position: relative;
margin: auto;
}
.team-pic {
width: 100%;
height: auto;
transition: all 0.2s ease-in-out;
box-shadow: 3px 4px 3px rgba(0,0,0,.3);
border-radius: 50px 50px 50px 50px;
}
.team-spotlight:hover ~ .team-pic {
border-color: white;
transform: scale(1.08);
cursor: pointer;
}
.team-caption {
border-radius: 20px 20px 20px 20px;
text-align: center;
background-color: var(--KHblue);
background-image: linear-gradient(to bottom, #100224, var(--KHblue));
border: 3px solid var(--KHblue);
box-shadow: 0px 3px 8px 0px rgba(0,0,0,.42);
}
.team-spotlight {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
opacity: 1;
cursor: pointer;
}
.team-spotlight span {
display: block;
position: absolute;
top: 19.8em;
left: 92%;
background: #e44545;
color: #fff;
font-weight: bold;
border-radius: 3.3rem;
font-size: 0.65em;
padding: .4em .8em;
line-height: 2em;
box-shadow: 0 3px 8px 0px rgba(0,0,0,.3);
text-shadow: 1px 1px 1px #000;
border: 2px solid white;
}
/* SUPER: The above span was adapted from the NEW label on Lospec */
.team-input-hack {
opacity: 0;
position: absolute;
z-index: -1;
}
.team-bio {
position: fixed;
pointer-events: none;
z-index: -1;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: auto;
background-color: gray;
color: white;
font-size: larger;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.5s ease;
}
.team-input-hack:checked ~ .team-bio {
opacity: 1;
background: rgba(0, 0, 0, 0.5);
z-index: 99;
pointer-events: initial;
}
.team-bio-inner {
position: relative;
max-width: 50%;
min-width: 280px;
max-height: 100vh;
overflow: auto;
padding: 1rem 1rem 2rem;
background-color: #100224c9;
border: 3px solid var(--KHblue);
border-radius: 5px 5px 5px 5px;
color: #FFF;
box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.5), inset 0px -26px 0px -1px black;
opacity: 0;
transition: opacity 0s ease 0s;
background-image: url("images/scanlines.png");
text-align: left;
}
.team-bio-inner a {
    color: var(--link-color);
}
.team-bio-inner a:visited {
    color: var(--link-visited);
    font-weight: bold;
}
.team-input-hack:checked ~ .team-bio .team-bio-inner {
opacity: 1;
transition: opacity 1s ease 0.5s;
}
.team-close {
position: absolute;
right: 1rem;
top: 1rem;
background: #000;
border: 3px solid var(--KHred);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: 0.3s ease;
background-image: linear-gradient(to bottom, #100224, var(--KHred));
}
.team-close:hover {
background: var(--KHred);
color: #fff;
}
.team-close:before {
content: "";
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: -1;
}
.team-input-hack:checked ~ .team-bio .team-bio-inner:before {
content: attr(data-caption);
position: absolute;
bottom: 0.2rem;
left: 1rem;
font-size: smaller;
color: #fff;
}
.team-input-hack:checked ~ .team-bio .team-bio-inner:after {
content: attr(data-imagename);
position: absolute;
bottom: 0.2rem;
right: 1rem;
font-size: smaller;
color: #fff;
}
.team-modal-content {
max-height: 50vh;
overflow: auto;
}

footer {
    /* background color for footer */
    width: 100%;
    padding: 10px;
    text-align: center;
    /* this centers the footer text */
}

footer a:visited {
    color: var(--link-visited);
    font-weight: bold;
}

h2, h3 {
    color: #FFF;
}

h1 {
    color: #FFF;
    font-size: 30px;
    font-family: KHGummi;
text-shadow: 4px 3px var(--KHblue), 0 2px var(--KHblue), 4px 1px var(--KHblue), -2px -2px var(--KHblue), -1px 0 var(--KHblue), 1px -1px var(--KHblue), 2px 3px 1px var(--KHblue);
}

h2 {
    font-size: 25px;
    font-family: KHMenu;
    padding-inline-start: 10px;
    border-left: 13px double #FFF;
}

h3 {
    font-size: 22px;
}

h3::after {
    content: "";
    display: block;
    background: linear-gradient(90deg, var(--KHblue), rgba(255, 255, 255, 0)); 
    height: 3px;
}
/* SUPER: This ::after element ^ adds a line underneath H3s. I use this on my site, you can remove it or give it to a different header */

/* this is just a cool box */
.box {
    font-family: Cinema Calligraphy;
    color: var(--page-bg-color);
    background-color: var(--sidebar-box-color);
    padding-left: 15px;
    padding-right: 15px;
    background-image: linear-gradient(to bottom, rgba(255,0,0,0), #EFC072);
    border-radius: 20px 20px 20px 20px;
    border-style: solid;
    border-width: 4px;
    border-top-color: #F2D582;
    border-left-color: #F2D582;
    border-right-color: #C8915A;
    border-bottom-color: #C8915A;
}

/* CSS for extras */

#topBar {
    width: 100%;
    height: 30px;
    padding: 10px;
    font-size: smaller;
    background-color: red;
}
/* SUPER: This code ^ doesn't effect anything currently. If you want the corresponding topBar HTML, you can go to the codepen link, open the "Extra Options" toggle in the panel, check "Top bar (above header)," click the "Generate Layout" button, and copy the HTML inside the div labeled "topBar." This would go above the existing headerArea div in the HTML file. */

/* BELOW THIS POINT IS MEDIA QUERY */

/* so you wanna change the width of your page? 
by default, the container width is 900px.
in order to keep things responsive, take your new height,
and then subtrack it by 100. use this new number as the 
"max-width" value below
*/
/* SUPER: I left this ^ comment here even though I've changed sizes to percentages (rather than px) throughout. */

@media only screen and (max-width: 900px) {
    #navbar li {
        font-size: 18px;
    }

    #flex {
        flex-wrap: wrap;
    }

    aside {
        width: 100%;
    }

    .book-bio-inner {
        max-width: 90%;
    }
    .team-bio-inner {
        max-width: 90%;
    }
    /* the order of the items is adjusted here for responsiveness!
since the sidebars would be too small on a mobile device.
feel free to play around with the order!
*/
    main {
        order: 1;
    }

    #leftSidebar {
        order: 2;
    }

    #rightSidebar {
        order: 3;
    }

    #navbar ul {
        flex-wrap: wrap;
    }
}

@media only screen and (max-width: 700px) {
    .header-text {
        font-size: 40px;
        line-height: 40px;
    }
    #navbar ul {
        margin-top: 35px;
        background-size: 1px;
/* SUPER: I added this ^ so that the navbar line would disappear once the screen was small enough that the navbar links overflow. It should be removed if this doesn't become a problem. */
    }
}