@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

/* Base Styles */
#logo
 {
  padding: 5px;
  background-color: forestgreen;
  display:flex;
  align-items: baseline;
  flex-flow: wrap;
}
#logo a
{
    font-size: 125%; 
    color: white;
}

#logo h1
{
    font-family: Tahoma;
    font-stretch:expanded;  
    font-size:150%;
    font-weight: bold; 
    font-variant:normal;
    text-shadow:2px 2px 10px black;
    text-decoration:none;
    text-decoration-color: yellow;
    margin: 5px
}

#logo h5
{
    color: white; margin: 5px
}

.gen_yellow
{
    display:flex; 
    background-color: yellow; 
    align-items: center;
    justify-content: center;
    flex-flow: wrap; 
}

.gen_lime
{
    background-color: lime;
    margin: 0px; 
    text-align: center;
    font-size: 120%; 
    font-weight: bold;
}

#grade_backtoschool
{
  background-color: whitesmoke;
  display:flex;
  justify-content: space-between;  
}

#grade
{
 background-color: pink; 
 font-weight:bold;
 padding-left:5px;
 padding-right:5px;   
}

#backtoschool
{
 padding-left:5px;
 padding-right:5px;
 padding-top:3px;
 padding-bottom:3px;   
}

#backtoschool a
{
 font-weight:bolder; 
 color:red;  
}


#subject_menu 
{
  display:flex;
  flex-flow: row wrap;
  flex-direction: row;
  justify-content: space-around;
  background-color: blue;  
}


#subject_menu div a
{
  text-decoration: none;
  color: white;
  border: 1px solid transparent;
  font-size: 16px;
  font-weight: bold;
}

.subjects
{
    background-color: brown; 
    padding:2px ; 
    margin: 2px; 
}

.sub_videos
{
    display:flex;
    flex-flow: wrap;  
    justify-content: space-around;
    align-content: space-around;
    padding: 10px
}

.sub_videos div
{
    padding: 5px; 
    background-color: pink
}


.blink_me {
  animation: blinker 1s ;
  animation-iteration-count: 6;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}