@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

body{
    background-image: url(bg.jpg);
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
   height: 100vh;
   font-family: "Roboto Mono", monospace;
   font-size: 20px;
 }

 #timer{
    font-size: 32px;
    text-align: center;
    color: white;
 }

 #puzzle{
     max-width: 900px;
     margin: auto;
     display: grid;
     grid-template-columns: repeat(3, minmax(100px, 300px));
     grid-gap: 5px;
 }

 #puzzle div{
     background-color: gray;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 #puzzle div img{
     position: relative;
     width: 100%;
     height: 100%;
     z-index: 2;
 }

 #modal h2{
    text-align: center;
    color: white;
    font-size: 28px;
 }


 #modal2{
    position: absolute;
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
 }

 #modal2 form{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
 }

 #modal2 form input, #modal2 form select, #modal2 form button{
    max-width: 500px;
    width: 80%;
    margin: 10px auto;  
    padding: 15px;
    border-radius: 15px;  
    outline: none;
    border: none;
}

#modal2 form ul{
    list-style: none;
    overflow: hidden;
    width: 80%;
    max-width: 500px;
    background-color: white;
    box-shadow: 0 0 8px rgba(0,0,0,.4);
    padding: 0;
    transition: .3s;
    height: 0;
    border-radius: 15px;
}

#modal2 form .active{
    height: auto;
}

#modal2 form ul li{
    padding: 10px 0 10px 20px;
    transition: .3s;
}

#modal2 form ul li:hover{
    background-color: gray;
}

.uvod{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    height: 100vh;
    width: 100%;
}

.uvod img{
    width: 50%;
    height: auto;
  
}

.linkici{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.linkici a{
    text-decoration: none;
    color: black;
    background-color: white;
    padding: 15px;
    border-radius: 25px;

}

.linkici a:first-child{
    margin-bottom: 20px;
}