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

.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: #0b143b;
}

.menu :visited {
   text-decoration: none;
   color: #0b143b;
 }

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


.title{
   grid-column: 3/-1;
   /* grid-row: 1/2; */
   text-align: center;
   font-family: 'Sans Forgetica';
   color: #0b143b;
   font-size: 1.8em;
   margin: 0em;
   padding: .6em;
   /* 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: #0b143b;
   border-width: 0.2em;
   font-size: 2.2em;
   line-height: 250%;
   margin: .6em;
   padding: 0em;
   /* background-color: #ca521e; */
}

.matters :link{
   text-decoration: none;
   color: #0b143b10;
}

.matters :visited {
   text-decoration: none;
   color: #0b143b10;
 }

.matters :hover{
   text-decoration: none;
   color: #0b143b;
}

.memory{
   grid-column: 3/7;
   overflow: hidden;
   /* grid-row: 1/2; */
   text-align: center;
   font-family: 'Sans Forgetica';
   background-color: #0b143b;
   color: #0b143b;
   letter-spacing: -0.15em;
   line-height: 300%;
   font-size: 2em;
   margin: .4em;
   padding: 1.2em;
}

 
 .memory span:nth-child(1) {
   animation: fade-in 1.8s 1s backwards cubic-bezier(0.11, 0, 0.5, 1) 25;
 }
 
 .memory span:nth-child(2) {
   animation: fade-in 1.8s 1.2s backwards cubic-bezier(0.11, 0, 0.5, 0) 6;
 }
 
 .memory span:nth-child(3) {
   animation: fade-in 1.8s 1.8s backwards cubic-bezier(0.11, 0, 0.5, 0) 5;
 }
 
 .memory span:nth-child(4) {
   animation: fade-in 1.8s 1.3s backwards cubic-bezier(0.11, 0, 0.5, 0) 13;
 }
 
 .memory span:nth-child(5) {
   animation: fade-in 1.8s 1.5s backwards cubic-bezier(0.11, 0, 0.5, 0) 6;
 }
 
 .memory span:nth-child(6) {
   animation: fade-in 1.8s 2s backwards cubic-bezier(0.11, 0, 0.5, 0) 5;
 }

 .memory span:nth-child(7) {
   animation: fade-in 1.3s 1s backwards cubic-bezier(0.11, 0, 0.5, 1) 12;
 }
 
 .memory span:nth-child(8) {
   animation: fade-in 1.5s 1.2s backwards cubic-bezier(0.11, 0, 0.5, 0) 9;
 }
 
 .memory span:nth-child(9) {
   animation: fade-in 1.8s 1.8s backwards cubic-bezier(0.11, 0, 0.5, 0) 14;
 }
 
 .memory span:nth-child(10) {
   animation: fade-in 1.8s 1.3s backwards cubic-bezier(0.11, 0, 0.5, 0) 11;
 }
 
 .memory span:nth-child(11) {
   animation: fade-in 1.8s 1.5s backwards cubic-bezier(0.11, 0, 0.5, 0) 4;
 }
 
 .memory span:nth-child(12) {
   animation: fade-in 1.8s 2s backwards cubic-bezier(0.11, 0, 0.5, 0) 35;
 }

 .memory span:nth-child(13) {
   animation: fade-in 1.8s 1s backwards cubic-bezier(0.11, 0, 0.5, 1) 6;
 }
 
 .memory span:nth-child(14) {
   animation: fade-in 1.8s 1.2s backwards cubic-bezier(0.11, 0, 0.5, 0) 13;
 }
 
 .memory span:nth-child(15) {
   animation: fade-in 1.8s 1.8s backwards cubic-bezier(0.11, 0, 0.5, 0) 9;
 }
 
 .memory span:nth-child(16) {
   animation: fade-in 1.8s 1.3s backwards cubic-bezier(0.11, 0, 0.5, 0) 5;
 }
 
 .memory span:nth-child(17) {
   animation: fade-in 1.8s 1.5s backwards cubic-bezier(0.11, 0, 0.5, 0) 30;
 }
 
 .memory span:nth-child(18) {
   animation: fade-in 1.8s 2.4s backwards cubic-bezier(0.11, 0, 0.5, 0) 3;
 }
 
 .memory span:nth-child(19) {
   animation: fade-in 1.8s 1.9s backwards cubic-bezier(0.11, 0, 0.5, 1) 14;
 }
 
 .memory span:nth-child(20) {
   animation: fade-in 1.8s 1s backwards cubic-bezier(0.11, 0, 0.5, 0) 5;
 }
 
 .memory span:nth-child(21) {
   animation: fade-in 2s 1.3s backwards cubic-bezier(0.11, 0, 0.5, 0) 7;
 }
 
 .memory span:nth-child(22) {
   animation: fade-in 1.8s 1.7s backwards cubic-bezier(0.11, 0, 0.5, 0) 11;
 }
 
 .memory span:nth-child(23) {
   animation: fade-in 1.8s 1.3s backwards cubic-bezier(0.11, 0, 0.5, 0) 13;
 }
 
 .memory span:nth-child(24) {
   animation: fade-in 1.8s 2.8s backwards cubic-bezier(0.11, 0, 0.5, 0) 10;
 }
 
 .memory span:nth-child(25) {
   animation: fade-in 1.8s 1.2s backwards cubic-bezier(0.11, 0, 0.5, 1) 4;
 }
 
 .memory span:nth-child(26) {
   animation: fade-in 1.8s 1.5s backwards cubic-bezier(0.11, 0, 0.5, 0) 7;
 }
 
 .memory span:nth-child(27) {
   animation: fade-in 1.8s 1.4s backwards cubic-bezier(0.11, 0, 0.5, 0) 3;
 }
 
 .memory span:nth-child(28) {
   animation: fade-in 1.8s 1.9s backwards cubic-bezier(0.11, 0, 0.5, 0) 12;
 }
 
 .memory span:nth-child(29) {
   animation: fade-in 1.8s 2s backwards cubic-bezier(0.11, 0, 0.5, 0) 5;
 }
 
 .memory span:nth-child(30) {
   animation: fade-in 1.8s 1.2s backwards cubic-bezier(0.11, 0, 0.5, 0) 32;
 }

 .memory span:nth-child(31) {
   animation: fade-in 1.8s 1.5s backwards cubic-bezier(0.11, 0, 0.5, 1) 15;
 }
 
 .memory span:nth-child(32) {
   animation: fade-in 1.8s 1.8s backwards cubic-bezier(0.11, 0, 0.5, 0) 8;
 }
 
 .memory span:nth-child(33) {
   animation: fade-in 2s 1.1s backwards cubic-bezier(0.11, 0, 0.5, 0) 12;
 }
 
 .memory span:nth-child(34) {
   animation: fade-in 1.8s 1.6s backwards cubic-bezier(0.11, 0, 0.5, 0) 10;
 }
 
 .memory span:nth-child(35) {
   animation: fade-in 1.8s 2.4s backwards cubic-bezier(0.11, 0, 0.5, 0) 4;
 }
 
 .memory span:nth-child(36) {
   animation: fade-in 1.8s 2.6s backwards cubic-bezier(0.11, 0, 0.5, 0) 3;
 }

 .memory span:nth-child(37) {
   animation: fade-in 1.8s 1.5s backwards cubic-bezier(0.11, 0, 0.5, 1) 9;
 }

 .memory span:nth-child(38) {
   animation: fade-in 1.8s 1.1s backwards cubic-bezier(0.11, 0, 0.5, 0) 3;
 }
 
 .memory span:nth-child(39) {
   animation: fade-in 2s 2s backwards cubic-bezier(0.11, 0, 0.5, 0) 14;
 }
 
 .memory span:nth-child(40) {
   animation: fade-in 1.8s 1.7s backwards cubic-bezier(0.11, 0, 0.5, 0) 34;
 }
 
 .memory span:nth-child(41) {
   animation: fade-in 1.8s 1.2s backwards cubic-bezier(0.11, 0, 0.5, 0) 6;
 }
 
 .memory span:nth-child(42) {
   animation: fade-in 1.8s 1.4s backwards cubic-bezier(0.11, 0, 0.5, 0) 9;
 }
 
 .memory span:nth-child(43) {
   animation: fade-in 1.8s 1.9s backwards cubic-bezier(0.11, 0, 0.5, 1) 10;
 }
 
 .memory span:nth-child(44) {
   animation: fade-in 1.8s 1.2s backwards cubic-bezier(0.11, 0, 0.5, 0) 5;
 }
 
 .memory span:nth-child(45) {
   animation: fade-in 2s 1.6s backwards cubic-bezier(0.11, 0, 0.5, 0) 9;
 }
 
 .memory span:nth-child(46) {
   animation: fade-in 1.8s 2s backwards cubic-bezier(0.11, 0, 0.5, 0) 15;
 }
 
 .memory span:nth-child(47) {
   animation: fade-in 1.8s 1.5s backwards cubic-bezier(0.11, 0, 0.5, 0) 3;
 }
 
 .memory span:nth-child(48) {
   animation: fade-in 1.8s 1.9s backwards cubic-bezier(0.11, 0, 0.5, 0) 11;
 }


 
 @keyframes fade-in {
   0% {
      opacity: 1;
      filter: blur(0);
      color: #dc5a22;
    }
   30% {
      opacity: 1;
      filter: blur(0);
      color: #dc5a22;
    }
   100% {
     opacity: 0;
     filter: blur(1);
     color: #dc5a22;
   }
 }


.content{
   grid-column: 7/-1;
   font-family: 'Sans Forgetica';
   color: #0b143b;
   /* background-color: #ca521e; */
   border-style: solid;
   border-color: #0b143b;
   border-width: 0.2em;
   font-size: 1.8em;
   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: #0b143b30;
  border-radius: 0em;
}

.content::-webkit-scrollbar-thumb {
  background: #dc5a22;
  border-radius: 0.5em;
  border: solid;
  border-width: 0.08em;
  border-color: #0b143b30;
}

.content::-webkit-scrollbar-thumb:hover {
  background: #dc5a22;
  border-radius: 0.5em;
  border: solid;
  border-width: 0.08em;
  border-color: #0b143b10;
}

.content::-webkit-scrollbar-thumb:active {
  background: #dc5a22;
  border-radius: 0.5em;
  border: solid;
  border-width: 0.08em;
  border-color: #0b143b10;
}