html, body{
    animation: 2s ease-out 0s 1 opacity;
    height: 100%;
    margin:0;
    font-family: 'Source Serif Pro', serif;
    font-size:6.5vmin;
    font-weight: 500;
    display: flex;
  align-items: center;
  justify-content: center;
    
}
.container{
    height: 25%;
    background: white;
    border-top:solid 0.3vmin black;
    width: 100%;
 
}

.bottom{

    border-bottom:solid 0.3vmin black;
 
}

a {
    text-decoration: none;
    color:inherit;

}

a:hover {
   
    color:#008925;
    cursor: pointer;
}




.stretch1, .stretch2, .stretch3, .stretch4   {
    overflow-x:hidden;
    padding-top:2vmin;

  text-align:justify;}
 
span{
  background-color:red;
  width:100%;
  height:0em;
  display:inline-block;
}
    
    

.stretch_it{
    white-space: nowrap;
    vertical-align: middle;
}


#quadrat {
    width: 50vmin;
    height: 50vmin;
    background-color:;
    transition: all 125ms ease-in-out;
    animation: 500ms ease-out 0s 1 jumpy;
}

#quadrat:hover  {
    transition: transform 125ms;
    transform: translateY(-10px);
    
}



@keyframes jumpy {
  0% {
    transform:translateY(-30px);
  }
  100% {
     transform: ;
  }
}


@keyframes opacity {
  0% {
    opacity:0;
  }
  100% {
     opacity:100;
  }
}



.dismiss {
background: transparent;
    border:0px;
    left:5vmin;
    position:absolute;
    top:4vmin;
    padding:0px;
    cursor:pointer;
    font-size:5vmin;;
   
    
}


.container2 {
  margin: 0 auto;
    background-color:;
  max-width: 90vmin;
  width: 100%;
  position: relative;
  justify-content: center;
  display: flex;
    
}


.overlay {
    
  display: block;
    transition: all 1s ease-in-out;
    background:white;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  transform-origin: top left;
  width: 100%;
  min-height: 100vh;
    

}

.hidden {
  display: none !important;
}

.visuallyhidden {
  opacity: 0;
}





.inside {
    width:100%;
background:;
  padding: 5vmin;

}


.inside h1{
    
background-color:;
display: flex;
justify-content: space-between;
    margin:0;
margin-top: 5.5vmin;
padding-bottom: 1vmin;
font-size:5vmin;
font-weight:inherit;
}

.inside h2{
   margin:0; 
  font-size: 2vmin;
    font-family: 'Rubik', sans-serif;
    font-weight: 600;
}

.inside h3{
   margin:0; 
  font-size: 2vmin;
    font-family: 'Rubik', sans-serif;
    font-weight: 300;
       padding-bottom:1.5vmin;
}

.inside h4{
   margin:0; 
  font-size: 3vmin;
    font-family: 'Rubik', sans-serif;
    font-weight: 600;
    padding-bottom:2vmin;
     padding-top:2vmin;
}

.inside h5{

  font-size: 8vmin;
    font-family: 'Rubik', sans-serif;
    font-weight: 600;

}

.inside p{
   margin:0; 
  font-size: 2.5vmin;
    font-family: 'Rubik', sans-serif;
    font-weight: 200;
    line-height: 4vmin;
}


@media (max-width: 650px) {
 .inside h1{
margin-top: 10vmin;
font-size:10vmin;
}
    
.dismiss {
    top:4vmin;
    font-size:8vmin; 
}    
    
    .inside p {
  font-size: 3.5vmin;
        line-height: 6.4vmin;
}    

    
.inside h2{
   margin:0; 
  font-size: 3.4vmin;
    font-family: 'Rubik', sans-serif;
    font-weight: 600;
}

.inside h3{
   margin:0; 
  font-size: 3vmin;
    font-family: 'Rubik', sans-serif;
    font-weight: 300;
       padding-bottom:3vmin;
}

.inside h4{
   margin:0; 
  font-size: 5vmin;
    font-family: 'Rubik', sans-serif;
    font-weight: 600;
    padding-bottom:3vmin;
} 
    
    .inside h5{

  font-size: 8vmin;
    font-family: 'Rubik', sans-serif;
    font-weight: 600;
        word-break: break-all;

}
    
#quadrat {
    width: 80vmin;
    height: 80vmin;
}
    
.stretch1, .stretch2, .stretch3, .stretch4   {
    padding-top:2vmin;
   font-size:11vmin;
   
    
    
}
    
.container{
    border-top:solid 0.6vmin black;
 
}

.bottom{

    border-bottom:solid 0.6vmin black;
 
}
    
}