@font-face{
    font-family: 'handwrite';
    src: url('Sternstunden.ttf')
    format('truetype')    
}
@font-face{
    font-family: 'quicksand';
    src: url('Quicksand-Regular.otf')
    format('opentype')
}
#wrapper{
    width:95%;
    margin:50px auto;
}
.grid{
    display:block;
    width:100%;
    overflow:visible;
}
.gc{
    float:left;
    padding:1px 3px;
    box-sizing: border-box;   
}
.g1of12{
    width:8.3333333%;
    position: fixed;
}
.g1of12 img:hover{
}
.g2of12{
    width:16.666666%;  
}
.g3of12{
    width:25%;
}
.g4of12{
    width:33.333333%;
    display: flex;
    flex-wrap: wrap;
}.g5of12{
    width:41.666666%;
}.g6of12{
    width:50%;
}.g7of12{58.3333333%
    width:;
}.g8of12{
    width:66.666666%;
}
.g9of12{
    width:75%;
}.g10of12{
    width:83.333333%;
}.g11of12{
    width:91.666666%;
}.g12of12{
    width:100%;
}
#insta:hover{
    opacity: 0.3;
    
}
#head{
    margin:5px auto;
    text-align: center;
}
#header{
    font-size:60px;
    font-family: handwrite;
}
#header a:link{text-decoration: none;color:black;}
#header a:visited{text-decoration: none;color:black;}
#header a:hover{color:darkseagreen;}
#header a:active{text-decoration: none; color:black;}
#header2{
    font-family: handwrite;
    font-size:30px;
    line-height: 20%;
    color: darkseagreen;
}
#header2 a:link{text-decoration: none;color:darkseagreen;}
#header2 a:visited{text-decoration: none;color:darkseagreen;}
#header2 a:hover{color:black;}
#header2 a:active{text-decoration: none; color:darkseagreen;}

#footer{
    text-align: center;
    font-family: quicksand;
    font-size:8px;
    margin:50px 0 20px 0;
}

#dyatlov{
    margin:20px 0;
}
#dcov{
    max-width: 100%;
}
#dyatlov img{
      max-width: 100%;
    border-style: solid;
    border-width:0.5px;
    border-color: lightgray;
}
#rcov{
    max-width: 100%;
}
#rocko img{
      max-width: 100%;
    border-style: solid;
    border-width:0.5px;
    border-color: lightgray;
}
.about{
    margin:2px 0;
    text-align: justify;
    font-family: quicksand, Helvetiva, sans-serif;
    font-size:10px;
}

.space{
    height:20px;
}
.space2{
    height:50px;
}
#rocko{
    margin:20px 0px;
}

video{
    max-width: 100%;
}


.about2{
    margin:5px 0px;
    text-align: justify;
    font-family: quicksand, Helvetiva, sans-serif;
    font-size:10px;
}
.grid img{
    max-width:100%;
    max-height: 100%;
    }
.g3of12 img:hover{opacity: 0.7;}

.grid a:link{text-decoration: none;color:black;}
.grid a:active{text-decoration: none;color:black;}
.grid a:visited{text-decoration: none;color: black;}
.grid a:hover{text-decoration: none;color:black;}

@media only screen and (max-width:768px){
    .gc{width:33.33333%;}
    
    #header{
        width:100%;}
    
    #illu img{
        margin:1px;
        
    }
}

@media only screen                      
    and (min-device-width : 375px) 
    and (max-device-width : 667px)
    and (orientation : landscape){
    .gc{width:50%;}
    #header{
            width:100%;
            font-size:50px;}
    #header2{font-size:20px;
             line-height: 10%;        
    }
        }

@media only screen and (min-width:320px) and (max-width:480px){
    .gc{width:100%;}
    #header{font-size:50px;}
    #header2{font-size:20px;
             line-height: 10%;        
    }

    #illu img{
        margin:3px;
    }