@font-face {
    font-family: Optima-Regular;
    src: url("fonts/OptimaCE-Regular.otf") format("truetype");
}
@font-face {
    font-family: Optima-Oblique;
    src: url("fonts/OptimaCE-Oblique.otf") format("truetype");
}
@font-face {
    font-family: Optima-Bold;
    src: url("fonts/OptimaCE-Bold.otf") format("truetype");
}
@font-face {
    font-family: Roksana-Medium;
    src: url("fonts/Roksana-Medium.otf") format("truetype");
}
@font-face {
    font-family: Roksana-Bold;
    src: url("fonts/Roksana-Bold.otf") format("truetype");
}
@font-face {
    font-family: Roksana-Black;
    src: url("fonts/Roksana-Black.otf") format("truetype");
}


.bodyMain {
    background-image: linear-gradient(#313131, #909090);
    height: 5650px;
    margin: 0;
}


nav {
    z-index: 90;
    width: 100%;
    top: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 2px;
}


nav a{
    font-family: Optima-Regular;
    color: white;
    font-size: 25px;
    text-decoration: none;
    margin-top: 23px;
    margin-bottom: 21px;
    margin-inline: 5vw;
}

#linka1{
    z-index: 100;
    width: 100%;
    background-color: white;
    height: 1.5px;
}

header {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: #313131;
    z-index: 90;
}



/*JUMPS I GUESS*/

#jump_svet{
    position: absolute;
    top: 885px;
}

#jump_postavy{
    position: absolute;
    top: 1784px;
}

#jump_zvirata{
    position: absolute;
    top: 3085px;
}

#jump_galerie{
    position: absolute;
    top: 4385px;
}



/*UVOD*/

.divUvod {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
}


#imgUvod{
    padding-top: 20px; /*posunutí objektů od shora*/
    min-width: 54vw;
    height: fit-content;
    object-fit: cover;
    object-position: top;
    margin-left: -50px;
    z-index: 20;
   
}


.divUvodObjekty {
    padding-top: 20px; /*posunutí objektů od shora*/
    padding-right: 70px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    min-height: 400px;
    min-width: 30%;
    color: white;
    text-align: right;
    align-items: center;
}


.divUvod div{
width: 100%;
}

#tanaria{
    font-family: Optima-Regular;
    font-size: 4.47vw /*86px*/;
    margin-right: 20vw;
    
}

#podnadpis{
    font-family: Optima-Regular;
    font-size: 2.08vw /*40px*/;
    margin-top: -20px;
    margin-right: 20vw;
}

#linka2{
    background-image: radial-gradient(white, rgba(255, 255, 255, 0) 60%);
    height: 3px;
    width: 80%;
    padding-right: 10vw;
}

.tlacitka{
    z-index: 10;
    font-family: Optima-Regular;
    font-size: 1.05vw /*20px*/;
    color: white;
    display: flex;
    flex-direction: row;
    justify-content:center;
    font-language-override: normal;
    justify-content: center;
    align-items: stretch;
}

.tlacitka div {
    margin: 10px;
    min-width: 10vw;
    background-color: #232323;
    padding: 25px;
    margin-inline: 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center
}


#koupit_text:hover, #demo_text:hover, #footer_koupit:hover{
    cursor: pointer;
    background-color: #537f86;
}

#linka3{
    z-index: 75;
    background-color: white;
    height: 1.5px;
    width: 100%;
    margin-top: 1px;
}








/*SVET*/


#wardenBgr{
    z-index: 70;
    width: 100%;
    /*height: 896px;
    object-fit: cover;
    object-position: 0px -35px;*/
    opacity: 20%;
}

.svet{
    display: flex;
    flex-direction: column;
    color: white;
    margin-inline: 27vw;
    text-align: center;
    margin-top: -40.5%;
}

#svet_nadpis{
    z-index: 75;
    font-family: Roksana-Medium;
    font-size: 2.1vw;
}

#svet_story{
    z-index: 75;;
    font-family: Optima-Regular;
    font-size: 1.5625vw;
    margin-top: 55px;
    line-height: 1.1;
}

#linka4{
    z-index: 78;
    background-color: white;
    height: 1.5px;
    width: 100%;
    margin-top: -3px;
}

#linkaExtra{
    z-index: 78;
    background-color: white;
    height: 1.5px;
    width: 100%;
    display: none;
}








/*LIGHTBOX*/

#lightbox {
    z-index: 120;
    display: none;
    flex-direction: column;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #171717;
    top: 0;
    color: white;
    font-family: Optima-Regular;
    font-size: 18px;
    justify-content: space-evenly;
    align-items: center;
}

#lightbox_content{
    display: flex;
    width: 30%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#close{
    margin-left: 93vw;
    margin-top: -10px;
    margin-bottom: -15px;
    height: 30px;
    width: auto;
    opacity: 60%;
}

#lightbox_img{
    min-height: 80vh;
    max-height: 80vh;
    
}

#arrowL, #arrowR{
    height: 32px;
    width: auto;
    opacity: 60%;
}

#arrowR:hover, #arrowL:hover, #close:hover{
    opacity: 100%;
    cursor: pointer;
}








/*POSTAVY*/

.divPostavy{
    display: flex;
    flex-direction: row;
    margin-bottom: 47px;
    margin-top: 286px;
}

.postavyText{
    display: flex;
    flex-direction: column;
}
    

.postavy_main{
    color: white;
    margin-left: 7.8125vw/*150px*/;
}

#postavy_nadpis{
    font-family: Roksana-Medium;
    font-size: 2.05vw/*40px*/;
}

#postavy_podnadpis{
    font-family: Optima-Regular;
    font-size: 1.3vw/*25px*/;
    margin-top: 20px;
}

#icons{
    display: flex;
    flex-direction: row;
    margin-left: 7.8125vw /*150px*/;
    margin-top: 30px;
}

#avara_icon{
    height: 8.6vw /*165px*/;
    width: auto;
}

#tenebris_icon{
    height: 8.6vw /*165px*/;
    width: auto;
    margin-left: 30px;
    opacity: 0.6;
}

#avara_icon:hover, #tenebris_icon:hover{
    cursor: pointer;
    filter: brightness(1.1);
}

#character_name{
    margin-top: 90px;
    font-family: Roksana-Medium;
    font-size: 1.8vw /*35px*/;
}

#character_subtitle{
    margin-top: 10px;
    font-family: Optima-Regular;
    font-size: 1.3vw /*25px*/;
}

#character_description{
    width: 35.67vw /*685px*/;
    margin-top: 20px;
    font-family: Optima-Regular;
    font-size: 1.03vw/*20px*/;
    line-height: 1.2;
    margin-bottom: 50px;
    /*position: absolute;*/
}

#changing_image{
    object-fit: cover;
    margin-top: -25px;
    margin-left: 2.6vw/*50px*/;
    width: 95%;
}

#linka5{
    background-image: radial-gradient(white, rgba(255, 255, 255, 0) 80%);
    height: 3px;
    width: 62.5vw /*1200px*/;
    margin: auto;
    left: 0;
    right: 0;
    
}

#character_gallery{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-inline: 5.2vw /*100px*/;
    margin-top: 53px;
    margin-bottom: 53px;

}

#character_gallery div img{
    height: 15.1vw /*290px*/;
    width: auto;
    margin-inline: 2.6vw/*50px*/;

}

#character_gallery div img:hover {
    cursor: pointer;
    box-shadow: 0 0 10px #313131;

}

#linka6{
    background-color: white;
    height: 1.5px;
    width: 100%;
}








/*ZVIRATA*/

.divZvirata{
    display: flex;
    flex-direction: row;
    margin-left: -350px;
}

.zvirataText{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 728px;       /*Tohle mění šířku description sekce*/
    margin-left: 100px;      /*mění velikost měnícího obrázku*/
}

.zvirata_main{
    color: white;
    margin-right: 150px;
    /*text-align: right;*/
}

#zvirata_nadpis{
    font-family: Roksana-Medium;
    font-size: 2.5vw/*40px*/;
    margin-top: 2.5em;
}

#zvirata_podnadpis{
    font-family: Optima-Regular;
    font-size: 1.3vw/*25px*/;
    margin-top: 20px;
}

#icons2{
    display: flex;
    flex-direction: row;
    margin-right: 148px;
    margin-top: 25px;
    justify-content: flex-end;
}

#norduris_icon{
    height: 8.6vw /*165px*/;
    width: auto;
}

#strider_icon, #gherberus_icon{
    height: 8.6vw /*165px*/;
    width: auto;
    margin-left: 30px;
    opacity: 0.6;
}

#norduris_icon:hover, #strider_icon:hover, #gherberus_icon:hover{
    cursor: pointer;
    filter: brightness(1.1);
}

#animal_name{
    margin-top: 90px;
    font-family: Roksana-Medium;
    font-size: 1.8vw /*35px*/;
    text-align: right;
}

#animal_subtitle{
    margin-top: 10px;
    font-family: Optima-Regular;
    font-size: 1.3vw /*25px*/;
    text-align: right;
}

#animal_description{
    margin-top: 20px;
    font-family: Optima-Regular;
    font-size: 1.03vw/*20px*/;
    line-height: 1.2;
    text-align: right;
}

#animal_changing_image{
    width: 100%;
    height: auto;
    margin-top: 260px;
}

#linka7{
    background-image: radial-gradient(white, rgba(255, 255, 255, 0) 80%);
    height: 3px;
    width: 62.5vw /*1200px*/;
    margin: auto;
    margin-top: 47px;
    left: 0;
    right: 0;
}

#animal_gallery{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-inline: 5.2vw /*100px*/;
    margin-top: 53px;
    margin-bottom: 52px;

}

#animal_gallery div img{
    height: 290px;
    width: auto;
    margin-inline: 50px;

}

#animal_gallery div img:hover {
    cursor: pointer;
    box-shadow: 0 0 10px #313131;

}

#linka8{
    background-color: white;
    height: 2px;
    width: 100%;
}








/*GALERIE*/

.galerie_napisy{
    color: white;
    display: flex;
    justify-content: space-around;
}

#gallery_name{
    margin-top: 60px;
    font-family: Roksana-Medium;
    font-size: 35px;
}

#gallery_subtitle{
    margin-top: 10px;
    font-family: Optima-Regular;
    font-size: 25px;
}

#galerie_all{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin-inline: 150px;
    margin-top: 50px;
}

#galerie_all div {
    height: 210px;
    width: auto;
    flex-grow: 1;
    flex-shrink: 1;
    display: flex;
    overflow: hidden;
}

#galerie_all div img {
    min-height: 100%;
    min-width: 100%;
    object-fit: cover;
    margin: 9px; /*pokud bych chtěla margin třeba jen horizontálně, napíšu margin: 5px 0;*/
    object-position: center center;
}

#galerie_all div img:hover {
    cursor: pointer;
    opacity: 75%;
}

#linka9{
    background-color: white;
    height: 2.5px;
    width: 100%;
    margin-top: 80px;
}




/*FOOTER*/

footer{
    background-color: #313131;
}

.footer_tlacitko{
    display: flex;
    justify-content: center;
    padding-top: 40px;
    margin-bottom: 30px;
    
}




#footer_koupit{
    font-family: Optima-Regular;
    color: white;
    font-size: 20px;
    margin: 30px;
    background-color: #909090;
    padding: 25px;
    padding-inline: 90px;

}

#linka10{
    background-image: radial-gradient(white, rgba(255, 255, 255, 0) 80%);
    height: 3px;
    width: 62.5vw /*1200px*/;
    margin: auto;
    left: 0;
    right: 0;
}

.platforms{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 15px;
}


.platforms div img{
    width: 200px;
    height: auto;
    margin: 30px;
    
}

.soc_media{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.soc_media a img{
    width: 40px;
    height: auto;
    margin: 15px;
    
}

.soc_media a img:hover{
    opacity: 75%;
    
}

#linka11{
    background-image: radial-gradient(white, rgba(255, 255, 255, 0) 80%);
    height: 3px;
    width: 62.5vw /*1200px*/;
    margin: auto;
    left: 0;
    right: 0;
}

#disclaimer{
    font-family: Optima-Regular;
    color: white;
    font-size: 0.88vw /*17px*/;
    text-align: center;
    display: flex;
    flex-direction: column;
    margin-inline: 25em;
    margin-top: 60px;
    padding-bottom: 60px;
}

#linka12{
    background-image: radial-gradient(white, rgba(255, 255, 255, 0) 80%);
    height: 3px;
    width: 62.5vw /*1200px*/;
    margin: auto;
    left: 0;
    right: 0;
}








/*MAPA*/

#drag-image{
    /*width: 100vw;*/   /*pokud odpoznámkuji, vše se bude scrollovat do levého rohu*/
    max-width: 200vw;
    min-width: 100vw;
    margin: 0px;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;

    pointer-events: none;
    position: relative;

    top: 0.1vw;
    left: 0;
}

#image-container{
    display: block;
    height: 896px;
    width: 100vw;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    cursor: move;
}


.bodyMapa{
    background-color:#313131;
    margin: 0;
}




@media only screen and (max-width: 600px) {
    
    nav{
        flex-direction: column;

    }

    .divUvod{
        display: flex;
        flex-direction: column-reverse;
    }
    header{
        position: static;
        top: 0;
        background-color: #313131;
        z-index: 90;
    }
    nav div{
       width: 100%;
       text-align: center;
    }
    .divUvodObjekty{
        padding-right: 0vw;
        text-align: center;
        min-height: 250px;
    }
    #tanaria{
        font-family: Optima-Regular;
        font-size: 15vw;
        margin: 5vw;
    }
    #podnadpis{
        display: none;
    }
    .tlacitka{
        font-size: 5vw;
        flex-direction: column;
        margin-left: -20vw;
        margin-top: 5vw;
    }
    .tlacitka div{
        padding: 0vw;
        padding-block: 7vw;
    }
    #imgUvod{
        padding-top: 20px; /*posunutí objektů od shora*/
        width: 100%;
        object-position: top;
        margin-left: 0vw;
    }
    #svet_nadpis {
        display: none;
    }
    .svet {
        margin-inline: 5vw;
    }
    #svet_story {
        font-size: 5vw;
        margin-top: 0vw;
    }
    #wardenBgr{
        opacity: 0%;
    }
    #linka4 {
        display: none;
    }
    #linkaExtra{
        display: block;
        margin-top: 30px;
    }

    #changing_image {
        display: none;
    }
    .divPostavy {
        display: flex;
        flex-direction: column;
        margin-bottom: 47px;
        margin-top: 20px;
    }
    #postavy_nadpis {
        font-size: 10vw/*40px*/;
        margin-left: 25vw;
    }
    #postavy_podnadpis{
        display: none;
    }
    #icons {
        display: flex;
        flex-direction: row;
        margin-left: 0px;
        margin-top: 30px;
        justify-content: center;
    }
    #avara_icon {
        height: 35vw /*165px*/;
        width: auto;
    }
    #tenebris_icon {
        height: 35vw /*165px*/;
        width: auto;
    }
    #character_name {
        margin-top: 30px;
        font-size: 9vw /*35px*/;
        margin-left: 13vw;
    }
    #character_subtitle {
        display: none;
    }
    #character_description {
        width: 75vw;
        font-size: 5vw;
        line-height: 1.2;
        margin-left: 13vw;
        margin-bottom: 0px;
    }
    #character_gallery {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #character_gallery div img {
        height: auto;
        width: 90vw;
    }
    

    .divZvirata {
        margin-left: 0vw;
    }
    .zvirataText {
        align-items: flex-start;
        margin-left: 0px;
        width: 100%;
    }
    #zvirata_nadpis {
        font-size: 10vw/*40px*/;
        margin-left: 25vw;
        margin-top: 20px;
    }
    #zvirata_podnadpis {
        display: none;
    }
    #icons2 {
        margin-right: 0px;
        margin-left: 0px;
        margin-top: 30px;
        justify-content: center;
    }
    #norduris_icon {
        height: 30vw /*165px*/;
        width: auto;
        margin-left: 10px;
    }
    #strider_icon, #gherberus_icon {
        height: 30vw /*165px*/;
        width: auto;
        margin-left: 10px;
    }
    #animal_name {
        margin-top: 30px;
        font-size: 9vw /*35px*/;
        margin-left: 7vw;
        text-align: left;
    }
    #animal_subtitle{
        display: none;
    }
    #animal_description {
        width: 85vw /*685px;; */;
        font-size: 5vw/*20px*/;
        line-height: 1.2;
        margin-left: 7vw;
        margin-bottom: 0px;
        text-align: left;
    }
    #animal_gallery{
        flex-direction: column;
        align-items: center;
    }
    #animal_gallery div img{
        height: auto;
        width: 90vw;
        margin-inline: 0px;
    }
    #animal_changing_image{
        display: none;
    }


    #gallery_name {
        margin-top: 30px;
    }
    #galerie_all {
        margin-inline: 10px;
        margin-top: 30px;
    }
    #galerie_all div img {
        margin: 0px;
        margin-block: 10px;
    }


    .platforms{
        display: flex;
        flex-direction: column;
        margin-left: 23vw;
    }
    .platforms div img {
        width: 50%;
        height: auto;
        /*margin: 30px;*/
    }

    #linka9 {
        margin-top: 30px;
    }
    #footer_koupit {
        margin: 10px;
        padding: 20px;
        padding-inline: 70px;
    }
    #disclaimer {
        font-size: 3.5vw /*17px*/;
        margin-inline: 1em;
        margin-top: 30px;
        padding-bottom: 30px;
    }


    #lightbox_img {
        min-width: 50vh;
        max-width: 50vh;
        min-height: auto;
        max-height: auto;
    }
    #close {
        margin-left: 80vw;
        margin-top: -20px;
        margin-bottom: 0px;
    }
    #lightbox_content {
        width: 95%;
    }

    main{
        background-image: linear-gradient(#313131, #909090);
    }

    #image-container {
        height: 150vh;
    }
}