Game.module.css

.overlay {
    height         : 100%;
    display        : flex;
    flex-direction : column;
    justify-content: center;
    background     : radial-gradient(circle at top, rgba(19, 4, 0, 0.836) 0%, rgba(19, 4, 0, 0.007) 100%);
}

.fadeIn {
    animation        : fadeIn 1s;
    -webkit-animation: fadeIn 1s;
    -moz-animation   : fadeIn 1s;
    -o-animation     : fadeIn 1s;
    -ms-animation    : fadeIn 1s;
}

.screen {
    pointer-events: none;
    height        : 100%;
    width         : 100%;
    position      : absolute;
    overflow      : hidden;
}

.interactive {
    pointer-events: auto;
    height        : 100%;
    width         : 100%;
    position      : absolute;
    z-index       : 1;
}

.loading {
    height: 96px;
    width : 96px;
    margin: 32px auto;
}

.fadeIn {
    animation        : fadeIn 1s;
    -webkit-animation: fadeIn 1s;
    -moz-animation   : fadeIn 1s;
    -o-animation     : fadeIn 1s;
    -ms-animation    : fadeIn 1s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.box {
    position     : absolute;
    align-self   : center;
    left         : 50%;
    top          : 50%;
    transform    : translate(-50%, -50%);
    background   : #191b1f;
    border-radius: 10px;
    z-index      : 1;
    padding      : 36px;
    max-width    : min(50%, 800px);
    max-height   : 50%;
    overflow     : auto;
}

.box::-webkit-scrollbar {
    width: 16px;
}

.box::-webkit-scrollbar-track {
    background-color: #2A2A2A;
    border-radius   : 8px;
}

.box::-webkit-scrollbar-thumb {
    background-color: #4B4B4B;
    border-radius   : 8px;
}

@media (max-width: 1260px) {
    .box {
        max-width: 600px;
    }
}

@media (max-width: 700px) {
    .box {
        max-width: 100%;
        min-width: 70%;
    }
}

@media (max-width: 400px) {
    .box {
        min-width: 95%;
    }
}

@media (max-height: 600px) {
    .box {
        max-height: 100%;
    }
}

.title {
    color        : #e7e6df;
    font-family  : 'Readex Pro', Verdana, sans-serif;
    font-size    : 22px;
    font-weight  : bold;
    margin-bottom: 12px;
}

.bigtitle {
    color        : #e7e6df;
    font-family  : 'Readex Pro', Verdana, sans-serif;
    font-size    : 28px;
    font-weight  : bold;
    margin-bottom: 12px;
}

.text {
    color        : #F3F2ED;
    font-family  : 'Readex Pro', Verdana, sans-serif;
    font-size    : 15px;
    margin-bottom: 22px;
}

.box_footer {
    display      : flex;
    margin-bottom: -4px;
}

.footer_element {
    display        : flex;
    text-decoration: none;
    flex-direction : row;
    justify-content: center;
    align-items    : center;
    border-radius  : 45px;
    width          : fit-content;
    cursor         : default;
}

.subfooter_element {
    display        : flex;
    flex-direction : row;
    align-items    : center;
    justify-content: center;
}

.footer_element:hover .footer_elt_base {
    display: none;
}

.footer_elt_hidden {
    display: none;
}

.footer_element:hover .footer_elt_hidden {
    display: flex;
}

.button {
    color           : #ffe1a9;
    background-color: #232020b7;
    border          : 2px solid #d6ad45;
    margin          : auto 0px auto auto;
    cursor          : pointer;
}

.button_icon {
    height: 24px;
    margin: 4px 5px;
}

.button_text {
    font-family    : 'Readex Pro', Verdana, sans-serif;
    font-size      : 15px;
    margin-right   : 7px;
    text-decoration: none;
    color          : inherit;
}

.back_icon {
    color : #F5F4F0F0;
    cursor: pointer;
    height: 24px;
    margin: 4px 5px;
}

.box_icon {
    background-color: green;
}

.alert {
    color           : #ffafa9;
    background-color: #232020b7;
    border          : 2px solid #d64545;
}

.alert_icon {
    height: 24px;
    margin: 4px 5px;
}

.loading_bg {
    color           : #c5a373;
    background-color: #232020b7;
    border          : 2px solid #815531;
}

.loading_fg {
    color           : #7fd6aa;
    background-color: #232020b7;
    border          : 2px solid #318166;
}

.loading_icon {
    height: 20px;
    margin: 6px 5px;
}

.loading_text {
    font-family : 'Readex Pro', Verdana, sans-serif;
    font-size   : 15px;
    margin-top  : -1px;
    margin-left : -7px;
    margin-right: 10px;
}