@font-face {
    font-family: 'GREALN__-webfont';
    src: url('http://atr555.neocities.org/is_lt4370/finaldraft/fonts/GREALN__-webfont.eot');
    src: url('http://atr555.neocities.org/is_lt4370/finaldraft/fonts/GREALN__-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://atr555.neocities.org/is_lt4370/finaldraft/fonts/GREALN__-webfont.woff') format('woff'),
         url('http://atr555.neocities.org/is_lt4370/finaldraft/fonts/GREALN__-webfont.ttf') format('truetype'),
         url('http://atr555.neocities.org/is_lt4370/finaldraft/fonts/GREALN__-webfont.svg#GREALN__-webfont') format('svg');
         
    font-weight: normal;
    font-style: normal;

}
wrapper{
    padding:0;
    margin:0 auto;
    width:100%;
    max-width:960px;
    border:1px solid black;
     
}    

/*the menu styling stuff*/

.nav a{
  color:white;
  text-decoration:none;
  display:inline-block;
  
  z-index:100;
}

.nav{
  animation:500ms ease-in-out menuslide;
  z-index:2;/*keeping navigation from overlapping*/
  
}
.nav ul{/*the background of the nav bar and text color styling*/
  margin-top:0;
  padding:0;
  background-color:#1b22e8;/*blue*/
  font-size:20px; 
  color:white;
  border:1px solid black;
  
  
  
}
/*the categories and menu section styling how the categories look*/
.nav ul li{ 
  display:inline-block;
  text-decoration:none;
  padding:5px 25px;
  list-style-type:none;
  color:white;
  position:relative; /*this must be relative in my main level or category of menu*/
   
}
.subm-menu a{ 
  display:block;
  text-decoration:none;
  padding:5px 25px;
  list-style-type:none;
  color:white;
  opacity:0;
  display:flex;
  flex-direction:column;
  /*this must be relative in my main level or category of menu*/
   
}


 

/*submenu section stuff*/
ul .sub-menu {
  
  border:1px solid black;
  position:absolute;/*need this for dropdown action*/
  list-style-type:none;
  text-decoration:none;
  margin-left:-25px;
  margin-top:5px;
  width:100%;
  font-size:15px;
  text-align:center;
 display:flex;
  flex-direction:column;
  justify-content:center;
  color:white;
  animation-fill-mode: forwards;
  display:block;
  z-index:3;
  
  opacity:0;/*making the dropdown invisible*/
}



.nav ul li a:hover{
  color:#c9362e;/*red*/
  
}
/*hover stuff for submenu stuff*/
.nav li:hover .sub-menu {
  
  opacity:1;
  animation:200ms ease-in-out slideit;
  
  
  
}



/*changing the color of the submenu on hover*/
ul .sub-menu li:hover{
  background-color:#f3b61f;
  color:#1b22e8;/*blue*/
  
}
/*hover stuff for top menu layer*/
.nav li:hover a { /*  link stays 'hovered' even when moving down the list. */
   /*background-color:#f3b61f;/*gold*/
  color:white;
 
}

.nav ul li:hover{
  background-color:#f3b61f;
  color:#c9362e;
   
}
.sub-menu a{
  text-decoration:none;
  color:white;
}
.sub-menu li:hover a{
  opacity:1;
  color:#c9362e;/*red*/
}
/*flex styling stuff*/



.gallerybox{
  width:525px;
  height:375px;
  margin:0 auto;
  display:block;
  
  
  
   
}
#gallerybox .gallery{ /*targeting the containter for the pics*/
  display:flex;
  justify-content:center;
  margin:5px;
  /*border:3px solid red;*/
}
#gallerybox .gallery img{
  
  display:inline-block;
  animation:500ms ease-in-out slideit;
}

#gallerybox .gallery img:hover{
  animation:4s ease-in-out picfall;
}
@keyframes picfall{
  0%{
    transform:translatey(0%) rotate(180deg);
    opacity:1;
    
  }
  100%{
    transform:translatey(100%) rotate(270deg);
    
    opacity:0;
  }
}

h1{
  z-index:1;
  background-color:#f3b61f;/*gold*/
  color:#c9362e;/*red*/
  font-size:90px;
  text-align:center;
  padding:100px;
  margin-top:auto;
  margin-bottom:auto;
  font-family:"GREALN__-webfont",comic;
   -webkit-text-stroke: 1px black;
   border:1px solid black;
   animation:500ms ease-in-out slideit;
   
} 
h2{
  color:white;
  background-color:black;
  font-family:"GREALN__-webfont",comic;
  font-size:35px;
  width:400px;
  text-align:center;
   -webkit-text-stroke: 1px black;
  transition:opacity 500ms 3s;
  margin-top:150px;
  margin-bottom:25px;
  display:block;
  margin-left:25px;
  
  animation:500ms ease-in-out slideit;
  
}
@keyframes slideit{
  0%{
    transform:translatex(-100%);
    opacity:0;
  }
  100%{
    transform:translatex(0%);
    opacity:1;
  }
}
@keyframes menuslide{
  0%{
    transform:translatex(100%);
    opacity:0;
  }
  100%{
    transform:translatex(0%);
    opacity:1;
  }
}

p{
  background-color:#f3b61f;/*gold*/
  color:#c9362e;/*red*/
  font-family:"GREALN__-webfont",comic;
  font-size:35px;
  width:auto;
  text-align:center;
   -webkit-text-stroke: 1px black;
  transition:opacity 500ms 3s;
  margin-top:15px;
  margin-bottom:25px;
  display:block;
  margin-left:25px;
  
  animation:500ms ease-in-out slideit;
}

@keyframes footslide{
  0%{
    transform:translatey(100%);
    opacity:0;
  }
  100%{
    transform:translatey(0%);
    opacity:1;
  }
}
footer{
  background-color:#f3b61f;
  color:#c9362e;
   border:1px solid black;
  text-align:center;
  /*padding:15px;*/
  margin-top:15%;
  
  animation:600ms ease-in-out footslide;
}
footer small{
  font-family:Times;
  text-align:center;
  margin:0;
  padding:0;
  
}
iframe{
  display:block;
  margin:0 auto; 
  animation:500ms ease-in-out menuslide;
  
}
.mainimage img{
  display:block;
  margin:0 auto; 
  animation:500ms ease-in-out menuslide;
}
#updates li{
  overflow:hidden; 
  width:auto;
  
  display:flex;
  justify-content:center;
  flex-direction:column;
  margin:10px auto; 
  animation:5s ease-in-out menuslide;
   background-color:#f3b61f;
  color:#c9362e;
   border:1px solid black;
  text-align:center;
  padding:15px;  
 text-decoration:none;
 list-style:none;
 font-size:20px;
 font-style:oblique;
  
}