@font-face {
    font-family: titelfont;
    src: url(/fonts/astonscript.ttf);
}

@font-face {
    font-family: tekstfont ;
    src: url(/fonts/jmh_typewriter/JMH\ Typewriter.ttf);
}

.container {
    display: grid;
    grid-template-columns: auto auto;
    /*grid-template-rows: auto auto auto auto;*/
    grid-gap: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

.block {
    padding:20px;
    background-color: rgb(254, 247, 238);
    /*color: white;
    font-weight: bold;
    font-size: 4em;*/
    text-align:center;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.block.block1 img {
    width: 22%; 
    height: auto; 
    border-radius: 8px; 
    margin-top: 8px;
    position: relative;
    box-shadow: 10px 10px 5px 5px rgba(0, 0, 0, 0.1);
}

.block.block1 img:nth-child(1) {
    top: 10px;
    left: 60px;
    z-index: 2;
}

.block.block1 img:nth-child(2){
    left: 10px;
    z-index: 3;

}

.block.block1 img:nth-child(3){
    top: 15px;
    right: 20px;
    z-index: 4;

}

.block.block1 img:nth-child(4){
    top: 5px;
    right: 60px;
    z-index: 1;

}



.block.block2{
    color: brown;
    font-family: titelfont;
    font-size: 90px;
}

.block.block3 {
    font-family: tekstfont;
}

.block.block3 img {
    width: 50%;
    height: auto;
    box-shadow: 10px 10px 5px 5px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    
}

.block4 {

    font-family: tekstfont;
    font-size: larger;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 60px;
}

.block5 iframe {
    box-shadow: 10px 10px 5px 5px rgba(0, 0, 0, 0.1);
    
}

.block.block6 {
    padding-top: 130px;
}

a:link{
    color: black;
    font-family: tekstfont;
}

a:visited {
    color: brown;
    font-family: tekstfont;
}

a:hover {
    color: rgb(254, 247, 238);
    background-color: brown;
}

.block7 {
    font-family: tekstfont;
    
   
}



@media screen and (min-width:320px){
main {
    grid-template-columns: auto;
}
    .block.block1{
        grid-row: 1;
    }
    .block.block2{
        grid-row: 2;
    }
    .block.block3{
        grid-row: 3;
    }
    .block.block4{
        grid-row: 5;
    }

    .block.block5{
        grid-row: 4;

    }

    .block.block6{
        grid-row: 6;
    }

    .block.block7{
        grid-row: 7;
        
    }
}

@media screen and (min-width:768px){
    main {
        grid-template-columns: auto;
    }
    .block.block1{
        grid-row: 1;
    }
    .block.block2{
        grid-row: 2;
    }
    .block.block3{
        grid-row: 3;
    }
    .block.block4{
        grid-row: 5;
    }
    .block.block5{
        grid-row: 4;

    }

    .block.block6{
        grid-row: 6;
    }

    .block.block7{
        grid-row: 7;
        
    }

}

@media screen and (min-width:992px){
    main {
        grid-template-columns:  auto auto;
    }
    .block.block1{
        grid-column: 1/3;
        grid-row: 1;
    }
    .block.block2{
        grid-column: 1/3;
        grid-row: 2;
    }
    .block.block3{
        grid-column: 1;
        grid-row: 3;
    }
    .block.block4{
        grid-column: 2;
        grid-row: 3;
    }

    .block.block5{
        grid-column: 1;
        grid-row: 4;

    }

    .block.block6{
        grid-column: 2;
        grid-row: 4;
    }

    .block.block7{
        grid-column: 1/3;
        grid-row: 5;
        
    }
}