@font-face {
    font-family: EVVA;
    src: url("../fonts/Ubuntu-R.ttf");
    /*src: local(Ubuntu);*/
}

@font-face {
    font-family: Ubuntu;
    src: url("../fonts/Ubuntu-L.ttf");
    /*src: local(Ubuntu);*/
}

html {
    height: 100%;
    width: 100%;
}

:root {
    --title-font: EVVA, Helvetica, sans-serif;
    --content-font: Ubuntu, "Open Sans", sans-serif;
    --monospace-font: "Fira Mono", monospace;
    --hedding-font-size: 3vw;
    --navs-font-size: 1.3vw;
    --content-font-size: 1.5vw;
    --sub-content-font-size: 1.2vw;
    --sub-sub-content-font-size: 0.8vw;
    --font-weight-reg: 400;
    --font-weight-bold: 600;
    --font-color-1: #000;
    --font-color-2: #000;
    --font-color-3: #7f858d;
    --font-color-4: #00acff;
    --decorations-1: #4c4f54;
    --black: #ffffff;
    --gray-1: #ebf4ff;
    --gray-2: #323538;
    --gray-4: #656a70;
    --gray-5: #7f858d;
    --gray-6: #9a9ea5;
    --gray-7: #b4b8bc;
    --gray-8: #d0d2d5;
    --gray-9: #ebecee;
    --gray-10: #f3f4f6;
    --white: #fff;
    --input-background-light: #fff;
    --input-background-dark: #232323;
    --input-border-light: #b4b8bc;
    --input-border-dark: #262e42;
    --input-placeholder-color: #656a70;
    --site-max-width: 1288px;
    --column: 5.46875%;
    --gutter: 3.125%;
    --full-column: 8.59375%;
    --default-blue: #1563ff;
    --green: #00bc7f;
    --purple: #5e3aed;
    --pink: #c62a71;
    --gray: #7c8797;
    --blue: #00acff;
}

.navbar {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 0;
    margin: 0;
    border-bottom: white 0.02vw solid;
    box-shadow: 1px 1px 20px black;
}

a, h1, h2 {
    font-family: var(--title-font);
    color: var(--font-color-1);
}

h3, h4, h5 {
    font-family: var(--content-font);
    font-weight: bolder;
    color: var(--font-color-1);
}

a:hover {
    color: var(--font-color-3);
}

.content {
    font-family: var(--content-font);
    color: var(--font-color-2);
    font-size: var(--content-font-size);
}

.special {
    color: var(--font-color-4) !important;
    font-weight: bold;
    filter: grayscale(0%);
}

.special2 {
    /*border-bottom: solid 0.2em var(--purple);*/
    font-weight: bold;
}

a {
    font-size: var(--navs-font-size);
    font-weight: bold;
}

/*~~~~~~~~~~~~~~~Pre-Loader~~~~~~~~~~~~~~~~~*/
.pre-loader {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.96);
}

.spinner-position {
    width: 100%;
    height: 100%;
    /*padding: 40vh 0 0 38vw;*/
    display: flex;
    align-items: center;
    justify-content: center;

}

.lds-dual-ring {
    position: absolute;
    content: " ";
    display: block;
    width: 25vh;
    height: 25vh;
    border-radius: 50%;
    border: 5px solid #fff;
    border-color: transparent #fff transparent #fff;
    animation: lds-dual-ring 4s linear infinite;
}

.lds-dual-ring-small {
    position: absolute;
    content: " ";
    display: block;
    height: 20vh;
    width: 20vh;
    border-radius: 50%;
    border: 5px solid #fff;
    border-color: var(--blue) transparent var(--blue) transparent;
    animation: lds-dual-ring-small 2s linear infinite;

}

@keyframes lds-dual-ring {
    0% {
        opacity: 0.20;
        transform: rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: rotate(110deg);
    }

    75% {
        opacity: 1;
        transform: rotate(200deg);
    }
    100% {
        opacity: 0.20;
        transform: rotate(360deg);
    }
}

@keyframes lds-dual-ring-small {
    0% {
        opacity: 1;
        transform: rotate(0deg);
    }
    50% {
        opacity: 0.20;
        transform: rotate(110deg);
    }

    75% {
        opacity: 0.20;
        transform: rotate(200deg);
    }
    100% {
        opacity: 1;
        transform: rotate(360deg);
    }
}

/*~~~~~~~~~~~~~~~Pre-Loader~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~About~~~~~~~~~~~~~~~~~*/
.about-head {
    grid-area: heading;
    text-align: center;
}

.about-img {
    grid-area: img;

}

.about-content {
    text-align: center;
    grid-area: content;
}

.about-card {
    padding: 1vh 1vh 1vh 1vh;

}

.card1 {
    grid-area: card1;
}

.card2 {
    grid-area: card2;
    border-left: 1px solid var(--decorations-1);
    border-right: 1px solid var(--decorations-1);
}

.card3 {
    grid-area: card3;
}

.about-card-content {
    padding-top: 2.5vh;
    font-size: var(--sub-content-font-size);
    font-family: var(--content-font);
}

/*~~~~~~~~~~~~~~~About~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~Games~~~~~~~~~~~~~~~~~*/
.games-head {
    grid-area: heading;
    text-align: center;
    color: black;
}

.game-title-holder {
    grid-area: images;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.game-title {
    position: relative;
    background: no-repeat center center;
    background-size: cover;
    transition: all 0.15s ease-in-out;

}

.game-title:hover {
    z-index: 9;
    transform: scale(1.2);
    filter: grayscale(100%);

}

.game-desc {
    padding-left: 1vw;
    height: min-content;
    width: 100%;
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    transition: all 0.1s ease;
}

.game-desc h3 {
    color: var(--white);
}

.game-desc p {
    font-family: var(--content-font);
    color: var(--white);
    font-size: var(--sub-content-font-size);
}

.game-title .game-desc {
    visibility: hidden;
}

.game-title:hover .game-desc {
    visibility: visible;
}

/*~~~~~~~~~~~~~~~Games~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~Location~~~~~~~~~~~~~~~~~*/

.loc-head {
    width: 100%;
    text-align: center;
}

.loc-map {
    grid-area: map;
    position: relative;
    overflow: hidden;
}

.map {
    position: relative;
}

.mapTooltip {
    position: absolute;
    background-color: #474c4b;
    moz-opacity: 0.70;
    opacity: 0.70;
    filter: alpha(opacity=70);
    border-radius: 10px;
    padding: 10px;
    z-index: 1000;
    max-width: 200px;
    display: none;
    color: #fff;
}

/*~~~~~~~~~~~~~~~Location~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~Praise~~~~~~~~~~~~~~~~~*/
.praise-head {
    grid-area: heading;
    text-align: center;
}

.praise-content {
    text-align: center;
    grid-area: content;
}

.praise-logo-holder {
    grid-area: logos;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 2vw;

}

.praise-logos {
    align-self: center;
    width: 100%;
}

/*~~~~~~~~~~~~~~~Praise~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~Footer~~~~~~~~~~~~~~~~~*/
.logo-holder {
    grid-area: logo;
    grid-column: 2;
    border-right: 2px white solid;
    display: flex;
    justify-content: center;
    align-items: center;
}

.buy {
    grid-area: button;
    grid-column: 2;
    text-align: center;
}

.buyBut {
    width: min-content;
    border-radius: 15px;
    color: white;
    box-shadow: 1px 1px 20px gray;
    background-color: var(--decorations-1);
}

.buyBut:hover {
    box-shadow: 1px 1px 30px black;
}

.logo-holder h1 {
    font-family: var(--content-font);
    font-weight: bolder;
}

.foot-social {
    grid-area: social;
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(5, auto);

}

.foot-policy {
    grid-area: policy;
    grid-column: 2;
    display: grid;
    margin: 0 5vw 0 5vw;
    grid-template-columns: repeat(3, auto);
}

.foot-sections {
    text-align: center;
}

.foot-sections a {
    color: var(--font-color-3);
    text-align: center;
    font-size: var(--sub-sub-content-font-size);
}

.foot-sections i {
    list-style-type: none;
    padding: 0 0 0 1vh;
    margin: 0;
}

/*~~~~~~~~~~~~~~~Footer~~~~~~~~~~~~~~~~~*/

@media (min-aspect-ratio: 6/5) {
    body {
        display: grid;
        grid-template-areas: "navbar" "showcase" "about" "games" "locations" "praise" "footer";
        grid-template-rows: [nav] 10vh [show] 75vh [about] 60vh [games] 60vh [location] 75vh [praise] 70vh [footer] 50vh;
    }

    /*~~~~~~~~~~~~~~~NavBar~~~~~~~~~~~~~~~~~*/
    #mynav {
        grid-area: navbar;
        opacity: 0;
        transition: all 0.8s ease-in-out;
    }

    .navbar {
        height: 100%;
        display: grid;
        grid-template-areas: ".. logo .. navpills";
        grid-template-columns: 15vw 20vw 20vw 40vw;
        grid-template-rows: minmax(7vh, 10vh);
        transition: all 0.8s ease-in-out;
    }

    .navbar-brand {
        grid-area: logo;
    }

    .logo {
        padding-top: 5vw;
        width: 9vw;
        transition: all 0.6s ease-in-out;
    }

    .nav-pill-holder {
        grid-area: navpills;
    }

    .nav-item {
        padding-left: 2vw;
    }

    .navbar-min {
        height: 7vh;
    }

    .logo-min {
        margin: 0;
        padding: 0;
        transform: scale(0.33);
    }

    /*~~~~~~~~~~~~~~~NavBar~~~~~~~~~~~~~~~~~*/
    /*~~~~~~~~~~~~~~~ShowCase~~~~~~~~~~~~~~~~~*/
    .showcase-div {
        grid-area: showcase;
        overflow: hidden;
    }

    .show-img-holder {
        z-index: -1;
        position: absolute;
        overflow: hidden;
    }

    .show-cards {
        position: absolute;
        background-color: rgba(0, 0, 0, 0.7);
        margin: 20vh 70vw 20vh 10vw;
        padding: 6vh 4vh 4vh 4vh;
        border-radius: 5%;
    }

    .show-card-content {
        font-family: var(--content-font);
        color: var(--white);
        font-size: var(--sub-content-font-size);
    }

    /*~~~~~~~~~~~~~~~Showcase~~~~~~~~~~~~~~~~~*/
    /*~~~~~~~~~~~~~~~About~~~~~~~~~~~~~~~~~*/
    .about-div {
        grid-area: about;
        padding: 5vh;
    }

    .about-holder {
        display: grid;
        grid-template-areas: "heading heading heading" "underline underline underline" "content content content" ".. .. .." "card1 card2 card3";
        grid-template-rows: min-content 5vh 5vh 10vh 20vh;
        grid-template-columns: repeat(3, 33.3%);
        height: 100%;
    }

    /*~~~~~~~~~~~~~~~Games~~~~~~~~~~~~~~~~~*/
    .games-div {
        grid-area: games;
        padding: 5vh 5vh 5vh 5vh;
        background-color: var(--gray-1);
        overflow: hidden;
    }

    .games-holder {
        display: grid;
        grid-template-areas: "heading" ".." 'images';
        grid-template-rows: min-content 4vh 40vh;
    }

    /*~~~~~~~~~~~~~~~Location~~~~~~~~~~~~~~~~~*/
    .location-div {
        grid-area: locations;
        background-color: var(--black);
        padding: 5vh;
    }

    .loc-holder {
        display: grid;
        grid-template-areas: "head" "map";
        grid-template-rows: 10vh 65vh;
    }

    /*~~~~~~~~~~~~~~~Praise~~~~~~~~~~~~~~~~~*/
    .praise-div {
        grid-area: praise;
        padding: 5vh;
        position: relative;
        overflow: hidden;
        /*background:linear-gradient(90deg,var(--purple),var(--blue));*/
        background-color: var(--gray-1);
    }

    .praise-holder {
        display: grid;
        grid-template-areas: "heading" ".." "content" "logos";
        grid-template-rows: min-content 4vh 5vh 50vh;
        height: 100%;
    }

    /*~~~~~~~~~~~~~~~Footer~~~~~~~~~~~~~~~~~*/
    .footer-div {
        grid-area: footer;
        padding: 5vh;
        height: 100%;
        background-color: var(--black);
    }

    .footer-holder {
        text-align: center;
        height: 100%;
        display: grid;
        grid-template-areas: "logo" "button" ".." "social" "policy";
        grid-template-columns: 30% 40% 30%;
        grid-template-rows: 12vh 10vh 6vh 8vh 6vh;
    }

}

@media (max-aspect-ratio: 6/5) {
    body {
        display: grid;
        background-color: var(--black);
        grid-template-areas: "navbar" "showcase" "about" "games" "locations" "praise" "footer";
        grid-template-rows: [nav] 7vh [show] 18vh [about] 25vh [games] 22vh [location] 28vh [praise] 22vh [footer] 30vh;
    }

    /*~~~~~~~~~~~~~~~NavBar~~~~~~~~~~~~~~~~~*/
    #mynav {
        grid-area: navbar;
        opacity: 0;
        transition: all 0.8s ease-in-out;
    }

    .navbar {
        height: 100%;
        display: grid;
        grid-template-areas: ".. logo .. navpills ..";
        grid-template-columns: 10vw 20vw 2vw 50vw 8vw;
        grid-template-rows: minmax(7vh, 10vh);
        transition: all 0.8s ease-in-out;
    }

    .navbar-brand {
        grid-area: logo;
    }

    .navbar button {
        grid-area: navpills;
    }

    .logo {
        padding-top: 5vh;
        width: 9vh;
        transition: all 0.6s ease-in-out;
    }

    .nav-pill-holder {
        grid-area: navpills;
        position: absolute;
    }

    .nav-item {
        padding-left: 2vw;
    }

    .navbar-min {
        height: 5vh;
    }

    .logo-min {
        margin: 0;
        padding: 0;
        transform: scale(0.37);
    }

    /*~~~~~~~~~~~~~~~NavBar~~~~~~~~~~~~~~~~~*/
    /*~~~~~~~~~~~~~~~ShowCase~~~~~~~~~~~~~~~~~*/
    .showcase-div {
        grid-area: showcase;
        overflow: hidden;
    }

    .show-img-holder {
        z-index: -1;
        position: absolute;
        overflow: hidden;
    }

    .show-cards {
        position: absolute;
        background-color: rgba(0, 0, 0, 0.7);
        margin: 6vh 70vw 6vh 10vw;
        padding: 2vh 1vh 1vh 1vh;
        border-radius: 5%;
    }

    .show-card-content {
        font-family: var(--content-font);
        color: var(--white);
        font-size: var(--sub-content-font-size);
    }

    /*~~~~~~~~~~~~~~~Showcase~~~~~~~~~~~~~~~~~*/
    /*~~~~~~~~~~~~~~~About~~~~~~~~~~~~~~~~~*/
    .about-div {
        grid-area: about;
        padding: 4vh 2vh 2vh 2vh;
    }

    .about-holder {
        display: grid;
        grid-template-areas: "heading heading heading" "content content content" "card1 card2 card3";
        grid-template-rows: min-content 5vh 10vh;
        grid-template-columns: repeat(3, 33.3%);
        height: 100%;
    }

    /*~~~~~~~~~~~~~~~Games~~~~~~~~~~~~~~~~~*/
    .games-div {
        grid-area: games;
        padding: 2vh 2vh 2vh 2vh;
        background-color: var(--gray-1);
        overflow: hidden;
    }

    .games-holder {
        display: grid;
        grid-template-areas: "heading" 'images';
        grid-template-rows: min-content 15vh;
    }

    .game-title .game-desc {
        visibility: visible;
    }

    .game-title:hover .game-desc {
        visibility: visible;
    }

    /*~~~~~~~~~~~~~~~Location~~~~~~~~~~~~~~~~~*/
    .location-div {
        grid-area: locations;
        background-color: var(--black);
        padding: 2vh;
    }

    .loc-holder {
        display: grid;
        grid-template-areas: "head" "map";
        grid-template-rows: min-content min-content;
    }

    /*~~~~~~~~~~~~~~~Praise~~~~~~~~~~~~~~~~~*/
    .praise-div {
        grid-area: praise;
        padding: 2vh;
        position: relative;
        overflow: hidden;
        /*background:linear-gradient(90deg,var(--purple),var(--blue));*/
        background-color: var(--gray-1);
    }

    .praise-holder {
        display: grid;
        grid-template-areas: "heading" "content" "logos";
        grid-template-rows: min-content min-content min-content;
        height: 100%;
    }

    /*~~~~~~~~~~~~~~~Praise~~~~~~~~~~~~~~~~~*/
    /*~~~~~~~~~~~~~~~Footer~~~~~~~~~~~~~~~~~*/
    .footer-div {
        grid-area: footer;
        padding: 6vh 10vw 4vh 10vw;
        height: 100%;
        background-color: var(--black);
    }

    .footer-holder {
        text-align: center;
        height: 100%;
        display: grid;
        grid-template-areas: "logo" "button" ".." "social" "policy";
        grid-template-columns: 30% 40% 30%;
        grid-template-rows: 12vh 10vh 6vh 8vh 6vh;
    }

    /*~~~~~~~~~~~~~~~Footer~~~~~~~~~~~~~~~~~*/
}