@font-face {
    font-family: "pss";
    src: url("../assets/pss-ingame-webfont.ttf");
}

* {
    box-sizing: border-box;
    letter-spacing: .1rem;
    font-family: 'pss';
    
    /* CSS HEX */
    --viridian-green: #3B9099ff;
    --vegas-gold: #C5A85Cff;
    --powder-blue: #B6DCD4ff;
    --black: #0C1825ff;
    --rich-black-1: #041623ff;
    --rich-black-2: #0C1825ff;
    --metallic-sunburst: #AB7F42ff;
    --pale-spring-bud: #F5F5C3ff;
    --midnight-green: #093D4Aff;
    --black-olive: #34332Aff;
    --camel: #B68F4Cff;
    --flax: #DBCA77ff;
    --flax-50p:rgba(219, 202, 119, 0.484);

    --dark-gradient: linear-gradient(to right bottom, #0c1825, #0d1e2d, #0d2534, #0c2c3b, #0b3342, #0a3342, #093341, #083341, #072b3a, #072432, #061d2b, #041623);
    --gold-gradient: linear-gradient(to right bottom, #dbca77, #d7c372, #d3bd6c, #cfb667, #cbb062, #c7aa5e, #c3a459, #bf9e55, #ba9650, #b58e4b, #b08746, #ab7f42);

    --blackpink-gold: linear-gradient(to right bottom, #041623, #061724, #071724, #091825, #0a1825, #161f31, #26253c, #372b45, #613751, #874651, #a25e48, #ab7f42);

    --dark-green-gradient: linear-gradient(to left top, #041623, #061724, #071724, #091825, #0a1825, #0b1b28, #0c1e2c, #0d212f, #0d2836, #0c2f3d, #0b3644, #093d4a);

    --light-gradient: linear-gradient(69deg, #2eb0be, #53b8c0, #6ec1c2, #85c9c6, #9bd1cb, #a6d7cd, #b2decf, #bee4d1, #c8e9ce, #d4eeca, #e4f2c6, #f5f5c3);

    --small-dist-1: calc(1vw + 1vh + 5px);

    transition: 0.3s ease;
}
*::selection {
    color: var(--main-red);
    background: var(--dark-blue);
}

.floating {
    /* animation: Floatingx 5s ease-in-out 0 infinite; */
    animation-name: Floatingx;
    -webkit-animation-name: Floatingx;
    animation-duration: 5s;
    -webkit-animation-duration: 5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: Floating;
    -moz-animation-duration: 5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
    /* margin-left: 30px; */
    /* margin-top: 5px; */
}

@-webkit-keyframes Floatingx {
    from {
        transform: translate(0, 0px);
        -webkit-transform:translate(0, 0px);
    }
    50% {
        transform: translate(0, 15px);
        -webkit-transform:translate(0, 15px);
    }
    to {
        transform: translate(0, -0px);
        -webkit-transform: translate(0, -0px);
    }    
}

@-moz-keyframes Floating {
    from {
        transform: translate(0, 0px);
        -moz-transform:translate(0, 0px);
    }
    50% {
        transform: translate(0, 15px);
        -moz-transform:translate(0, 15px);
    }
    to {
        transform: translate(0, -0px);
        -moz-transform: translate(0, -0px);
    }    
}
/* .loading-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 0px;
    height: 0px;
} */
.loading-overlay-visible {
    position: fixed;
    top: 50%;
    left: 50%;
    width: calc(100vw + 100vh);
    height: calc(100vw + 100vh);
    background-color: var(--viridian-green);
    background: var(--light-gradient);
    z-index: 50;
    transition: 0.5s ease-in all;
    transform: translate(-50%, -50%);
}