* {
  margin: 0;
  padding: 0;
}
body {
  	background-color:Midnightblue;
    
}

a {
  text-decoration:none;  
    }
h1 {
text-align:center;
font-size: 75px;
    font-family: 'Alfa Slab One';
    -webkit-text-fill-color: Orangered;
    -webkit-text-stroke: 2px yellow;
}

    img {
        width:300px;
    }
    input {
    font-size:19px;
    }
   #oko {
    background: lightcyan;
    width: 350px;
    border: 1px solid black;
    border-radius: 20px;
}
 #profil {
background:lightcyan;
width:350px;
border:1px solid black;
border-radius:25px;
color:red;
font-weight:bold;
}
#profil p {
color:black;
font-weight:bold;

}   


p {
color:white;
}
#icon {
background:blue;
display:inline-block;
 width:200px;
 height:250px;
 margin:50px;
outline: 5px solid blue; 
box-shadow:
0 0 0 10px #2D86D1,
0 0 0 15px #98bacd;
    }
#icon:hover {
background:white;    
width:200px;
height:250px;
margin:50px;
box-shadow:
0 0 0 10px #98bacd,
0 0 0 15px #2D86D1;
    
}
#icon img {
width:200px;
height:210px;  
}
#name {
 text-align:center;   
 font-weight:bold;
 color:white;
 margin-top:10px;
font-size:20px;
background:red;

}
#name:hover {
color: red;
background:blue;
}

#dan {
 background:lime;
 color:white;
 font-weight:bold;
 font-size: 25px;
 border-radius:10px;
 padding:5px;
 margin-top:5px;
}
 #footer p {
 color:white;   
 font-weight: bold;   
}
#footer a {
color: white;
 font-weight:bold; 
text-decoration:none;
}
#footer a:hover {
color: #4e4e4e;
background-color:white;
}
img {
    width:200px;
    
}
@media only screen and (max-width: 450px) {
   
#icon {

width:200px;
height:250px;
margin:20px;
 }

#icon img {
 width:200px;
height:210px;  
}
}
 @media only screen and (max-width: 420px) {  
          h1 {
   font-size: 70px;
 } 
   #oko {
    width:95%;
    }  
     input {
    font-size:18px;
    }
 }
@media only screen and (max-width: 375px) {
         h1 {
   font-size: 65px;
 } 
  input {
    font-size:17px;
    }
 #footer a {
 font-weight: normal; 
}  
 #footer p {
 font-weight: normal; 
}   
}
@media only screen and (max-width: 351px) { 
         h1 {
   font-size: 60px;
 } 
   #oko {
    width:95%;
    } 
     input {
    font-size:16px;
    } 
   img {
        width:90%;
    }
      
   } 
@media only screen and (max-width: 321px) {
         h1 {
   font-size: 55px;
 } 
  #oko {
    width:96%;
    } 
  input {
    font-size:15px;
    }   

}
  @media only screen and (max-width: 290px) { 
     h1 {
   font-size: 50px;
 } 
      
      
    #oko {
    width:97%;
    } 
    input {
    font-size:14px;
    }  
 }