@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: #9dedb3;
}
 

.container{
   display: grid;
   /* background-color: #dc5a22; */
   grid-template-columns: repeat(12,1fr);
   grid-template-rows: 12em 52em;
}


.menu{
   grid-column: 1/3;
   /* grid-row: 1/2; */
   /* background-color: antiquewhite; */
}

.menu h1{
   font-size: 8em;
   text-align: center;
   line-height: 20%;
   margin: 0.28em;
   padding: 0em;
   transition: .5s ease-in-out;
   transform-origin: 50% 65%;
}

.menu :link{
   text-decoration: none;
   color: #231e68;
}

.menu :visited {
   text-decoration: none;
   color: #231e68;
 }

.menu :hover{
   text-decoration: none;
   color: #231e68;
   transform: rotate(90deg);
}


.title{
   grid-column: 3/-1;
   /* grid-row: 1/2; */
   text-align: center;
   font-family: 'OpenDyslexic';
   color: #231e68;
   font-size: 1.7em;
   line-height: 2.4em;
   margin-bottom: 1.2em;
   padding-bottom: 0.8em;
   /* background-color: aqua; */
}

.matters{
   grid-column: 1/3;
   /* grid-row: 1/2; */
   text-align: center;
   line-height: 240%;
   font-family: 'noto_sansbold';
   /* color: #0b143b; */
   border-style: solid;
   border-color: #231e68;
   border-width: 0.2em;
   font-size: 2.2em;
   line-height: 250%;
   margin: .6em;
   padding: 0em;
   /* background-color: aqua; */
}

.matters :link{
   text-decoration: none;
   color: #231e6810;
}

.matters :visited {
   text-decoration: none;
   color: #231e6810;
 }

.matters :hover{
   text-decoration: none;
   color: #231e68;
}


.dyslexia{
   grid-column: 3/7;
   overflow: hidden;
   /* grid-row: 1/2; */
   text-align: center;
   font-family: 'OpenDyslexic';
   background-color: #231e68;
   color: #231e68;
   letter-spacing: -0.4em;
   line-height: 300%;
   font-size: 2em;
   margin: .4em;
   padding: 1.2em;
   padding-left: 2em;
   padding-right: 2em;
   padding-top: 1em;
}

.dyslexiacontainer{
   display: grid;
   grid-template-columns: repeat(8,1fr);
   grid-template-rows: 1em 2em 1em 2em 1em 2em 1em 2em 1em 2em 1em 2em 1em; 
   padding: 0.1em;
}

.d1{
   grid-column: 1/2;
   animation: spin 1.2s 0.8s 3;
}

.y1{
   grid-column: 2/3;
   animation: spin 1.2s 1.5s 5;
}

.s1{
   grid-column: 3/4;
   animation: spin 2s 0.8s 2;
}

.l1{
   grid-column: 4/5;
   animation: spin 1.2s 1.9s 7;
}
.e1{
   grid-column: 5/6;
   animation: spin 1.2s 2s 35;
}
.x1{
   grid-column: 6/7;
   animation: spin 1.2s 1s 8;
}
.i1{
   grid-column: 7/8;
   animation: spin 1.3s 1.2s 11;
}
.a1{
   grid-column: 8/9;
   animation: spin 1.8s 1.9s 6;
}






.d2{
   grid-column: 1/2;
   animation: spin 2s 1s 6;
}

.y2{
   grid-column: 2/3;
   animation: spin 1.2s 1.6s 13;
}

.s2{
   grid-column: 3/4;
   animation: spin 1.8s 1.2s 7;
}

.l2{
   grid-column: 4/5;
   animation: spin 1s 1s 8;
}
.e2{
   grid-column: 5/6;
   animation: spin 1.7s 2s 4;
}
.x2{
   grid-column: 6/7;
   animation: spin 1.8s 1s 6;
}
.i2{
   grid-column: 7/8;
   animation: spin 1.8s 1.7s 8;
}
.a2{
   grid-column: 8/9;
   animation: spin 1.9s 1.8s 4;
}







.d3{
   grid-column: 1/2;
   animation: spin 1.1s 1.4s 32;
}

.y3{
   grid-column: 2/3;
   animation: spin 2.2s 1.4s 13;
}

.s3{
   grid-column: 3/4;
   animation: spin 1.8s 1s 4;
}

.l3{
   grid-column: 4/5;
   animation: spin 1.4s 1.3s 9;
}
.e3{
   grid-column: 5/6;
   animation: spin 1.2s 1.9s 7;
}
.x3{
   grid-column: 6/7;
   animation: spin 1.1s 1.3s 3;
}
.i3{
   grid-column: 7/8;
   animation: spin 1.2s 1s 10;
}
.a3{
   grid-column: 8/9;
   animation: spin 1.3s 2s 9;
}




.d4{
   grid-column: 1/2;
   animation: spin 2s 1.2s 10;
}

.y4{ grid-column: 2/3;
   animation: spin 1.9s 1.3s 12;
}

.s4{
   grid-column: 3/4;
   animation: spin 1.2s 1.7s 7;
}

.l4{
   grid-column: 4/5;
   animation: spin 2s 1.4s 5;
}
.e4{
   grid-column: 5/6;
   animation: spin 2.2s 1.4s 11;
}
.x4{
   grid-column: 6/7;
   animation: spin 1.5s 1.7s 8;
}
.i4{
   grid-column: 7/8;
   animation: spin 1.2s 1.4s 5;
}
.a4{
   grid-column: 8/9;
   animation: spin 2s 1.4s 5;
}





.d5{
   grid-column: 1/2;
   animation: spin 1.9s 1s 6;
}

.y5{ grid-column: 2/3;
   animation: spin 1.7s 1.6s 12;
}

.s5{
   grid-column: 3/4;
   animation: spin 2.3s 1.7s 5;
}

.l5{
   grid-column: 4/5;
   animation: spin 1.2s 1.5s 15;
}
.e5{
   grid-column: 5/6;
   animation: spin 1.8s 1.9s 12;
}
.x5{
   grid-column: 6/7;
   animation: spin 1.3s 1s 9;
}
.i5{
   grid-column: 7/8;
   animation: spin 1.8s 1.7s 35;
}
.a5{
   grid-column: 8/9;
   animation: spin 1.1s 1.9s 8;
}




.d6{
   grid-column: 1/2;
   animation: spin 1.7s 2s 8;
}

.y6{ 
   grid-column: 2/3;
   animation: spin 1.6s 1.1s 16;
}

.s6{
   grid-column: 3/4;
   animation: spin 1.1s 1.9s 8;
}

.l6{
   grid-column: 4/5;
   animation: spin 1.8s 1.3s 8;
}
.e6{
   grid-column: 5/6;
   animation: spin 2s 2.4s 10;
}
.x6{
   grid-column: 6/7;
   animation: spin 1.5s 1.8s 3;
}
.i6{
   grid-column: 7/8;
   animation: spin 1s 2s 10;
}
.a6{
   grid-column: 8/9;
   animation: spin 1.2s 1s 8;
}



.d7{
grid-column: 1/2;
animation: spin 2.2s 1.6s 8;
}

.y7{ 
grid-column: 2/3;
animation: spin 1.8s 1.9s 16;
}

.s7{
grid-column: 3/4;
animation: spin 1.7s 1.2s 8;
}

.l7{
grid-column: 4/5;
animation: spin 1.6s 1.3s 33;
}
.e7{
grid-column: 5/6;
animation: spin 1s 2s 10;
}
.x7{
grid-column: 6/7;
animation: spin 1.2s 1.3s 3;
}
.i7{
grid-column: 7/8;
animation: spin 2.3s 1.9s 3;
}
.a7{
grid-column: 8/9;
animation: spin 1.8s 1.1s 3;
}



    @keyframes spin {
      0%{
         transform: rotateY(0deg);
         opacity: 100%;
         color: #9dedb3;
       }
      50% {
         transform: rotateY(0deg);
         opacity: 100%;
         color: #9dedb3;
       }
      78% {
         transform: rotateY(-180deg);
         opacity: 100%;
         color: #9dedb3;
       }
      80% {
        transform: rotateY(-180deg);
        opacity: 100%;
        color: #9dedb3;
      }
      100% {
         transform: rotateY(0deg);
         opacity: 100%;
         color: #9dedb3;
       }

    }

 
.content{
   grid-column: 7/-1;
   font-family: 'OpenDyslexic';
   color: #231e68;
   /* background-color: rgb(174, 174, 197); */
   border-style: solid;
   border-color: #231e68;
   border-width: 0.2em;
   font-size: 1.8em;
   line-height: 1.4em;
   letter-spacing: -0.05em;
   margin: .6em;
   padding: 2em;
   overflow: hidden;
   overflow-y: scroll;
}

.content h3 {
   font-size: 1em;
}

.content p {
   font-size: 0.8em;
}

.content::-webkit-scrollbar {
   width: 0.5em;
 }
 
 .content::-webkit-scrollbar-track {
   background: #231e6830;
   border-radius: 0em;
 }
 
 .content::-webkit-scrollbar-thumb {
   background: #9dedb3;
   border-radius: 0.5em;
   border: solid;
   border-width: 0.08em;
   border-color: #231e6830;
 }
 
 .content::-webkit-scrollbar-thumb:hover {
   background: #9dedb3;
   border-radius: 0.5em;
   border: solid;
   border-width: 0.08em;
   border-color: #231e6810;
 }
 
 .content::-webkit-scrollbar-thumb:active {
   background: #9dedb3;
   border-radius: 0.5em;
   border: solid;
   border-width: 0.08em;
   border-color: #231e6810;
 }