header {    padding: 50px;
    text-align: center;
    background-image: url(skygradient.jpg);
    color: rgb(255, 255, 255);
    font-size: 60px;           
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', 'Arial', 'sans-serif'
     }

ul{
    display: inline-block;
    list-style-type: none;
}


nav {   list-style-type: none;
margin: 0;
overflow: hidden;
padding: 0;
background-color: #242d4ef9;
font-size: 30px;
text-align: center;
}

li {    float: left;    
}

li a {  display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}

li a:hover {    background-color: #4a5967;
        }

#me {   width: 35%;
margin-left: auto;
margin-right:auto;
display: block;
border-radius: 50%;
padding-top: 15px;
}

.welcome  {
  text-align: center;
  font-size: 30px;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif 
}

.message {  text-align: center;
    font-size: 27px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif 
}

.email {    display: block;
    text-align: center;
    font-size: 18px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}

.email:hover {background-color:rgb(255, 255, 0)

}

.contact {      display: block;
        text-align: center;
        padding-top: 60px;
        font-size: 20px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}


.phone {    display: block;
    text-align: center;
    font-size: 18px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}

@media screen and (max-width: 1300px)
{ 
    header {    
        padding: 50px;
        text-align: center;
        background-image: url(skygradient.jpg);
        color: rgb(255, 255, 255);
        font-size: 67px;        
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
    }
    nav {   
        list-style-type: none;
        margin: 0;
        overflow: hidden;
        padding: 0;
        background-color: #242d4ef9;
        font-size: 27px;
        text-align: center;
    }
    #me {   
        width: 40%;
        margin-left: auto;
        margin-right:auto;
        display: block;
        border-radius: 100%;
        padding-top: 10px;
    }
    .welcome  
        {
        text-align: center;
        font-size: 40px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif 
    }
    .message 
        {  
        text-align: center;
        font-size: 30px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif 
    }
    .email 
        {    
        display: block;
        text-align: center;
        font-size: 25px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
    }
    .email:hover 
        {
        background-color:rgb(255, 255, 0)
    
    }
    .contact 
        {      
        display: block;
        text-align: center;
        padding-top: 60px;
        font-size: 25px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
    }
    .phone 
        {    
        display: block;
        text-align: center;
        font-size: 25px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
    }
}
@media screen and (max-width: 910px)
{ 
    header {    
        padding: 40px;
        text-align: center;
        background-image: url(skygradient.jpg);
        color: rgb(255, 255, 255);
        font-size: 55px;        
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
    }
    nav {   
        list-style-type: none;
        margin: 0;
        overflow: hidden;
        padding: 0;
        background-color: #242d4ef9;
        font-size: 22.5px;
        text-align: center;
    }
    #me {   
        width: 40%;
        margin-left: auto;
        margin-right:auto;
        display: block;
        border-radius: 100%;
        padding-top: 10px;
    }
    .welcome  
        {
        text-align: center;
        font-size: 30px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif 
    }
    .message 
        {  
        text-align: center;
        font-size: 24px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif 
    }
    .email 
        {    
        display: block;
        text-align: center;
        font-size: 18px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
    }
    .email:hover 
        {
        background-color:rgb(255, 255, 0)
    
    }
    .contact 
        {      
        display: block;
        text-align: center;
        padding-top: 60px;
        font-size: 18px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
    }
    .phone 
        {    
        display: block;
        text-align: center;
        font-size: 18px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
    }
}

@media screen and (max-width: 740px)
{ 
    header {    
        padding: 30px;
        text-align: center;
        background-image: url(skygradient.jpg);
        color: rgb(255, 255, 255);
        font-size: 47px;        
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
    }
    nav {   
        list-style-type: none;
        margin: 0;
        overflow: hidden;
        padding: 0;
        background-color: #242d4ef9;
        font-size: 19px;
        text-align: center;
    }
    #me {   
        width: 40%;
        margin-left: auto;
        margin-right:auto;
        display: block;
        border-radius: 100%;
        padding-top: 10px;
    }
    .welcome  
        {
        text-align: center;
        font-size: 30px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif 
    }
    .message 
        {  
        text-align: center;
        font-size: 24px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif 
    }
    .email 
        {    
        display: block;
        text-align: center;
        font-size: 18px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
    }
    .email:hover 
        {
        background-color:rgb(255, 255, 0)
    
    }
    .contact 
        {      
        display: block;
        text-align: center;
        padding-top: 60px;
        font-size: 18px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
    }
    .phone 
        {    
        display: block;
        text-align: center;
        font-size: 18px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
    }
}

@media screen and (max-width: 657px)
{ 
    header {    
        padding: 20px;
        text-align: center;
        background-image: url(skygradient.jpg);
        color: rgb(255, 255, 255);
        font-size: 38px;        
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
    }
    nav {   
        list-style-type: none;
        margin: 0;
        overflow: hidden;
        padding: 0;
        background-color: #242d4ef9;
        font-size: 11.5px;
        text-align: center;
    }
    #me {   
        width: 50%;
        margin-left: auto;
        margin-right:auto;
        display: block;
        border-radius: 100%;
        padding-top: 10px;
    }
    .welcome  
        {
        text-align: center;
        font-size: 25px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif 
    }
    .message 
        {  
        text-align: center;
        font-size: 18px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif 
    }
    .email 
        {    
        display: block;
        text-align: center;
        font-size: 13px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
    }
    .email:hover 
        {
        background-color:rgb(255, 255, 0)
    
    }
    .contact 
        {      
        display: block;
        text-align: center;
        padding-top: 60px;
        font-size: 13px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
    }
    .phone 
        {    
        display: block;
        text-align: center;
        font-size: 13px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
    }
}
@media screen and (max-width: 492px)
{ 
    header {    
        padding: 20px;
        text-align: center;
        background-image: url(skygradient.jpg);
        color: rgb(255, 255, 255);
        font-size: 27px;        
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
    }
    nav {   
        list-style-type: none;
        margin: 0;
        overflow: hidden;
        padding: 0;
        background-color: #242d4ef9;
        font-size: 6px;
        text-align: center;
    }


    #me {   
        width: 50%;
        margin-left: auto;
        margin-right:auto;
        display: block;
        border-radius: 100%;
        padding-top: 10px;
    }
    .welcome  
        {
        text-align: center;
        font-size: 22px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif 
    }
    .message 
        {  
        text-align: center;
        font-size: 15px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif 
    }
    .email 
        {    
        display: block;
        text-align: center;
        font-size: 11px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
    }
    .email:hover 
        {
        background-color:rgb(255, 255, 0)
    
    }
    .contact 
        {      
        display: block;
        text-align: center;
        padding-top: 60px;
        font-size: 11px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
    }
    .phone 
        {    
        display: block;
        text-align: center;
        font-size: 11px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
    }
}