body {
    margin: 0;
    display: flex;
    min-height: 100vh;
    justify-content:center;
    align-items:center;
    background:#212121;
    background: url(images/bg_svg3.svg);
    background-size: cover;
}
#mainpage_block {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 445px;
    width: 772px;
    min-width: 650px;
    /* background: red; */
    border-radius: 3vh;
    /* border: 8px solid rgb(0 78 255 / 90%);
    box-shadow: 0 0 10px black, 0 0 1px black; */
    z-index: 1;
}
#mainpage_left > a {
    float: left;
    text-align: center;
    width: 200px;
    margin: 20px 0 0 93px;
    font-size: 24px;
    background: orange;
    font-weight: bold;
    text-decoration: none;
    color: white;
    font-family: trebuchet ms;
    border-radius: 1vh;
    text-shadow: 1px 1px 1px black;
    background: linear-gradient(#1265ff, #004ec7);
    box-shadow: 1px 1px 2px black, 0 2px 1px #1e87ea inset;
    padding: 20px 0;
    transition: filter 0.1s;
    user-select: none;
}

#mainpage_left > a:nth-child(3) {
    background: linear-gradient(#db1f1f, #b6002c);
    box-shadow: 1px 1px 2px black, 0 2px 1px #fa3765 inset;
}
#mainpage_left > a:nth-child(4) {
    background: linear-gradient(#eb8c12, #bd5900);
    box-shadow: 1px 1px 2px black, 0 2px 1px #f8a851 inset;
}
#mainpage_left > a:hover {
    filter: brightness(1.3);
}
#mainpage_left {
    float:left;
    width:50%;
    height:100%;
    /* background:white */
}
#main_choose {
    float: left;
    width: 100%;
    font-weight: bold;
    font-size: 35px;
    margin: 10px 0 20px 0;
    text-decoration: underline;
    font-family: trebuchet ms;
    text-decoration-color: #3f3f3f;
    text-align: center;
    color: white;
    text-underline-offset: 10px;
    text-decoration-thickness: 5px;
    user-select: none;
}
#main_choose {
    cursor: default;
}
#winner_block > #mainpage_right {
    border-top-left-radius:0 !important;
    border-bottom-left-radius:0 !important;
}
#mainpage_right {
    float: left;
    width: 50%;
    /* background: rgba(0, 0, 0, 0.3); */
    border-radius: 2vh;
    height: 100% !important;
    /* box-shadow: 0 0 2px inset black; */
}
#main_pr {
    float: left;
    width: 336px;
    height: 280px;
    /* background: white; */
    margin-top: 20px;
    user-select: none;
}
#main_pr > a {
    float: left;
}
#main_pr > a > p {
    float: left;
    color: #e2e2e2;
    width: 100%;
    margin: 0;
    /* font-weight: bold; */
    text-decoration: underline;
    font-family: trebuchet ms;
    text-align: center;
    text-underline-offset: 6px;
    text-decoration-color: #484848;
    text-decoration-thickness: 3px;
}
#main_pr > a > p:nth-child(3) {
    text-align: center;
    margin: 0 0 0 68px;
    font-size: 20px;
    background: orange;
    float: left;
    width: 200px;
    font-weight: bold;
    text-decoration: none;
    color: white;
    font-family: trebuchet ms;
    border-radius: 1vh;
    text-shadow: 1px 1px 1px black;
    background: linear-gradient(#00c74c, #00721d);
    box-shadow: 1px 1px 2px black, 0 2px 1px #2bd777 inset;
    padding: 15px 0;
    transition: filter 0.1s;
    user-select: none;
}
#main_pr > a > p:nth-child(3):hover {
    cursor:pointer;
    filter: brightness(1.2);
}
#main_pr > a > img {
    float: left;
    width: 100%;
    height: 100%;
}

#disp_winner > a {
    float: left;
}
#disp_winner > a > p {
    float: left;
    color: #f0e7ff;
    width: 100%;
    margin: 0;
    /* font-weight: bold; */
    text-decoration: underline;
    font-family: trebuchet ms;
    text-align: center;
    text-underline-offset: 6px;
    text-decoration-color: #67459d;
    text-decoration-thickness: 3px;
}
#disp_winner > a > p:nth-child(3) {
    text-align: center;
    margin: 0 0 0 50px;
    font-size: 20px;
    background: orange;
    float: left;
    width: 200px;
    font-weight: bold;
    text-decoration: none;
    color: white;
    font-family: trebuchet ms;
    border-radius: 1vh;
    text-shadow: 1px 1px 1px black;
    background: linear-gradient(#fc8400, #be4100);
    box-shadow: 1px 1px 2px black, 0 2px 1px #f1ad95 inset;
    padding: 15px 0;
    transition: filter 0.1s;
    user-select: none;
}
#disp_winner > a > p:nth-child(3):hover {
    cursor:pointer;
    filter: brightness(1.2);
}
#disp_winner > a > img {
    float: left;
    width: 100%;
    height: 100%;
}
#main_bottom_pr {
    position:fixed;
  
    left: 50%;
    transform: translate(-50%, 0);
    bottom:50px;
    width:728px;
    height:90px;
    background:orange;
}
#skin_block {
    float:left;
    width:100%;
}
#skin_block span {
    float: left;
    width: 100px;
    height: 100px;
    margin: 20px 0 0 50px;
    user-select: none;
   
}
#skin_block p {
    float: left;
    text-align: center;
    margin: 47px 0 0 10px;
    font-size: 18px;
    background: orange;
    float: left;
    font-weight: bold;
    text-decoration: none;
    color: white;
    font-family: trebuchet ms;
    border-radius: 1vh;
    text-shadow: 1px 1px 1px black;
    background: linear-gradient(#7128ff, #3d11ac);
    box-shadow: 1px 1px 2px black, 0 2px 1px #8243ff inset;
    padding: 12px 18px;
    transition: filter 0.1s;
    user-select: none;
}
#skin_block > p:hover {
    filter: brightness(1.3);
    cursor:pointer;
}
/* #change_skin_block {
    position:fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 200px;
    width: 300px;
    background:rgba(0, 0, 0, 0.8);
    border:10px;
    border-radius:10px;
    z-index: 2;

} */
#consent {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgb(0 66 192 / 50%);
    z-index: 6;
    display: none;
}
#consent_inside {
    position: fixed;
    width: 500px;
    height: 420px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #151515;
    box-shadow: 0 0 4px black;
    border-radius: 10px;
    z-index: 7;
}
#we_care_cookies {
    font-size: 26px;
    font-weight: bold;
    font-family: trebuchet ms;
    color: #f0f0f0;
    text-align: center;
    width: 100%;
    margin-top: 30px;
    text-decoration: underline;
    text-decoration-color: #0a7d45;
    text-align: center;
    color: white;
    text-underline-offset: 8px;
    text-decoration-thickness: 4px;
    user-select: none;
}
#cookies_scroll {
    float:left;
    width:100%;
    height: 250px;
    overflow-y:none;
    /* padding-top: 100px; */
}
#cookies_scroll::-webkit-scrollbar-track {
    border: 1px solid #000;
    padding: 2px 0;
    background-color: #404040;
}
  
#cookies_scroll::-webkit-scrollbar {
    width: 10px;
}
  
#cookies_scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #757575;
    border: 1px solid #000;
}
#cookies_main_text {
    float: left;
    margin: 10px 0 0 5%;
    font-size: 14px;
    width: 90%;
    font-family: trebuchet ms;
    line-height: 1.4;
    color: #f0f0f0;
}
#cookies_options {
    display:none;
}
#cookies_strictly {
    float: left;
    width: 100%;
    height: 100%;
    background: #1f1f1f;
    padding: 0 0 15px 0;
}
#cookies_strictly > p {
    float: left;
    margin: 10px 0 0 5%;
    font-size: 14px;
    width: 90%;
    font-family: trebuchet ms;
    line-height: 1.4;
    color: #f0f0f0;
}
#cookies_strictly > b {
    float: left;
    margin: 10px 0 0 5%;
    font-size: 16px;
    width: 90%;
    font-family: trebuchet ms;
    line-height: 1.4;
    color: #f0f0f0;
}
#cookies_strictly a {
    color:#00dbff;
}
#cookies_optional {
    float: left;
    width: 100%;
    height: 100%;
    background: #141414;
    padding: 0 0 15px 0;
}
#cookies_optional > p {
    float: left;
    margin: 10px 0 0 5%;
    font-size: 14px;
    width: 90%;
    font-family: trebuchet ms;
    line-height: 1.4;
    color: #f0f0f0;
}
#cookies_optional > b {
    float: left;
    margin: 10px 0 0 5%;
    font-size: 16px;
    width: 90%;
    font-family: trebuchet ms;
    line-height: 1.4;
    color: #f0f0f0;
}
#cookies_optional a {
    color:#00dbff;
}
#personalized_ads {
    width:100%;
    float:left;
}
#personalized_ads > p {
    float:left;
    margin: 20px 0 0 5%;
    font-size: 19px;
    font-weight:bold;
    font-family: trebuchet ms;
    line-height: 1.4;
    color: #f0f0f0;
}
#cookie_switch_1, #cookie_switch_2 {
    float: right;
    margin: 26px 40px 0 0;
    width: 40px;
    height: 16px;
    border-radius: 20px;
    background: #0baa00;
    box-shadow: 0 0 2px black, 0 0 4px black inset;
}
#cookie_switch_1 span, #cookie_switch_2 span {
    float: left;
    background: #e3e3e3;
    border-radius: 20px;
    width: 20px;
    margin-top: -2px;
    margin-left:20px;
    box-shadow: 0 0 5px black;
    height: 20px;
}
#cookie_switch_1:hover, #cookie_switch_2:hover {
    cursor:pointer;
    filter: brightness(1.3);
}
#back_cookies {
    bottom: 20px;
    left: 0px;
    position: absolute;
    margin: 0;
    /* background: green; */
    padding: 10px 20px;
    color: #efefef;
    font-weight: bold;
    font-family: trebuchet ms, tahoma;
    border-radius: 4px;
    text-shadow: 1px 1px 1px #001902;

    font-size: 16px;
 
    transition: filter 0.1s;
    display:none;
}
#back_cookies:hover {
    cursor:pointer;
    background:#2b2b2b;
}
#manage_cookies {
    bottom: 20px;
    right: 130px;
    position: absolute;
    margin: 0;
    /* background: green; */
    padding: 10px 20px;
    color: #efefef;
    font-weight: bold;
    font-family: trebuchet ms, tahoma;
    border-radius: 4px;
    text-shadow: 1px 1px 1px #001902;
    text-underline-offset: 6px;
    font-size: 20px;
    text-decoration: underline;
    transition: filter 0.1s;
    
}
#save_and_exit_cookies {
    bottom: 20px;
    right: 130px;
    position: absolute;
    margin: 0;
    background: #004fe6;
    padding: 10px 20px;
    color: #efefef;
    font-weight: bold;
    font-family: trebuchet ms, tahoma;
    border-radius: 4px;
    text-shadow: 1px 1px 1px #00182c;
    font-size: 20px;
    box-shadow: 1px 1px 2px black;
    transition: filter 0.1s;
    display: none;
}
#accept_cookies {
    bottom: 20px;
    right: 20px;
    position: absolute;
    margin: 0;
    background: green;
    padding: 10px 20px;
    color: white;
    font-weight: bold;
    font-family: trebuchet ms, tahoma;
    border-radius: 4px;
    text-shadow: 1px 1px 1px #001902;
    font-size: 20px;
    box-shadow: 1px 1px 2px black;
    transition: filter 0.1s;
}
#manage_cookies:hover, #accept_cookies:hover, #save_and_exit_cookies:hover {
    cursor:pointer;
    filter: brightness(1.3);
}
#privacy_terms {
    position: fixed;
    bottom: 0.4vw;
    left: 1vw;
    padding-bottom: 10px;
}

#privacy_terms a, #privacy_terms p {
    float: left;
    padding: 10px 10px 0 10px;
    color: #e1e1e1;
    font-family: trebuchet ms;
    font-size: 14px;
    margin: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}
#privacy_terms p {
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 2px;
}
#privacy_terms p:hover {
    cursor:pointer;
    filter: brightness(1.4);
}
/* #privacy_terms_game {
    position: fixed;
    bottom: 0.4vw;
    left: 1vw;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 4px;
    padding-bottom: 10px;
} */
#privacy_terms_game {
    position: fixed;
    bottom: 1vw;
    width: 200px;
    right: 1vw;
    left: auto;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 4px;
    padding-bottom: 10px;
}
#privacy_terms_game a, #privacy_terms_game p {
    float: left;
    padding: 10px 10px 0 10px;
    color: white;
    font-family: trebuchet ms;
    font-size: 14px;
    margin: 0;
    width: 100%;
}

#privacy_terms_about_and {
    position: fixed;
    bottom: 0.4vw;
    left: 1vw;
    background: black;
    padding-bottom: 10px;
    border-radius: 5px;
}

#privacy_terms_about_and a, #privacy_terms_about_and p {
    float: left;
    padding: 10px 10px 0 10px;
    color: #e1e1e1;
    font-family: trebuchet ms;
    font-size: 14px;
    margin: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}
#privacy_terms_about_and p {
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 2px;
}
#privacy_terms_about_and p:hover {
    cursor:pointer;
    filter: brightness(1.4);
}
/* 
#privacy_terms_game a, #privacy_terms_game p {
    float:left;
    padding:10px 10px 0 10px;
    color:white;
    font-family:trebuchet ms;
    font-size: 14px;
    margin: 0;
} */
#privacy_terms_game p {
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 2px;
}
#privacy_terms_game p:hover {
    cursor:pointer;
    filter: brightness(1.4);
}
#privacy_content {
    /* position: absolute; */
    width: 900px;
    float: left;
    top: 10%;
    margin: 70px 0 100px 0;
    color: white;
    font-family: trebuchet ms;
    line-height: 1.4;
}
#privacy_content a {
    color:orange;
}
#about_content {
    width: 900px;
    float: left;
    top: 10%;
    margin: 0 0 100px 0;
}
#about_main {
    margin: 70px auto 100px auto;
    width: 900px;
}
#about_main > b {
    float: left;
    color: white;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5;
    font-family: trebuchet ms, tahoma;
    margin: 30px 0 20px 0;
    text-decoration: underline;
    text-decoration-color: #eab131;
    text-underline-offset: 4px;
    text-decoration-thickness: 3px;
    user-select: none;
}
#about_main > p {
    float: left;
    color: white;
    width: 100%;
    line-height: 1.5;
    margin: 0;
    font-family: trebuchet ms, tahoma;
}
#about_main a {
    color: #6ac5ff;
}
#secret_word_banner {
    position: absolute;
    top: 10%;
    background: rgb(0 108 37 / 96%);
    padding: 20px 0;
    font-size: 40px;
    color: white;
    border-radius: 4px;
    font-weight: bold;
    border: 5px solid #468e46;
    box-shadow: 2px 2px 4px black, 0 0 10px #004414 inset;
    font-family: trebuchet ms, verdana;
    letter-spacing: 0.9em;
    text-shadow: 1px 1px 2px #003a0f;
    text-align: center;
    text-indent: 0.9em;
    display: none;
}
#logo {
    position: fixed;
    top: 1vh;
    left: 1vh;
    color: white;
    margin: 0;
    font-weight: bold;
    background: rgb(101 34 182 / 80%);
    border-radius: 0.4vh;
    text-shadow: 2px 2px 2px #000000;
    padding: 0.5vh 2vh;
    font-size: 5vh;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    z-index: 2;
    text-decoration: none;
    user-select: none;
}
#logo:hover {
    filter: brightness(1.2);
}
#loading_block {
    position:fixed;
    width:100%;
    height:100%;
    background: #161616;
}
#loading_block p:nth-child(1) {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 8vh;
    color: white;
    text-shadow: 1px 1px 3px black;
    margin: 0;
    font-weight: bold;
    font-family: trebuchet ms;
    cursor: default;
}
#loading_block p:nth-child(2) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10vh;
    color: white;
    margin: 0;
    font-weight: bold;
    background: #380087;
    padding: 0 2vh;
    box-shadow: 1px 1px 4px #0e0e0e;
    text-shadow: 1px 1px 3px black;
    border-radius: 1vh;
    font-family: trebuchet ms;
    cursor: default;
}
#keyboard {
    position: absolute;
    bottom: 2vh;
    width: 100%;
    left: 50%;
    transform: translate(-50%, 0%);
    display:none;
    user-select: none;
}
.row {
    float: left;
    /* position: relative; */
    /* left: 50%; */
    width: 100%;
    display: flex;
    justify-content: center;
}
.row p {
    float: left;
    background: white;
    font-size: 3.2vh;
    font-family: verdana;
    width: 6vh;
    height: 6vh;
    background: linear-gradient(15deg, #7c7c7c, #c5c5c5);
    margin: 0.3vh;
    box-shadow: 1px 1px 1px black, 0 2px 1px #dedede inset;
    border-radius: 0.8vh;
    color: #171717;
    text-align: center;
    font-family: trebuchet ms;
    line-height: 6vh;
    font-weight: bold;
    vertical-align: middle;
    transition: filter 0.1s;
}
.row p:hover {
    cursor: pointer; 
    filter: brightness(1.35);
}
#submit {
    float: left;
    width: 12vh !important;
    font-size: 2.2vh !important;
    background: linear-gradient(15deg, #00477e, #007fb9) !important;
    box-shadow: 1px 1px 1px black, 0 2px 1px #3c88ad inset !important;
    color: #e0e0e0 !important;
    text-shadow: rgb(39 39 39) 1px 1px 1px !important;
}
#delete {
    float:left;
    width: 8vh !important;
    font-size: 2.2vh !important;
    background: linear-gradient(15deg, #a91111, #f22e2e) !important;
    box-shadow: 1px 1px 1px black, 0 2px 1px #e76161 inset !important;
    color: #e0e0e0 !important;
    text-shadow: rgb(39 39 39) 1px 1px 1px !important;
}
#winner_block {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 300px;
    width: 650px;
    background: rgb(88 31 185 / 90%);
    border-radius: 3vh;
    border: 1vh solid #36007ce6;
    box-shadow: 0 0 10px black, 0 0 1px black;
    z-index: 5;
    display: none;
}
#main_winner {
    float:left;
    width:50%;
    height:100%;
    cursor: default;
    /* background:white; */
}
#disp_winner {
    float:left;
    width:300px;
    height:250px;
    /* background:red; */
    margin-top:25px;
}
#winner_text {
    width: 100%;
    text-align: center;
    margin-top: 60px;
    font-size: 32px;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    font-family: trebuchet ms;
    text-shadow: 1px 1px 1px black;
}
#play_again_button {
    float: left;
    width: 220px;
    margin: 40px 0 0 50px;
    background: linear-gradient(#eeeeee, #d0d0d0);
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    border-radius: 12px;
    /* border: 2px solid #ffba58; */
    box-shadow: 1px 1px 2px black, 0 2px 1px #ffffff inset;
    color: #252525;
    padding: 20px 0;
    font-family: trebuchet ms;
    text-decoration: none;
}
#play_again_button:hover {
    cursor: pointer;
    filter: brightness(1.1);
}
#shift_winner_block {
    position: absolute;
    left: 10px;
    font-size: 30px;
    color: white;
    padding: 0;
    margin-top: 1px;
}
#shift_winner_block:hover {
    cursor:pointer;
    transform: scale(1.2);
}
#winner_emoji {
    font-size: 50px;
    width: 100%;
    margin-top: -20px;
    text-align: center;
}

@media (max-width: 1445px) {

    /* #privacy_terms_game {
        position: fixed;
        bottom: 1vw;
        width: 200px;
        right: 1vw;
        left: auto;
        background: rgba(0, 0, 0, 0.8);
        border-radius: 4px;
        padding-bottom: 10px;
    } */
    /* #privacy_terms_game a, #privacy_terms_game p {
        float: left;
        padding: 10px 10px 0 10px;
        color: white;
        font-family: trebuchet ms;
        font-size: 14px;
        margin: 0;
        width: 100%;
    } */

}

@media (min-width: 2560px) {

    #mainpage_block {
        transform:scale(1.5);
        top: 33.3%;
        left: 33.3%;
    }
    #consent {
        transform:scale(1.5); 
    }
    #privacy_terms a, #privacy_terms p, #privacy_terms_game a, #privacy_terms_game p {
        font-size:22px;
    }
    #winner_block {
        transform:scale(1.5);
        top: 33.3%;
        left: 33.3%;
    }

}

@media only screen and (max-width: 769px) {
    #mainpage_right {
        display:none;
    }
}