body {

     height: 2170px;
     width: 1300px;
     background-color: white;
     margin-top: 0px;
}

.blocks {

      height: 2150px;
      row-gap: 1px;
      background-color: black;
      width: 651px;
      display: grid;
      grid-template-rows: 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px
      100px 100px 100px 100px 100px 100px 100px 100px 100px 100px;
      margin-top: 0px;
      margin-left: 9px;
}

.nomi1 {

      background-color: black;
      height: 100px;
      width: 650px;
      display: grid;
      grid-template-columns: 1fr 1fr 250px ;
      column-gap: 1px;
      margin-left: 0px;
      margin-top: 0px;
}

.nomi2 {

    background-color: black;
    height: 100px;
    width: 650px;
    display: grid;
    grid-template-columns: 1fr 1fr 250px ;
    column-gap: 1px;
    margin-left: 0px;
    margin-top: 0px;
}

.nomi3 {

    background-color: black;
    height: 100px;
    width: 650px;
    display: grid;
    grid-template-columns: 1fr 1fr 250px;
    column-gap: 1px;
    margin-left: 0px;
    margin-top: 0px;
}

.nomi4 {

    background-color: black;
    height: 100px;
    width: 650px;
    display: grid;
    grid-template-columns: 1fr 1fr 250px ;
    column-gap: 1px;
    margin-left: 0px;
    margin-top: 0px;
}

.nomi5 {

    background-color: black;
    height: 100px;
    width: 650px;
    display: grid;
    grid-template-columns: 1fr 1fr 250px ;
    column-gap: 1px;
    margin-left: 0px;
    margin-top: 0px;
}

.nomi6 {

    background-color: black;
    height: 100px;
    width: 650px;
    display: grid;
    grid-template-columns: 1fr 1fr 250px;
    column-gap: 1px;
    margin-left: 0px;
    margin-top: 0px;
}

.nomi7 {

    background-color: black;
    height: 100px;
    width: 650px;
    display: grid;
    grid-template-columns: 1fr 1fr 250px ;
    column-gap: 1px;
    margin-left: 0px;
    margin-top: 0px;
}

.nomi8 {

    background-color: black;
    height: 100px;
    width: 650px;
    display: grid;
    grid-template-columns: 1fr 1fr 250px ;
    column-gap: 1px;
    margin-left: 0px;
    margin-top: 0px;
}

.nomi9 {

    background-color: black;
    height: 100px;
    width: 650px;
    display: grid;
    grid-template-columns: 1fr 1fr 250px ;
    column-gap: 1px;
    margin-left: 0px;
    margin-top: 0px;
}

.nomi10 {

    background-color: black;
    height: 100px;
    width: 650px;
    display: grid;
    grid-template-columns: 1fr 1fr 250px ;
    column-gap: 1px;
    margin-left: 0px;
    margin-top: 0px;
}

.nomi11 {

    background-color: black;
    height: 100px;
    width: 650px;
    display: grid;
    grid-template-columns: 1fr 1fr 250px ;
    column-gap: 1px;
    margin-left: 0px;
    margin-top: 0px;
}

.nomi12 {

  background-color: black;
  height: 100px;
  width: 650px;
  display: grid;
  grid-template-columns: 1fr 1fr 250px ;
  column-gap: 1px;
  margin-left: 0px;
  margin-top: 0px;
}

.nomi13 {

  background-color: black;
  height: 100px;
  width: 650px;
  display: grid;
  grid-template-columns: 1fr 1fr 250px ;
  column-gap: 1px;
  margin-left: 0px;
  margin-top: 0px;
}

.nomi14 {

  background-color: black;
  height: 100px;
  width: 650px;
  display: grid;
  grid-template-columns: 1fr 1fr 250px;
  column-gap: 1px;
  margin-left: 0px;
  margin-top: 0px;
}

.nomi15 {

  background-color: black;
  height: 100px;
  width: 650px;
  display: grid;
  grid-template-columns: 1fr 1fr 250px ;
  column-gap: 1px;
  margin-left: 0px;
  margin-top: 0px;
}

.nomi16 {

  background-color: black;
  height: 100px;
  width: 650px;
  display: grid;
  grid-template-columns: 1fr 1fr 250px ;
  column-gap: 1px;
  margin-left: 0px;
  margin-top: 0px;
}

.nomi17 {

  background-color: black;
  height: 100px;
  width: 650px;
  display: grid;
  grid-template-columns: 1fr 1fr 250px ;
  column-gap: 1px;
  margin-left: 0px;
  margin-top: 0px;
}

.nomi18 {

  background-color: black;
  height: 100px;
  width: 650px;
  display: grid;
  grid-template-columns: 1fr 1fr 250px ;
  column-gap: 1px;
  margin-left: 0px;
  margin-top: 0px;
}

.nomi19 {

  background-color: black;
  height: 100px;
  width: 650px;
  display: grid;
  grid-template-columns: 1fr 1fr 250px ;
  column-gap: 1px;
  margin-left: 0px;
  margin-top: 0px;
}

.nomi20 {

  background-color: black;
  height: 100px;
  width: 650px;
  display: grid;
  grid-template-columns: 1fr 1fr 250px ;
  column-gap: 1px;
  margin-left: 0px;
  margin-top: 0px;
}

.Next {

     background-color: lightslategray;
     color: white;
     height: 50px;
     width: 200px;
     margin-left: 376px;
     margin-top: 45px;
}

.Previous {

    background-color: lightslategray;
    color: white;
    height: 50px;
    width: 200px;
    margin-left: 166px;
    margin-top: -67px;
}

.Previous1 {

    background-color: lightslategray;
    color: white;
    height: 50px;
    width: 200px;
    margin-left: 166px;
    margin-top: 47px;
}


.nene {

     width: 100%;
     height: 100%;
     background-color: lightslategray;
     color: white;

}

.nini {

    width: 200px;
    height: 50px;
    background-color: lightslategray;
    color: white;
    margin-top: 0px;

}

.Next :hover {

    opacity: 0.6;
}

.Previous :hover {

    opacity: 0.6;
}



.wer1, .wer2, .wer3, .wer4{

     background-color: white; 
     align-content:center;
     text-align: start;
     padding-left: 10px;
    
     
     
}

.wer1 {

     
      font-size: 18px;
      font-weight: 550;
     
}

.topics {

      background-color: white;
      height: 30px;
      width: 650px;
      display: grid;
      grid-template-columns: 1fr 1fr 250px ;
      column-gap: 1px;
      margin-left: 10px;
      margin-top: 20px;
      margin-bottom: 0px;
}

.qer1, .qer2, .qer3 , .qer4 {

       background-color: black;
       color: white;
       text-align: center;
      
}

.top{
      height: 300px;
      width: 100%;
      background-color: white;
      z-index: 2;
      margin-top: 0px;
      margin-left: 10px;
}

.red {

      margin-top: 70px;
      margin-left: 100px;
      width: 50px;
      height: 50px;
      background-color: red;
 }
 
 .red1 {
 
     margin-top: 0px;
     margin-left: 0px;
     width: 100px;
     height: 100px;
     border-radius: 50%;
     background-color: red;
     align-items: center;
 }
 
 .red2 {
 
     margin-top: -20px;
     display: grid;
     grid-template-rows: 4px 4px 4px 4px;
     row-gap: 2px;
     margin-left: 185px;
     position: relative;
     width: 585px;
     height: 40px;
     background-color: white;
     
 }
 
 .red3 {
 
     margin-top: 0px;
     margin-left: 0px;
     position: relative;
     height: 4px;
     background-color: red;
     width: 0px;
     animation-name: line;
     animation-duration: 10s;
     animation-iteration-count: 1;
     animation-delay: 3s;
     animation-fill-mode: forwards;
 }
 
 .red4 {
 
     margin-top: 0px;
     margin-left: 0px;
     position: relative;
     height: 4px;
     background-color: red;
     width: 0px;
     animation-name: zine;
     animation-duration: 10s;
     animation-iteration-count: 1;
     animation-delay: 5s;
     animation-fill-mode: forwards;
 }
 
 
 
 .red5 {
 
     margin-top: 0px;
     margin-left: 0px;
     position: relative;
     height: 4px;
     background-color: red;
     width: 0px;
     animation-name: xine;
     animation-duration: 10s;
     animation-iteration-count: 1;
     animation-delay: 7s;
     animation-fill-mode: forwards;
 }
 
 .red6 {
 
     margin-top: 0px;
     margin-left: 0px;
     position: relative;
     height: 4px;
     background-color: red;
     width: 0px;
     animation-name: cine;
     animation-duration: 8s;
     animation-iteration-count: 1;
     animation-delay: 9s;
     animation-fill-mode: forwards;
 }
 
 @keyframes line {
 
     0% { width: 0%;}
     100% {width: 100%;}
 }
 
 @keyframes zine {
 
     0% { width: 0%;}
     100% {width: 572px;}
 }
 
 @keyframes xine {
 
     0% { width: 0%;}
     100% {width: 557px;}
 }
 
 @keyframes cine {
 
     0% { width: 0%;}
     100% {width: 542px;}
 }
 
 
 .white {
 
     margin-top: 0px;
     margin-left: 0px;
     width: 90px;
     height: 90px;
     border-radius: 50%;
     background-color:  white;
     align-items: center;
 }
 
 .Letter {
 
      position: relative;
      font-size: 75px;
      font-style: italic;
      font-weight: bold;
      font-family: 'Courier New', Courier, monospace;
      margin-top: 50px;
      margin-left: 25px;
      color: red;
 }
 
 .Billywood {
 
       margin-left: 180px;
       margin-top: -50px;
       position: relative;
       margin-bottom: -5px;
       
 }

 .awards {
 
    margin-left: 530px;
    margin-top: 0px;
    position: relative;
    margin-bottom: -5px;
    animation-name: lala;
    animation-duration: 2s;
    animation-delay: 17s;
    animation-fill-mode: forwards;
    opacity: 0;
    
 }

 @keyframes lala {

     0% {width: 100%;opacity: 0;}
     50% {width: 100%;opacity: 50%;}
     100% {width: 100%;color: black;opacity: 75%;}
 }

 
 .letter3 , .letter4 , .letter5 , .letter6 , .letter1 , .letter2 , .letter7 , .letter8 {
 
     position: relative;
     font-size: 75px;
     font-style: italic;
     font-weight: bold;
     font-family: 'Courier New', Courier, monospace;
     margin-top: 50px;
     margin-left: 25px;
     color: red;
 }

 .letter33 , .letter44 , .letter55 , .letter66 , .letter11 , .letter22 , .letter77 , .letter88 {
 
    position: relative;
    font-size: 55px;
    font-style: italic;
    font-weight: bold;
    font-family: 'Times New Roman', Times, serif;
    margin-top: 30px;
    margin-left: 0px;
    
    color: red;
}

.supper {

    font-size: 50px;
    font-weight: bold;
    font-style: italic;
    color: black;
    font-family: 'Times New Roman', Times, serif;
    margin-top: 70px;
}
 
 .letter1{
     animation-name: qat;
     animation-delay: 3s;
     animation-duration: 2s;
     animation-fill-mode: forwards;
     opacity: 0;
 }
 
 @keyframes qat{
 
      0%{
         opacity: 0%;
      }
      100%{ opacity: 100%;}
 }
 
 .letter2{
     animation-name: wat;
     animation-delay: 4s;
     animation-duration: 2s;
     animation-fill-mode: forwards;
     opacity: 0;
 }
 
 @keyframes wat{
 
      0%{
         opacity: 0%;
      }
      100%{ opacity: 100%;}
 }
 
 .letter3{
     animation-name: rat;
     animation-delay: 5s;
     animation-duration: 2s;
     animation-fill-mode: forwards;
     opacity: 0;
 }
 
 @keyframes rat{
 
      0%{
         opacity: 0%;
      }
      100%{ opacity: 100%;}
 }
 
 .letter4{
     animation-name: tat;
     animation-delay: 6s;
     animation-duration: 2s;
     animation-fill-mode: forwards;
     opacity: 0;
 }
 
 @keyframes tat{
 
      0%{
         opacity: 0%;
      }
      100%{ opacity: 100%;}
 }
 
 .letter5{
     animation-name: yat;
     animation-delay: 7s;
     animation-duration: 2s;
     animation-fill-mode: forwards;
     opacity: 0;
 }
 
 @keyframes yat{
 
      0%{
         opacity: 0%;
      }
      100%{ opacity: 100%;}
 }
 
 .letter6{
     animation-name: pat;
     animation-delay: 8s;
     animation-duration: 2s;
     animation-fill-mode: forwards;
     opacity: 0;
 }
 
 @keyframes pat{
 
      0%{
         opacity: 0%;
      }
      100%{ opacity: 100%;}
 }
 
 .letter7{
     animation-name: sat;
     animation-delay: 9s;
     animation-duration: 2s;
     animation-fill-mode: forwards;
     opacity: 0;
 }
 
 @keyframes sat{
 
      0%{
         opacity: 0%;
      }
      100%{ opacity: 100%;}
 }
 
 .letter8{
     animation-name: dat;
     animation-delay: 10s;
     animation-duration: 2s;
     animation-fill-mode: forwards;
     opacity: 0;
 }
 
 @keyframes dat{
 
      0%{
         opacity: 0%;
      }
      100%{ opacity: 100%;}
 }
 
 .first {
 
      height: 150px;
      width: 790px;
      margin-top: 20px;
      margin-left: 10px;
 
 }