* {
      margin: 0;
} 

html{
      height: 100%; font-size: 100%;
}





/* Laptop size screen*/  
body {
     height: 100%;
     width: 100%;
     font-family: Arial;
     font-size: 16px;
     overflow: scroll;
     }


@media screen and (min-width: 1000px){  

#header {
height: 50px;
width: 100%;
background-color:#fff;
position: relative;
margin: 1px;
padding: 1px;
display: block;

}
}
/* For 980px or less */  
@media screen and (max-width: 1000px){  
        
  #header {

font-size: 50%;

}
}


@media screen and (min-width: 980px){ 
#tekst {
  margin: 10px 100px 30px 40px;
}
}


@media screen and (min-width: 800px) and (max-width: 980px){  
#tekst {
  margin: 10px 100px 10px 100px;
}
}

@media screen and (min-width: 600px) and (max-width: 800px){  
#tekst {
  margin: 10px 50px 10px 40px;
}
}

@media screen and (min-width: 400px) and (max-width: 600px){  
#tekst {
  margin: 10px 50px 10px 40px;
}
}

@media screen and (max-width: 400px){  
#tekst {
  margin: 10px 50px 10px 40px;
}
}

@media screen and (min-width: 980px){  
#Me {
  margin: 10px 200px 40px 100px;
}
}

@media screen and (min-width: 800px) and (max-width: 980px){  

#Me {
  margin: 10px 10000px 10px 100px;
}
}

@media screen and (min-width: 600px) and (max-width: 800px){  
#Me {
  margin: 10px 10px 10px 50px;
}
}

@media screen and (min-width: 560px) and (max-width: 600px){  
#Me {
  margin: 10px 150px 0px 170px;
}
}

@media screen and (min-width: 540px) and (max-width: 560px){  
#Me {
  margin: 10px 100px 0px 165px;
}
}

@media screen and (min-width: 520px) and (max-width: 540px){  
#Me {
  margin: 10px 100px 0px 160px;
}
}

@media screen and (min-width: 510px) and (max-width: 520px){  
#Me {
  margin: 10px 100px 0px 150px;
}
}

@media screen and (min-width: 500px) and (max-width: 510px){  
#Me {
  margin: 10px 100px 0px 140px;
}
}

@media screen and (min-width: 480px) and (max-width: 500px){  
#Me {
  margin: 10px 100px 0px 130px;
}
}

@media screen and (min-width: 450px) and (max-width: 480px){  
#Me {
  margin: 10px 100px 0px 110px;
}
}

@media screen and (min-width: 400px) and (max-width: 450px){  
#Me {
  margin: 10px 100px 0px 100px;
}
}

@media screen and (max-width: 400px){  
#Me {
  margin: 10px 100px 0px 80px;
}

}


#content #push {
margin: 0;
padding: 0;
border: 0;
width: 85%;
height: 100%;

}

/* For 980px or less */  
@media screen and (max-width: 750px){  
#content {
  margin: 0px 0px 0px 0px;
  font-size: 50%;
}

}
@media screen and (min-width: 750px){  
#publications {
margin: 20px 50px 20px 50px;
}

}

/* For 980px or less */  
@media screen and (max-width: 750px){  
#publications {
  margin: 0px 0px 0px 0px;
  font-size: 50%;
}

}

#contact1 {
  margin: 20px 80px 20px 80px;

}

/* For 980px or less */  
@media screen and (max-width: 750px){  
#contact1 {
  margin: 20px 50px 30px 50px;

}

}

#contact2 {
  margin: 0px 0px 0px 250px;

}

/* For 980px or less */  
@media screen and (max-width: 500px){  
#contact2 {
  margin: 0px 0px 0px 80px;

}
}


@media screen and (min-width: 500px) and (max-width: 550px){  
#contact2 {
  margin: 0px 0px 0px 150px;

}
}

@media screen and (min-width: 550px) and (max-width: 600px){  
#contact2 {
  margin: 0px 0px 0px 150px;

}
}

@media screen and (min-width: 600px) and (max-width: 700px){  
#contact2 {
  margin: 0px 0px 0px 80px;

}
}

@media screen and (min-width: 700px) and (max-width: 750px){  
#contact2 {
  margin: 0px 0px 0px 100px;

}
}

/* For 980px or less */  
@media screen and (min-width: 750px) and (max-width: 980px){  
#contact2 {
  margin: 0px 0px 0px 180px;

}

}


#contact3 {
  margin: 0px 0px 0px 700px;

}

/* For 980px or less */  
@media screen and (max-width: 500px){  
#contact3 {
  margin: 0px 0px 0px 80px;

}

}

@media screen and (min-width: 500px) and (max-width: 550px){  
#contact3 {
  margin: 0px 25px 0px 150px;

}

}

@media screen and (min-width: 550px) and (max-width: 600px){  
#contact3 {
  margin: 0px 20px 0px 150px;

}

}

@media screen and (min-width: 600px) and (max-width: 700px){  
#contact3 {
  margin: 0px 10px 0px 300px;

}
}

@media screen and (min-width: 700px) and (max-width: 750px){  
#contact3 {
  margin: 0px 10px 0px 350px;

}
}

@media screen and (min-width: 750px) and (max-width: 900px){  
#contact3 {
  margin: 0px 0px 0px 400px;

}
}

@media screen and (min-width: 900px) and (max-width: 1000px){  
#contact3 {
  margin: 0px 0px 0px 500px;

}
}

@media screen and (min-width: 1000px) and (max-width: 1100px){  
#contact3 {
  margin: 0px 0px 0px 600px;

}
}

#contact4 {

  margin: 10px 1000px 10px 500px;}

/* For 980px or less */  
@media screen and (max-width: 500px){ 
  #contact4 {
  margin: 10px 1000px 10px 150px;}
}


@media screen and (min-width: 500px) and (max-width: 600px){  
#contact4 {
  margin: 10px 1000px 10px 230px;

}
}

@media screen and (min-width: 600px) and (max-width: 700px){  
#contact4 {
  margin: 10px 1000px 10px 300px;
}
}

@media screen and (min-width: 700px) and (max-width: 750px){  
#contact4 {
  margin: 10px 1000px 10px 350px;
}
}

@media screen and (min-width: 750px) and (max-width: 980px){  
#contact4 {
  margin: 10px 1000px 10px 400px;

}

}

#footer {
height: 40px;
background-color: #f2f2f2;
bottom: 0 ;
position: fixed;
width: 100%;
top: auto;
}  


ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
  
  
}

li {
      float: right;

}

@media screen and (min-width: 980px){  

li a {
     text-decoration: none;
     display: inline-block;
     color: #808080;
     text-align: center;
     padding: 14px 25px;
     margin: 4px 2px 0px 0px ;
     display: block;

}
}

/* For 980px or less */  
@media screen and (min-width: 650px) and (max-width: 980px){  

  li a {
     text-decoration: none;
     display: inline-block;
     color: #808080;
     text-align: center;
     padding: 14px 8px;
     margin: 7px 10px 0px 0px ;
     display: block;
  }
}

/* For 980px or less */  
@media screen and (max-width: 650px){  

  li a {
     text-decoration: none;
     display: inline-block;
     color: #808080;
     text-align: center;
     padding: 14px 4px;
     margin: 9px 2px 0px 0px ;
     display: block;
  }
}



  li a:hover{ 
      background-color: #CDD0D1;
}


.B{

  font-family: Alex Brush;
  font-size: 20px;
}

/* For 980px or less */  
@media screen and (max-width: 1000px){  

 .B{

  font-family: Alex Brush;
  font-size: 100%;
}
}