html {
    overflow: scroll;
    overflow-x: hidden;
}

body{
    font-family: 'Barlow',
    sans-serif !important;
}

.preloader {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: #fff;
}

.flip{backface-visibility:visible!important;animation:flip 2s ease infinite}@keyframes flip{0%{transform:perspective(400px) rotateY(0);animation-timing-function:ease-out}40%{transform:perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function:ease-out}50%{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in}80%{transform:perspective(400px) rotateY(360deg) scale(.95);animation-timing-function:ease-in}100%{transform:perspective(400px) scale(1);animation-timing-function:ease-in}}

.switch{
    text-align: center;
}

header {
    background-image: url("../img/banner.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 70vh;
    position: relative;
}

header>.overlay {
    opacity: 0;
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
    height: 70vh;
    width: 100vw;
    transition: opacity 1s ease;
}

header>.overlay::before{
    content: attr(data-updated);
    color: aliceblue;
    position: absolute;
    text-align: center;
    bottom: 1px;
    left: 50%;
    transform: translatex(-50%);
    text-shadow: 2px 2px 2px rgb(0 0 0 / 70%);
}

header>nav {
    background-color: rgba(20, 23, 26, 0.5);
    backdrop-filter: grayscale(1);
    z-index: 2;
}

nav .navbar-brand {
    font-size: 2.2rem;
    font-family: 'Yellowtail',
    cursive;
    text-shadow: 2px 2px 2px rgb(0 0 0 / 70%);
}

nav .nav-link {
    border-radius: 0px;
    padding: 10px 0;
    margin: 0 10px;
    text-shadow: 2px 2px 2px rgb(0 0 0 / 70%);
}

.announcement {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 2px 2px 2px rgb(0 0 0 / 70%);
}

/* Mobile first queries */
nav .nav-item>.active {border-bottom: 0}

/* Larger than mobile */
@media (min-width: 400px) {
    
}

/* Larger than phablet */
@media (min-width: 550px) {
    nav .nav-item>.active {border-bottom: 1px solid whitesmoke;}
    header>.overlay::before {left: unset;right: 20px;transform: translateX(0);}
}

/* Larger than tablet */
@media (min-width: 750px) {

}

/* Larger than desktop */
@media (min-width: 1000px) {

}

/* Larger than Desktop HD */
@media (min-width: 1200px) {

}

/* Footer */
footer {
    font-size: 13px;
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}

footer a {
    color: royalblue;
    font-weight: 600;
    text-decoration: none;
}