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

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

.title{
   grid-column: 1/11;
   /* grid-row: 1/2; */
   text-align: center;
   font-family: 'noto_sansbold';
   color: #eea1d0;
   font-size: 1.7em;
   line-height: 2.6em;
   margin-bottom: 1.2em;
   padding-bottom: 0.8em;
   /* background-color: aqua; */
}

.menu{
   grid-column: 11/-1;
   /* 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: #eea1d0;
}

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

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

.content{
   grid-column: 1/7;
   font-family: 'noto_sansbold';
   color: #eea1d0;
   /* background-color: rgb(174, 174, 197); */
   border-style: solid;
   border-color: #eea1d0;
   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: #eea1d030;
   border-radius: 0em;
 }
 
 .content::-webkit-scrollbar-thumb {
   background: #1c1c1a;
   border-radius: 0.5em;
   border: solid;
   border-width: 0.08em;
   border-color: #eea1d030;
 }
 
 .content::-webkit-scrollbar-thumb:hover {
   background: #1c1c1a;
   border-radius: 0.5em;
   border: solid;
   border-width: 0.08em;
   border-color: #1c1c1a10;
 }
 
 .content::-webkit-scrollbar-thumb:active {
   background: #1c1c1a;
   border-radius: 0.5em;
   border: solid;
   border-width: 0.08em;
   border-color: #1c1c1a10;
 }



.access{
   grid-column: 7/11;
   overflow: hidden;
   /* grid-row: 1/2; */
   text-align: center;
   font-family: 'noto_sansbold';
   background-color: #eea1d0;
   color: #1c1c1a;
   letter-spacing: -0.2em;
   line-height: 300%;
   font-size: 2em;
   margin: 0.4em;
   padding-left: 2em;
   padding-right: 2em;
   padding-top: 1em;
}

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

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

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

.c11{
   grid-column: 3/4;
   animation: glitch 2s 0.8s 2;
}

.e1{
   grid-column: 4/5;
   animation: glitch 1.2s 1.9s 7;
}
.s1{
   grid-column: 5/6;
   animation: glitch 1.8s 1.7s 35;
}
.s11{
   grid-column: 6/7;
   animation: glitch 1.2s 1s 8;
}






.a2{
   grid-column: 1/2;
   animation: glitch 2s 1s 6;
}

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

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

.e2{
   grid-column: 4/5;
   animation: glitch 1s 1s 8;
}
.s2{
   grid-column: 5/6;
   animation: glitch 1.7s 2s 4;
}
.s21{
   grid-column: 6/7;
   animation: glitch 1.8s 1s 6;
}








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

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

.c31{
   grid-column: 3/4;
   animation: glitch 1.8s 1s 4;
}

.e3{
   grid-column: 4/5;
   animation: glitch 1.4s 1.3s 9;
}
.s3{
   grid-column: 5/6;
   animation: glitch 1.2s 1.9s 7;
}
.s31{
   grid-column: 6/7;
   animation: glitch 1.1s 1.3s 3;
}





.a4{
   grid-column: 1/2;
   animation: glitch 2s 1.2s 10;
}

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

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

.e4{
   grid-column: 4/5;
   animation: glitch 2s 1.4s 5;
}
.s4{
   grid-column: 5/6;
   animation: glitch 2.2s 1.4s 11;
}
.s41{
   grid-column: 6/7;
   animation: glitch 1.5s 1.7s 8;
}




.a5{
   grid-column: 1/2;
   animation: glitch 1.9s 1s 6;
}

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

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

.e5{
   grid-column: 4/5;
   animation: glitch 1.2s 1.5s 15;
}
.s5{
   grid-column: 5/6;
   animation: glitch 1.8s 1.9s 32;
}
.s51{
   grid-column: 6/7;
   animation: glitch 1.3s 1s 9;
}





.a6{
   grid-column: 1/2;
   animation: glitch 1.7s 2s 8;
}

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

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

.e6{
   grid-column: 4/5;
   animation: glitch 1.8s 1.3s 38;
}
.s6{
   grid-column: 5/6;
   animation: glitch 2s 2.4s 10;
}
.s61{
   grid-column: 6/7;
   animation: glitch 1.5s 1.8s 3;
}




.a7{
   grid-column: 1/2;
   animation: glitch 2.2s 1.6s 8;
   }
   
   .c7{ 
   grid-column: 2/3;
   animation: glitch 1.8s 1.9s 16;
   }
   
   .c71{
   grid-column: 3/4;
   animation: glitch 1.7s 1.2s 8;
   }
   
   .e7{
   grid-column: 4/5;
   animation: glitch 1.6s 1.3s 38;
   }
   .s7{
   grid-column: 5/6;
   animation: glitch 1s 2s 10;
   }
   .s71{
   grid-column: 6/7;
   animation: glitch 1.2s 1.3s 3;
   }


 
@keyframes glitch{
   2%,64%{
     transform: translate(2px,0) skew(0deg);
     opacity: 100%;
   }
   4%,60%{
     transform: translate(-8px,0) skew(0deg);
     opacity: 100%;
   }
   62%{
     transform: translate(0,0) skew(5deg); 
     opacity: 0%;
   }
 }


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

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

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

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