@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}

@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}


header{
    color: green;
    background-color: lightblue;
    width: 100%;
    text-align: center;
    letter-spacing: 0.1cm;
    border-bottom: solid 5pt black; /*dotted dosher double*/
    font-family:sans-serif;
}

li{
    float:left;
}
li a{
    display: block;
    color: blue;
    font-size: 20px;
    text-align: center;
    text-decoration: none;
    padding: 10px 20px;
    border: solid 1px black;
    font-variant: small-caps;
}
ul{
    list-style-type:none ;
    margin:0; /*väline vahe elementist*/
    padding:0; /*elemendi sisu ümber ruum*/
    overflow: hidden;
    background-color: plum;
}
li a:hover{
    background-color: orange;
    color: lightblue;
    text-decoration: double underline;
}
.nimikiri{
    list-style-type:"*" ;
    margin:0; /*väline vahe elementist*/
    padding: 20px; /*elemendi sisu ümber ruum*/
    background-color: lightcoral;
}
img#pilt1{
    width: 20%;
    height: auto;
}
img#pilt2{
    width: 30%;
    border: dotted 2pt red;
    height: auto;
}
img#pilt3{
    width: 40%;
    border: solid 1pt darkblue;
    border-radius: 200px;
    height: auto;
}
.nmk{
    margin:0; /*väline vahe elementist*/
    padding: 20px; /*elemendi sisu ümber ruum*/
    background-color: burlywood;
    border: solid 1pt black;
    font-size: 18px;
    border-radius: 200px;
    text-align: center;
    position: relative;
    left:40px;
    top:120px;
    z-index: 2;
    
}
.fff{
    margin:0; /*väline vahe elementist*/
    padding: 10px 20px;
    background-color: lightcyan;
    color: black;
    text-decoration:underline;
    border: solid 5pt black;
    font-size: 34px;
    text-align: center;
    border-radius: 10px;
    position: absolute;
    left:60px;
    z-index: 1;
}
.rrr{
    font-size: 13px;
    background-color: cadetblue;
    border: solid 15pt black;
    text-align: center;
    padding:20px;
    position: relative;
    left:320px;
    top:120px;
    width: 30%;
    z-index: 3;
    display: none;
}
.esimene, .teine, .kolmas, .neljas, .viies{
    position: absolute;
}
.esimene{
    top: 10%;
    left: 1036px;
}
.teine{
    top: 30%;
    left: 600px;
    right: 100px;
}
.kolmas{
    top: 15%;

}
.neljas{
    top:25%;

}
.viies{
    top:90%;
}

main{
    height: 880px;
    
}
.esimene{
    position: absolute;
    left: 1%;
    top:15%;
}
.kolmas{
    position: absolute;
    top:18%;
}
.neljas{
    position: absolute;
    top:28%;
}
.teine{
    position: absolute;
    left:0%;
    top:62%;
}