/*
 ▄▀▀▄▀▀▀▄  ▄▀▀▄▀▀▀▄  ▄▀▀▀▀▄         ▄█  ▄▀▀█▄▄▄▄  ▄▀▄▄▄▄   ▄▀▀▀█▀▀▄ 
█   █   █ █   █   █ █      █  ▄▀▀▀█▀ ▐ ▐  ▄▀   ▐ █ █    ▌ █    █  ▐ 
▐  █▀▀▀▀  ▐  █▀▀█▀  █      █ █    █      █▄▄▄▄▄  ▐ █      ▐   █     
   █       ▄▀    █  ▀▄    ▄▀ ▐    █      █    ▌    █         █      
 ▄▀       █     █     ▀▀▀▀     ▄   ▀▄   ▄▀▄▄▄▄    ▄▀▄▄▄▄▀  ▄▀       
█         ▐     ▐               ▀▀▀▀    █    ▐   █     ▐  █         
▐                                       ▐        ▐        ▐         
 ▄▀▀▄ ▄▄   ▄▀▀▄ ▄▀▀▄  ▄▀▀█▄▄                                        
█  █   ▄▀ █   █    █ ▐ ▄▀   █                                       
▐  █▄▄▄█  ▐  █    █    █▄▄▄▀                                        
   █   █    █    █     █   █                                        
  ▄▀  ▄▀     ▀▄▄▄▄▀   ▄▀▄▄▄▀                                        
 █   █               █    ▐                                         
 ▐   ▐               ▐                                              
*/

/* General */
body {
    font-family: 'Montserrat', Courier, monospace;
    text-decoration: none;
    overflow-x: hidden;
}
#incomplete, #incompatible {
	display: none;
}

/* Widebox */
@media only screen and (max-width: 850px) {
    .wide-box h2 {
        font-size: 22px;
    }
    .wide-box p, .wide-box a {
        font-size: 18px;
    }
}
@media only screen and (min-width: 850px) {
    .wide-box p, .wide-box a {
        font-size: 22px;
    }
}
.wide-box {
    width: 100%;
    height: auto;
    background: linear-gradient(#708CA8, #5d7994);
    padding: 2.5vw 5vw;
    color: #ffffff;
    text-align: center;
}
.wide-box-seperator {
    background-color: #ffffff;
    opacity: .75;
    height: 2px;
    width: 50vw;
    margin: 0 auto;
}

/* Navbar */
.nav {
    background: linear-gradient(to bottom, #708CA8, #5d7994);
    background-repeat: no-repeat;
    display: flex;
    width: 100%;
    padding: 10px;
    justify-content: center;
    box-sizing: border-box;
    overflow-x: hidden;
}
.nav button {
    text-align: center;
    padding: 0.5rem 1rem;
    margin: 1vw;
    border-style: none;
    background-color: transparent;
    font-size: 2.5vh;
}
.nav button a {
    color: #ffffff;
    text-decoration: none;
    font-family: 'Montserrat', Courier, monospace;
    font-weight: bold;
}
@media screen and (max-width: 800px) {
    .nav {
        flex-wrap: wrap;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    .nav button {
        flex: 1 1 100%;
        padding: 0.25rem 1rem;
        margin: 1vh 0;
        font-size: 2vh;
    }
    #mobile-removables, #mobile-removables a {
        display: none;
    }
    .hvr-underline-from-center:before {
        height: 2px;
    }
    .active:before {
        height: 2px;
    }
}

/* Header Image */
.img-header, .index-img-header {
    width: 100%;
}
@media screen and (max-width: 800px) {
    .img-header {
        display: none;
    }
    .index-img-header {
        height: 25vh;
    }
}

/* Footer */
.footer {
    left: 0;
    bottom: 0;
    background-color: #64829e;
    color: #ffffff;
    width: 100%;
    padding: 20px 60px;
    padding-bottom: 50px;
    margin-top: 25px;
    box-shadow: 0 -4px 8px 0 rgba(0, 0, 0, 0.2), 0 -6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
}
.footer-about {
    font-size: 16px;
    padding: 1vh 10vw;
    padding-bottom: 2vh;
}
.footer-link a {
    text-decoration: none;
    padding: 5px 10px;
    color: #eeeeee;
    border: 1px solid #eeeeee;
    border-radius: 100px;
}
.footer-link a:hover {
    border-color: #ffffff;
    color: #ffffff;
}
.footer-link {
    margin-top: 15px;
    text-align: center;
}
@media screen and (max-width: 768px) {
    .footer {
        padding: 20px 10px;
        padding-bottom: 40px;
        font-size: 12px;
    }
    .footer-about {
        padding: 1vh 0;
        font-size: 10px;
    }
}