@font-face {
   font-family:'noto_sansbold';
   src: url('fonts/notosans/notosans-bold-webfont.woff2') format('woff2'),
        url('fonts/notosans/notosans-bold-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family:'Quicksand';
   src: url('fonts/quicksand/Quicksand-Regular.woff2') format('woff2'),
        url('fonts/quicksand/Quicksand-Regular.woff2') format('woff');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'OpenDyslexic';
   src: url('fonts/dyslexia/OpenDyslexic-Regular.woff2') format('woff2'),
       url('fonts/dyslexia/OpenDyslexic-Regular.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Sans Forgetica';
   src: url('fonts/memorization/SansForgetica-Regular.woff2') format('woff2'),
       url('fonts/memorization/SansForgetica-Regular.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'ZXX Noise';
   src: url('fonts/Acessability/ZXX-Noise.woff2') format('woff2'),
       url('fonts/Acessability/ZXX-Noise.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}




html{
   background-color:  rgb(0, 0, 0);
}

.container{
   display: grid;
   grid-template-columns: repeat(6,1fr);
   grid-template-rows: 10em 25em 10em;
}

.top{
   grid-column: 1/-1;
   grid-row: 1/2;
   color: rgb(255, 255, 255);
   font-family: 'noto_sansbold';
   font-size: 1.5em;
   text-align: center;
   margin: 0em;
   padding: 4em;
}


.access {
   grid-column: 1/-1;
   grid-row: 2/3;
   margin-bottom: -3em;
   /* position: relative;
   margin-left: auto;
   margin-right: auto; */
   background-color: black;
   text-align: center;
   margin: 0em;
   padding: 0.9em;
   z-index: 1;
}

.access h1{
   animation: 2s foo3 infinite step-end;
}

.access :link{
   text-decoration: none;
}

.access :visited {
   text-decoration: none;
 }

.access :hover{
   animation-play-state: paused;
   text-decoration: underline;
   background-color: black;
}

 @keyframes foo3{  
   0% { font-family: 'OpenDyslexic'; 
      color: #000000;
      font-size: 0em;
      line-height: 1.6em;}
   30% { font-family: 'Sans Forgetica'; 
      color: #000000;
      font-size: 0em; 
      letter-spacing: 0em;
      line-height: 1.8em;}
   60% { font-family: 'ZXX Noise'; 
      color: #eea1d0;
      font-size: 8.5em; 
      letter-spacing: 0em;
      line-height: 1.5em;}
   100% { font-family: 'OpenDyslexic'; 
      color: #000000;
      font-size: 0em; 
      line-height: 1.6em;}
 }




 .memory{
   grid-column: 1/-1;
   grid-row: 2/3;
   margin-bottom: -3em;
   /* position: relative;
   margin-left: auto;
   margin-right: auto; */
   /* background-color: black; */
   text-align: center;
   margin: 0em;
   padding: 0.9em;
   z-index: 2;
}

.memory h1{
   animation: 2s foo2 infinite step-end;
}

.memory :link{
   text-decoration: none;
}

.memory :visited {
   text-decoration: none;
 }

.memory :hover{
   animation-play-state: paused;
   text-decoration: underline;
   background-color: black;
}

 @keyframes foo2{  
   0% { font-family: 'OpenDyslexic'; 
      color: #000000;
      font-size: 0em;
      line-height: 1.6em;}
   30% { font-family: 'Sans Forgetica'; 
      color: #dc5a22;
      font-size: 8em; 
      letter-spacing: 0em;
      line-height: 1.8em;}
   60% { font-family: 'ZXX Noise'; 
      color: #000000;
      font-size: 0em; 
      letter-spacing: 0em;
      line-height: 1.5em;}
   100% { font-family: 'OpenDyslexic'; 
      color: #000000;
      font-size: 0em; 
      line-height: 1.6em;}
 }



 .dyslexia{
   grid-column: 1/-1;
   grid-row: 2/3;
   margin-bottom: -3em;
   /* position: relative;
   margin-left: auto;
   margin-right: auto; */
   /* background-color: black; */
   text-align: center;
   margin: 0em;
   padding: 0.9em;
   z-index: 3;
}

.dyslexia h1{
   animation: 2s foo1 infinite step-end;
}

.dyslexia :link{
   text-decoration: none;
}

.dyslexia :visited {
   text-decoration: none;
 }

.dyslexia :hover{
   animation-play-state: paused;
   text-decoration: underline;
   background-color: black;
}

 @keyframes foo1{  
   0% { font-family: 'OpenDyslexic'; 
      color: #9dedb3;
      background-color: #000000;
      font-size: 8em;
      line-height: 1.6em;}
   30% { font-family: 'Sans Forgetica'; 
      color: #000000;
      font-size: 0em; 
      letter-spacing: 0em;
      line-height: 1.8em;}
   60% { font-family: 'ZXX Noise'; 
      color: #000000;
      font-size: 0em; 
      letter-spacing: 0em;
      line-height: 1.5em;}
   100% { font-family: 'OpenDyslexic'; 
      color: #9dedb3;
      font-size: 8em; 
      line-height: 1.6em;}
 }



 .bottom{
   grid-column: 1/-1;
   grid-row: 3/4;
   color: rgb(255, 255, 255);
   font-family: 'noto_sansbold';
   font-size: 1.5em;
   text-align: center;
   margin: 0em;
   padding: 3em;
}