*{
    box-sizing: border-box;
    margin: 0%;
    padding: 0%;
}
html{ 
    scroll-behavior: smooth;
}


h1{ 
    font-family: "Rubik Dirt", system-ui ;
    font-size: 4.5em;
    text-align: center;
    background-color: #FC5E98;
}

h2{ 
    font-family: "Rubik Dirt", system-ui;
    color: #25B197;
    text-align: center;
    font-size: 3em;
}

nav ul li {
    display: inline-block;
    margin-right: 1em;
    font-size: 2em;
    font-family: "Barriecito", system-ui ;
}
nav a{ 
   
  
    color: #FED468;
    


    border-radius: 0%;
    text-decoration: none;
}

header{
    background-color: #FC5E98;
    width: 100%; 
    height: 100%;
    padding: 1.05em;
}


body{ 
   
   
  
  background-image: url(../img/sonic-era_3.jpg);
 
    
    text-align: center;
  
   
 }



p{
    font-family:"Special Elite", system-ui ;
    font-size: 1.5em;
    text-align: left;
    padding-top: 1em;
    padding-bottom: 1em;
}

img{
  position:relative;
 

}   


footer{ 
    font-family:"Special Elite", system-ui ;
    font-size: 1.5em;
    text-align: center;
    color: #ff186d;
    padding-top: 1em;
    padding-bottom: 1em;
    background-color: #FED468;
    border-radius: 15%;
}




#earlydays{ 
   color:#00789d ;
   padding-top: 2em;
   padding-left: 4em;
   padding-right: 4em;
   padding-bottom: 1em;
   size: 3em;
    background-color: antiquewhite;
    border-radius: 5%;
   
}
#kiddays{ 
    color: #ff186d;
    padding-top: 2em;
    padding-left: 4em;
    padding-right: 4em;
    padding-bottom: 1em;
    background-color: antiquewhite;
    border-radius: 5%;
}

#twelve-fourteen{ 
    color: #00789d;
    padding-top: 2em;
    padding-left: 4em;
    padding-right: 4em;
    padding-bottom: 5em;
     background-color: antiquewhite;
    border-radius: 5%;
    
    
}

#fourteen-fifteen{ 
    color: #ff186d;
    padding-top: 5em;
    padding-left: 1em;
    padding-right: 4em;
    padding-bottom: 1em;
    background-color: antiquewhite;
    border-radius: 5%;
}

#sixteen-seventeen{
    color: #00789d;
    padding-top: 2em;
    padding-left: 1em;
    padding-right: 4em;
    padding-bottom: 1em;
     background-color: antiquewhite;
    border-radius: 5%;
}

#current{
    color: #ff186d;
    padding-top: 2em;
    padding-left: 1em;
    padding-right: 4em;
    padding-bottom: 5em;
    background-color: antiquewhite;
    border-radius: 5%;
}




/* class */ 


.pixelgifs{ 
    height: 7em;
    position: relative;
    
    height: 7em;
    
    
   
}
.earlydays{ 
     padding: 0.5em;
    border: 0.3em solid #ff186d;
    padding-top: 0.5em;
    border-radius: 20%;
    width: 15em;
  
  }  

  .kiddays{
      padding: 0.5em;
    border: 0.3em solid #00789d;
    padding-top: 0.5em;
    border-radius: 20%;
    width: 15em;
    } 

.twelve-fourteen{ 



    padding: 0.5em;
    border: 0.3em solid #ff186d;
    border-radius: 20%;
   
  


}

.fourteen-fifteen{ 


width: 22em;
    padding: 0.5em;
    border: 0.3em solid #25B197;
    border-radius: 20%;

}


.sixteen-seventeen{ 


width: 22em;
    padding: 0.5em;
    border: 0.3em solid #ff186d;
    border-radius: 20%;


}


.sonic-era{ 


width: 20em;
    padding: 0.5em;
    border: 0.3em solid #00789d;
    border-radius: 20%;


}







/* fonts */ 
.barriecito-regular {
    font-family: "Barriecito", system-ui;
    font-weight: 400;
    font-style: normal;
  }

  .rubik-dirt-regular {
    font-family: "Rubik Dirt", system-ui;
    font-weight: 400;
    font-style: normal;
  }

  .special-elite-regular {
    font-family: "Special Elite", system-ui;
    font-weight: 400;
    font-style: normal;
  }