@import url('https://fonts.googleapis.com/css2?family=Russo+One&family=Solitreo&display=swap');

:root {
    --background: #110f10 url(../img/wood-dark.jpg);
    --stones-text-color: #121011;
    --stones-background: #a8855e url(../img/wood_light.jpg);
    --button-text-color: #121011;
    --button-background: #a8855e url(../img/wood_light.jpg);
    --my-background-color: #b11433;
    --yes-color: rgb(13, 117, 13);
    --no-color: #b11433;
}

::selection {
    background: #2b2a21;
    color: #fff;
    text-shadow: none
}

::-moz-selection {
    background: #2b2a21;
    color: #fff;
    text-shadow: none
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px
}

::-webkit-scrollbar-thumb {
    background: var(--my-background-color);
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .1)
}

* {
    outline: 0
}

body {

    font-family: 'Russo One', sans-serif;
    font-weight: 300;
    font-size: 35px;
    margin: 0;
    padding: 0;
}

.header {
    position: fixed;
    width: 100%;
    margin: 0 auto;
    z-index: 9;
    background: linear-gradient(0deg, rgb(0 0 0 / 0%) 0%, rgb(4 4 4) 100%);
    height: 200px;
}

.header img {
    position: absolute;
    left: 10px;
    top: 10px;
}

.hidden{
    display: none;
    visibility: hidden;
}

.lang_box {
    top: 15px;
    zoom: 100%;
    position: absolute;
    right: 12px;
}

.lang_changer {
    position: relative;
    display: inline;
    text-align: center;
    margin: 0 auto 5px;
}


.lang_changer a {
    text-align: center;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    color: #0c0c0c;
    font-weight: 700;
    text-decoration: none;
    margin: 3px;
    transition: .3s;
    text-shadow: 1px 1px 2px #fff;
    box-shadow: 1px -2px 6px inset rgba(0, 0, 0, .77), 2px 0 2px rgba(43, 43, 43, .1), inset 1px -2px 2px #302e2e;
    -webkit-box-shadow: 1px -2px 6px inset rgba(0, 0, 0, .77), 2px 0 2px rgba(43, 43, 43, .1), inset 1px -2px 2px #302e2e
}

.lang_changer a.cs,
.lang_changer a.cs_s {
    background-image: url(../img/ban_cz_60.png)
}

.lang_changer a.de,
.lang_changer a.de_s {
    background-image: url(../img/ban_de_60.png)
}

.lang_changer a.en,
.lang_changer a.en_s {
    background-image: url(../img/ban_en_60.png)
}

.lang_changer a.it,
.lang_changer a.it_s {
    background-image: url(../img/ban_it_60.png)
}

.lang_changer a.fr,
.lang_changer a.fr_s {
    background-image: url(../img/ban_fr_60.png)
}

.lang_changer a.es,
.lang_changer a.es_s {
    background-image: url(../img/ban_es_60.png)
}

/* 
.lang_changer a.cs::after,
.lang_changer a.de::after,
.lang_changer a.en::after,
.lang_changer a.it::after,
.lang_changer a.fr::after,
.lang_changer a.es::after {
    content: attr(data-back);
    color: var(--stones-text-color);
    opacity: 1;
    position: absolute;
}

.lang_changer a.cs::before,
.lang_changer a.de::before,
.lang_changer a.en::before,
.lang_changer a.it::before,
.lang_changer a.fr::before,
.lang_changer a.es::before {
    content: "";
    opacity: .5;
    display: block;
    border-radius: 50%;
    filter: brightness(85%);
    position: absolute;
    width: 60px;
    height: 60px;
    background: url(../img/wood_light.jpg);
} */


.lang_changer a.cs,
.lang_changer a.en,
.lang_changer a.de,
.lang_changer a.fr,
.lang_changer a.it,
.lang_changer a.es {
    filter: grayscale(.6);
    opacity:.95;
}

.lang_changer a.cs_s,
.lang_changer a.en_s,
.lang_changer a.de_s,
.lang_changer a.fr_s,
.lang_changer a.it_s,
.lang_changer a.es_s {
    filter: grayscale(0);
}

.lang_changer a:hover {
    filter: grayscale(0);
    opacity: 1;
}


#welcome {
    position: absolute;
    z-index: 9;
    margin: 250px auto;
    width: 100%;
    text-align: center;
    color: white;
    font-family: 'Solitreo', cursive;
    font-size: 4.65em;
    overflow: hidden;
    box-sizing: border-box;
}

#w {
    transform: rotate(-5deg);
    overflow: hidden;
}

.wrapper .left,
.wrapper .right {
    width: 100%;
    height: 50vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}


.wrapper .image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.25s ease all;
}


.dict {
    background: url('../img/dict.jpg');
}

.gen {
    background: url('../img/gen.jpg');
}



.wrapper .caption {
    position: relative;
    z-index: 10;
    color: #fff;
    text-align: center;
}


.wrapper .caption h1, .wrapper .caption h2 {
    text-transform: uppercase;
    letter-spacing: 0.25em;
    margin-bottom: 1em;
}


.wrapper .caption .button {
    background: #000;
    color: #fff;
    padding: 1em 2em;
    text-decoration: none;
    font-weight: 600;
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: 0.25s ease all;
}


.wrapper .caption .button:hover {
    background: var(--my-background-color);
    color: white;
}


.wrapper .side::before {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6979166666666667) 0%, rgba(0, 0, 0, 0.2721463585434174) 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    content: '';
    display: block;
}


.wrapper .left:hover .image,
.wrapper .right:hover .image {
    transform: scale(1.2);
}

footer {
    position: fixed;
    width: 100%;
    text-align: center;
    padding: 12px 0;
    bottom: 0;
    left: 0;
    background: var(--background);
    font-size: .8em;
    color: #bebebe;
    font-weight: bolder;
    text-shadow: none;
    box-shadow: inset 0 0 8px 2px rgb(64, 64, 56, .69), 0 -3px 11px 0 rgb(0, 0, 0, .97);
    -webkit-box-shadow: inset 0 0 8px 2px rgb(64, 64, 56, .69), 0 -3px 11px 0 rgb(0, 0, 0, .97);
    z-index: 9;
}

.nomobile {
    display: inline-block
}

footer a {
    color: var(--my-background-color);
    text-decoration: unset
}

@media screen and (max-width:2000px) {
    .header img {
        position: absolute;
        left: 10px;
        top: 10px;
        width: 300px;
        height: auto;
    }

    body {
        font-size: 25px;
    }

    #welcome {
        margin: 210px auto;
        font-size: 4em;
    }
}

@media screen and (max-width:1400px) {
    body {
        font-size: 20px;
    }

    #welcome {
        margin: 210px auto;
        font-size: 4em;
    }


    .header img {
        position: absolute;
        left: 10px;
        top: 10px;
        width: 220px;
        height: auto;
    }

    .lang_box {
        transform: scale(.8);
        right: -14px;
    }
}

@media screen and (max-width:1201px) {
    #welcome {
        display: none;
    }
}

@media screen and (max-width:1000px) {
    body {
        font-size: 20px;
    }

    #welcome,
    .nomobile {
        display: none;
    }

    .lang_box {
        transform: scale(.65);
        right: -40px;
        top: 4px;
    }
}

@media screen and (max-width:650px) {
    body {
        font-size: 16px;
    }

    .header img {
        width: 185px;
    }

    #welcome,
    .nomobile {
        display: none;
    }

    .lang_box {
        transform: scale(.45);
        right: -100px;
        top: -6px;
    }
}

@media screen and (max-width:450px) {
    body {
        font-size: 10px;
    }

    .header {
        width: 100%;
        height: 100%;
        background: none;
        text-align: center;
        position: absolute;
    }

    .header img {
        width: 200px;
        display: block;
        margin: 0 auto;
    }

    #welcome,
    .nomobile {
        display: none;
    }

    .lang_box {
        transform: scale(1);
        zoom: .5;
        width: 100%;
        right: 0;
        top: 46%;
    }
}

@media screen and (min-width:1200px) {

    .wrapper {
        display: flex;
    }


    .wrapper .left,
    .wrapper .right {
        width: 50%;
        height: 100vh;
    }

}