/*style.css*/

* {
  border-sizing: border-box;
  margin: 0;
  padding: 0;
}


body{
    background-color: #454545;
    color:#ddd ;
    font-family: "Playfair Display", serif; 
padding:1em;
    
}
h1, h2, p{
    padding-bottom:.2em ;
    padding-top:.2em ;
    
}

h1{
 text-shadow: 2px 3px 2px #04AA6D ;   
 font-family: "Archivo Black", sans-serif; 
}

img{
border: .2em solid  #ddd;
}

.logo{
    border:none;
    width: 2.55em;
  margin-top: .3em;
}

.image{
    border:none; 
}

/*LINKS*/
a{
color: #74D0D2;
text-decoration: none;
transition: .5s;

}

a:hover{
    text-decoration: none;
    
    background-color: #74D0D2;
    color:#454545 ;
}





/*START MENU BAR*/
nav {
    width: 100%;
    margin: 0;
    background-color:  #333;

  
    position: fixed;
  
  
    top: 0;
}

.menu {
  
    list-style-type: none;
  
    margin: 0 auto;
    padding: 0;
  
  
    padding-left: 3em;
  }

.menuitem {
    float: left;
}

.menuitem a {
    display: inline-block;
    color: #e3e3e3  ;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 1em;
}

.menuitem a:hover {
    background-color: #04AA6D   ;
    font-size: 1em;
    color: #e3e3e3;
}
/*END MENU BAR*/

main {

  padding: 1em;
  padding-top: 3em;
  width: 90%;
  margin: auto;
}

    	                /*BOUNCE*/
@keyframes bouncing {
   from {
      transform: translateY(0px);
   }
   to {
      transform: translateY(-14px);
   }
}

.bounce {
   animation-duration: 350ms;
   animation-name: bouncing;
   animation-iteration-count: 4;
   animation-direction: alternate;
   animation-timing-function: cubic-bezier(0.2, 0.65, 0.6, 1);
}