@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200&display=swap');

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Dosis', sans-serif;
}

html{
    scroll-behavior: smooth;
}


header, main{
    min-height:15vh;
 

}

header h2{
    font-size:2.4rem;
    color:#404040;
    margin-left: 1rem;
}


header nav{
  
    grid-template-columns: auto auto;
    gap:1rem;
    margin-bottom: 2rem;
    align-content: space-around;
    
}


header nav a{
    color:#505050;
    text-decoration: none;
    font-size:1.4rem;
    display:inline-block;
    margin-left:1rem;


}
header nav a:hover{
    color:#000;
    border-bottom:1px solid #ccc;
 
}

.bokaContainer{
    position:relative;
    width:100%;
    height:100%;
}

.boka{
    background:rgb(251, 240, 240);
    padding:5%;
    border:1px solid #eee;
    display:grid;
    place-items: center;
    position:absolute;
    top:40%;
    left:25%;
    width:50%;
    border-radius:4px;
    opacity: 0.7;
    transition: opacity 0.7s;
}
.boka:hover{
    opacity: 1;
    border:none;
}
.boka a{
    color:#404040;
    text-decoration: none;
    font-size:1.5rem;
    transition: font-size 1s, color 1s;

}
.boka a:hover{
    font-size:2.4rem;
    color:#000;
 
}





main{
    min-height:70vh;
    display:grid;
    grid-template-columns: 1fr;
    gap:1rem;
}

.main{
        display: grid;

        width:100%;
     
        object-fit: cover;
        order:7;
        
    
}
.main:first-of-type{
order:1;
}
.main:nth-of-type(2)
{
    order:2;
}
.main:nth-child(4){
    order:3;
}

.main img{

  
    width:100%;
    height:100%;
    object-fit: cover;
    display:block;
}

#hangmatta{
    height:auto;
}

.main video{
    width:100%;
}

.main p{
    padding:4%;
    font-size:1.3rem;
}
.main h2, .main h3{
    padding:2%;
}


footer{
    display:grid;
    place-items: center;
    padding:2%;
    background-color:#545755;
    margin-top:2rem;
    position:fixed;
    bottom:0px;
    width:100%;
    min-height:5vh;
}

footer .contact{
    display:grid;
    gap:1.5rem;
    grid-template-columns: 1fr 1fr;

}



footer a{
    color:#fff;
}


@media(min-width:800px){

    #hangmatta{
        display:none;
    }
    
    main{
        min-height:70vh;
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap:2rem;
        width:80%;
        margin:auto;
    }

    .main:nth-child(3){
        order:3;
    }
    .main:nth-child(4){
        order:4;
    }
    header h2{
        text-align: center;
    }
    nav{
        margin:auto;
        border-bottom:1px solid #ccc;
        text-align: center;
        margin-top:1rem;
        padding-bottom:1rem;
    }
  

}

@media(min-width:1200px){


    #hangmatta{
        display:block;
    }

}
.hidden{
    display:none;
}