@font-face {
    src: url(fonts/inter-variable-font_wght.ttf);
    font-family: Inter
}

body{
    background-image: url(Images/deadlockbackground.png);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    overflow: clip;
}

#Greeting{
    text-align: center;
    margin: auto;
    margin-top: 50px;
    width: 200px;
    height: 20px;
    background-color: rgb(242, 186, 213);
    border: 2px solid rgb(243, 109, 156);
    border-radius: 10px;
    display:block;
    padding:5px;
    
    transform: scale(2)
}

#GreetingSub{
    text-align: center;
    margin: auto;
    margin-top: 50px;
    width: 300px;
    height: 20px;
    background-color: rgb(242, 186, 213);
    border: 2px solid rgb(243, 109, 156);
    border-radius: 10px;
    display:block;
    padding:5px;
}

.Quest{
    display: block;
    width: 25%;
    background-image: url(Images/texture.png);
    background-color: rgb(255, 196, 87);
    border: 4px solid hsl(27, 100%, 50%);
}

.Quest h3{
    margin: 0 auto;
    margin-left: 30px;
}

.Quest p{
    padding: 10px;
}

.Quest button{
    display: block;
    margin: 0 auto;
    background-color: hsl(56, 100%, 75%);
    padding:5px;
    border: 1px solid black;
    border-radius: 16px;
    margin-bottom:10px;
}

.Quest button:hover{
    background-color:rgb(98, 255, 98);
    cursor: pointer;
}

#icon{
    max-height:25px;
    max-width:50px;
    float:left
}

#character{
    height: 500px;
    float: right;
    transform: rotate(-45deg) translateX(350px);
    display: none;
    overflow: clip;
}

#character + div{
    display: none;
    float: right;
    margin-right: -250px;
    margin-top: -150px;
    overflow: hidden;
    animation-duration: 1.5s;
}

@keyframes leanIn{
    0%{opacity: 0}
    80%{opacity: 0}
    from{transform: rotate(360deg)}
}
@keyframes fadeIn{
    0%{opacity: 0}
    80%{opacity: 0}
}

#guide{
    position:relative;
    margin-top:25vh;
    margin-left: -38vw;
    height: 80vh;
    width: 80vw;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.game{
    position:relative;
    height:85vh;
    background-color: rgb(17, 17, 17);
    width:50vw;
    float: right;
    border:1vh solid green;
    overflow:clip;
}

#mina{
    height:4.5vh;
    width:4.5vh;
    animation-duration:9s;
    animation-name: moveMina1;
    position: relative;
    animation-iteration-count: infinite;
    animation-timing-function:linear;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#mina2{
    height:4.5vh;
    width:4.5vh;
    animation-duration:12s;
    animation-name: moveMina2;
    position: relative;
    animation-iteration-count: infinite;
    animation-timing-function:linear;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#mina3{
    height:4.5vh;
    width:4.5vh;
    animation-duration:12s;
    animation-name: moveMina3;
    position: relative;
    animation-iteration-count: infinite;
    animation-timing-function:linear;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#mina4{
    height:4.5vh;
    width:4.5vh;
    animation-duration:32s;
    position: absolute;
    animation-name: moveMina4;
    animation-iteration-count: infinite;
    animation-timing-function:linear;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#mina5{
    height:4.5vh;
    width:4.5vh;
    animation-duration:32s;
    animation-name: moveMina5;
    position: relative;
    animation-iteration-count: infinite;
    animation-timing-function:linear;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#mina6{
    height:4.5vh;
    width:4.5vh;
    animation-duration:32s;
    animation-name: moveMina6;
    position: relative;
    animation-iteration-count: infinite;
    animation-timing-function:linear;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#realMina{
    height:4.5vh;
    width:4.5vh;
    animation-duration:9s;
    animation-name: moveMina1;
    position: relative;
    animation-iteration-count: infinite;
    animation-timing-function:linear;
}

@keyframes moveMina1{
    to{transform: translateX(60vw) translateY(-50vh)}
}
@keyframes moveMina2{
    to{transform: translateY(95vh)}
}
@keyframes moveMina3{
    to{transform: translateY(-210vh)}
}
@keyframes moveMina4{
    25%{transform: translateY(-75vh) translateX(-20vw)}
    50%{transform: translateY(-20vh) translateX(-40vw)}
    60%{transform: translateY(-37.5vh) translateX(0vw)}
    80%{transform: translateY(-50vh) translateX(-30vw)}
}
@keyframes moveMina5{
    0%{transform: translateY(40vh) translateX(-20vw)}
    25%{transform: translateY(20vh) translateX(26vw)}
    50%{transform: translateY(25vh) translateX(-20vw)}
    75%{transform: translateY(-20vh) translateX(30vw)}
    100%{transform: translateY(40vh) translateX(-20vw)}
}
@keyframes moveMina6{
    0%{transform: translateY(-160vh)}
    25%{transform: translateY(-65vh)}
    50%{transform: translateY(-160vh)}
    75%{transform: translateY(-65vh)}
    100%{transform: translateY(-160vh)}
}


.pagination{
    position:absolute;
    right:20vw;
    bottom:2.5vh;
}
.pagination p{
    color: white;
    text-decoration: none;
    font-size: 1.8vw;
    padding: 1vh 1.3vw;
    display: inline-block;
}

.pagination .active{
    background-color:rgb(92, 226, 92);
    font-weight: bold;
    border-radius: 5px;
}

.pagination .inprogress{
    background-color:rgb(255, 245, 98);
    font-weight: bold;
    border-radius: 5px;
}

.pagination p:hover:not(.active){
    background-color:rgb(194, 187, 187);
    border-radius: 5px;
}

.pagination p:hover:not(.inprogress){
    background-color:rgb(194, 187, 187);
    border-radius: 5px;
}

#findMinaTextContainer{
    position: absolute;
    top: 5vh;
    left: 5vw;
    width: 20vw;
    height: 20vh;
    border-radius: 10px;
    padding: 10px;
}
#findMinaTextContainer2{
    position: absolute;
    top: 7vh;
    z-index: 5;
    transform: rotate(35deg);
    right: 7vw;
    width: 20vw;
    height: 20vh;
    border-radius: 10px;
    padding: 10px;
}
#findMinaText{
    position: absolute;
    max-width: 17vw;
    font-size: 1vw;
    text-align: center;
    color: rgb(12, 12, 12);
    font-family: 'Inter', sans-serif;
}

#findMinaText2{
    position: absolute;
    max-width: 17vw;
    font-size: 1vw;
    text-align: center;
    color: rgb(12, 12, 12);
    font-family: 'Inter', sans-serif;
}


#buttonDesign{
    display: block;
    margin: 0 auto;
    background-color: hsl(56, 100%, 75%);
    padding:5px;
    font-size: 2.2vw;
    border: 1px solid black;
    border-radius: 16px;
    margin-bottom:10px;
    height: 7vh;
    width: 12vw;
}

#buttonDesign:hover{
    background-color:rgb(98, 255, 98);
    cursor: pointer;
}