*{
    font-family:var(--roboto-font);
}

:root{
    --headerfooter-color:rgb(248, 251, 252);
    --background-color:rgb(23, 175, 21);
    --bigtext-color:rgb(2, 1, 7);
    --smalltext-color:rgb(25, 18, 70);
    --smallertext-color:rgb(153, 145, 224);
    --inactive-color:rgb(121, 121, 126);
    --link-color:rgb(252, 191, 7);
    --hoverlink-color:rgb(248, 251, 252);
    --roboto-font: Trebuchet, Helvetica, sans-serif;
    --outlink-icon:url(/assets/outlink_default.svg);
}

::selection{
    background-color:var(--background-color);
    color:var(--headerfooter-color);
}

.inactive{
    color:var(--inactive-color);
}

.inactive:hover{
    color:var(--inactive-color);
    letter-spacing:normal;
}

html{
    background-color:var(--background-color);
    overflow-x:hidden;
}

bold{
    font-weight:bold;
}

p{
    color:var(--smalltext-color);
}

h2{
    overflow:hidden;
}

h2:after{
  content: "";
  display: inline-block;
  height: 0.5em;
  vertical-align: bottom;
  width: 100%;
  margin-right: -100%;
  margin-left: 10px;
  border-top: 1.5px solid;
  border-color: var(--smalltext-color);
}

h1, h2, h3{
    color:var(--bigtext-color);
}

h1{
    font-size:6.5vw;
    text-align:center;
    overflow:wrap;
    margin:0;
    letter-spacing:0.5vw;
}

a{
    text-decoration:none;
    transition:0.2s ease-in-out;
    color:var(--link-color);
}

p a{
    font-weight:bold;
}

.floatright{
    float:right;
}

.outlink:after{
    content: var(--outlink-icon);
    vertical-align:middle;
    margin-left:-0.2vw;
}

a:hover{
    color:var(--hoverlink-color);
    letter-spacing:0.1vw;
}

nav a:hover{
    letter-spacing:0.3vw;
}

body{
    margin:0 auto;
}

header{
    background-color:var(--headerfooter-color);
    margin-top:1vw;
    box-shadow: 0px 0px 7px black;
}

nav{
    background-color:var(--hoverlink-color);
    text-align:center;
    width:100%;
}

nav li{
    list-style:none;
    display:inline;
    padding-left:0.5vw;
    padding-right:0.5vw;
}

nav ul{
    margin:0;
    padding:0;
    font-size:3vw;
    padding-bottom:1vw;
}

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

.flex{
    display:flex;
    justify-content:top;
    align-items:top;
}

main li{
    color:var(--smalltext-color);
    list-style:none;
    text-align:left;
    display:inline;
    margin:5px;
}

main ul{
    margin:0;
    padding:0;
    color:var(--smalltext-color);
    display:inline;
}

main ul a{
    font-weight:bold;
}

.button{
    display:inline-block;
    background-color:var(--background-color);
    border: solid 3px var(--bigtext-color);
    text-align:center;
    margin:8px;
}

.button:hover{
    background-color:var(--link-color);
    transform:scale(1.02);
}

sidebar{
    background-color:var(--bigtext-color);
    padding:2vw;
    margin:0;
    width:380px;
}

sidebar p, h2{
    color:var(--headerfooter-color);
}

sidebar h2:after{
    display:none;
    border-color:var(--headerfooter-color);
}

sidebar h3{
    color:var(--headerfooter-color);
    margin-bottom:1vw;
}

main{
    padding:2vw;
    margin:0;
    background-color:var(--smallertext-color);
}

main h2{
    color:var(--bigtext-color);
}

.disclaimerbox{
    background-color:var(--background-color);
    padding:0vw 1vw 0vw 1vw;
    border: solid 3px var(--bigtext-color);
}

footer{
    background-color:white;
    text-align:center;
    margin-bottom:0.5vw;
    font-size:3vw;
    padding:1vw;
    position:relative;
    width:100%;
    bottom:1.5vw;
    box-shadow: 0px 4px 7px black;
}

footer p{
    color:var(--smallertext-color);
    margin:0;
}

footer a{
    color:var(--smallertext-color);
}

footer a:hover{
    color:var(--smallertext-color);
}

.button{
    transition:0.2s ease-in-out;
    background-color:var(--background-color);
    padding:1vw;
    border: solid 3px var(--bigtext-color);
    text-align:left;
}

.button:hover{
    background-color:var(--background-color);
    transform:none;
}

#resources{
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
}

 /* Extra small devices (phones, 600px and down) */
 @media only screen and (max-width: 600px) { 
    .flex{
        flex-direction:column;
    }
    h1{
        font-size:14vw;
    }
    footer{
        font-size: 3.5vw;
    }
    nav a{
        font-size:7vw;
    }
    .outlink:after{
        padding-left:1vw;
    }
    sidebar h2:after{
        display:inline-block;
    }
    sidebar{
        width:100%;
    }
 }

 /* Small devices (portrait tablets and large phones, 600px and up) */
 @media only screen and (min-width: 600px) {
    .flex{
        flex-direction:column;
    }
    h1{
        font-size:11vw;
    }
    footer{
        font-size: 3vw;
    }
    nav a{
        font-size:4vw;
    }
    .outlink:after{
        padding-left:0.5vw;
    }
    sidebar h2:after{
        display:inline-block;
    }
    sidebar{
        width:100%;
    }
 }
 
 /* Medium devices (landscape tablets, 768px and up) */
 @media only screen and (min-width: 768px) {
    .flex{
        flex-direction:row;
        align-items: top;
    }
    h1{
        font-size:8vw;
    }
    footer{
        font-size: 1.5vw;
    }
    nav a{
        font-size:3vw;
    }
    .outlink:after{
        padding-left:0.5vw;
    }
    sidebar h2:after{
        display:none;
    }
    sidebar{
        width:380px;
    }
 }