body {

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


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



.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: 30px;
    font-weight: bold;
    font-style: italic;
    color: rgb(65, 65, 65);
    font-family: 'Times New Roman', Times, serif;
    margin-top: 80px;
    margin-left: 10px;

}

.date {

    font-size: 30px;
    color: gray;
}

.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;

}

#jud {

   background-color: white;
   height: 2000px;
   width: 700px;
   margin-top: 50px;
   display: none; 
    
}

#juda {

   background-color: white;
   height: 2000px;
   width: 700px;
   margin-top: 50px;
   display: block;
   
}

#juda1 {

   background-color: white;
   height: 3500px;
   width: 700px;
   margin-top: 50px;
   display: block;
   
}

#jude {

   background-color: white;
   height: 2000px;
   width: 700px;
   margin-top: 50px;
   display: none;
   
}

#jud10 {

   background-color: white;
   height: 2000px;
   width: 700px;
   margin-top: 50px;
   display: none;
    
}

#kuda {

   background-color: white;
   height: 2000px;
   width: 700px;
   margin-top: 50px;
   display: none;
   
}

#kude {

   background-color: white;
   height: 2000px;
   width: 700px;
   margin-top: 50px;
   display: none;
    
}

#kude1 {

   background-color: white;
   height: 3500px;
   width: 700px;
   margin-top: 50px;
   display: none;
    
}

#kud10 {

   background-color: white;
   height: 2000px;
   width: 700px;
   margin-top: 50px;
   display: none;
   
}

#luda {

   background-color: white;
   height: 2000px;
   width: 700px;
   margin-top: 50px;
   display: none;
   
}

#lude {

   background-color: white;
   height: 2000px;
   width: 700px;
   margin-top: 50px;
   display: none;
    
}

#lud10 {

   background-color: white;
   height: 2000px;
   width: 700px;
   margin-top: 50px;
   display: none;
}

#muda {

   background-color: white;
   height: 2000px;
   width: 700px;
   margin-top: 50px;
   display: none;
   
}

#mude {

   background-color: white;
   height: 2000px;
   width: 700px;
   margin-top: 50px;
   display: none;
    
}

#mud10 {

   background-color: white;
   height: 2000px;
   width: 700px;
   margin-top: 50px;
   display: none;
   
}


#zukro {

    display: grid;
    grid-template-columns: 100px 100px 100px 100px;
    width: 500px;
    height: 30px;
    margin-top: 50px;
    margin-left: 20px;
    background-color: white;

 }

 #zala1 {

    border-bottom: 4px solid red;
    color: red;
    font-size: 18px;
    text-align: center;
   
 }

 #zala2, #zala3, #zala4 {

    font-size: 18px;
    text-align: center;
    border-bottom: 4px solid  rgb(201, 201, 201);

 }

#soccerop {
   
    display: grid;
    grid-template-columns: 100px 100px 100px;
    column-gap: 10px;
    width: 500px;
    height: 30px;
    margin-top: 50px;
    margin-left: 20px;
    background-color: white;

}

#rugbyop {
   
    display: none;
    grid-template-columns: 100px 100px 100px;
    column-gap: 10px;
    width: 500px;
    height: 30px;
    margin-top: 50px;
    margin-left: 20px;
    background-color: white;
}

#cricketop {
   
    display: none;
    grid-template-columns: 100px 100px 100px;
    column-gap: 10px;
    width: 500px;
    height: 30px;
    margin-top: 50px;
    margin-left: 20px;
    background-color: white;
}

#tennisop {
   
    display: none;
    grid-template-columns: 100px 100px;
    column-gap: 10px;
    width: 500px;
    height: 30px;
    margin-top: 50px;
    margin-left: 20px;
    background-color: white;
}

#peqa1 {

   color: white;
   background-color: red;
   font-size: 16px;
   text-align: center;
   padding-top: 5px;
   border-radius: 20px;

}

 #peqa2, #peqa3, #peqa4 {

   font-size: 16px;
   text-align: center;
   color: white;
   background-color:  rgb(153, 153, 153);
   padding-top: 5px;
   border-radius: 20px;

}

#peqe1 {

    color: white;
    background-color: red;
    font-size: 16px;
    text-align: center;
    padding-top: 5px;
    border-radius: 20px;

}

#peqe22, #peqe2, #peqe3, #peqe4 {

    font-size: 16px;
    text-align: center;
    color: white;
    background-color:  rgb(153, 153, 153);
    padding-top: 5px;
    border-radius: 20px;

 }

 #peqe2 {

   display: none;
 }


 #peqi1 {

    color: white;
    background-color: red;
    font-size: 16px;
    text-align: center;
    padding-top: 5px;
    border-radius: 20px;

}

#peqi2, #peqi3, #peqi4 {

    font-size: 16px;
    text-align: center;
    color: white;
    background-color:  rgb(153, 153, 153);
    padding-top: 5px;
    border-radius: 20px;

 }


 #peqo1 {

    color: white;
    background-color: red;
    font-size: 16px;
    text-align: center;
    padding-top: 5px;
    border-radius: 20px;

}

#peqo2, #peqo3, #peqo4 {

    font-size: 16px;
    text-align: center;
    color: white;
    background-color:  rgb(153, 153, 153);
    padding-top: 5px;
    border-radius: 20px;

 }

 .zurka {

    color: black;
 }

 .zurka:hover {

    opacity: 0.6;
    text-decoration: underline;
 }
 

 .zutha {

    margin-left: 20px;
    margin-top: 60px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: black;
    font-size: 18px;
 }
 
 .topa3 {
 
    display: grid;
    grid-template-rows: 30px 660px;
    width: 400px;
    height: 690px;
    background-color: white;
    margin-left: 20px;

 }

 .topa4 {
 
   display: grid;
   grid-template-rows: 30px 240px;
   width: 400px;
   height: 270px;
   background-color: white;
   margin-left: 20px;

}

.topa5 {
 
   display: grid;
   grid-template-rows: 30px 90px;
   width: 400px;
   height: 120px;
   background-color: white;
   margin-left: 20px;

}

.topa6 {
 
   display: grid;
   grid-template-rows: 30px 480px;
   width: 400px;
   height: 510px;
   background-color: white;
   margin-left: 20px;

}

.topa7 {
 
   display: grid;
   grid-template-rows: 30px 1440px;
   width: 400px;
   height: 1470px;
   background-color: white;
   margin-left: 20px;

}

.top10 {
 
   display: grid;
   grid-template-rows: 30px 300px;
   width: 400px;
   height: 330px;
   background-color: white;
   margin-left: 20px;

}

.top5 {
 
   display: grid;
   grid-template-rows: 30px 150px;
   width: 400px;
   height: 180px;
   background-color: white;
   margin-left: 20px;

}

.top55 {
 
   display: grid;
   grid-template-rows: 30px 30px 30px 30px;
   width: 100%;
   height: 100%;
   background-color: white;

}

.top555 {

   display: grid;
   grid-template-rows: 30px 30px 30px 30px 30px;
   width: 100%;
   height: 100%;
   background-color: white;

}

.top25 {
 
   display: grid;
   grid-template-rows: 30px 750px;
   width: 600px;
   height: 780px;
   background-color: white;
   margin-left: 20px;

}

.top255 {
 
   display: grid;
   grid-template-rows: 30px 30px 30px 30px 30px  30px 30px 30px 30px 30px 
   30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;
   width: 100%;
   height: 100%;
   background-color: white;

}

.top2555 {

   display: grid;
   grid-template-rows: 30px 30px 30px 30px 30px  30px 30px 30px 30px 30px 
   30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;
   width: 100%;
   height: 100%;
   background-color: white;

}

.top36 {
 
   display: grid;
   grid-template-rows: 30px 1080px;
   width: 400px;
   height: 1110px;
   background-color: white;
   margin-left: 20px;

}

.top366 {
 
   display: grid;
   grid-template-rows: 30px 30px 30px 30px 30px  30px 30px 30px 30px 30px  
   30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 
   30px 30px 30px 30px 30px  30px 30px 30px 30px 30px 30px ;
   width: 100%;
   height: 100%;
   background-color: white;

}

.top3666 {

   display: grid;
   grid-template-rows: 30px 30px 30px 30px 30px  30px 30px 30px 30px 30px 
   30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 
   30px 30px 30px 30px 30px  30px 30px 30px 30px 30px 30px ;
   width: 100%;
   height: 100%;
   background-color: white;

}

.top25555 {

   display: grid;
   grid-template-rows: 30px 30px 30px 30px 30px  30px 30px 30px 30px 30px 
   30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;
   width: 100%;
   height: 100%;
   background-color: white;

}


.top20 {
 
   display: grid;
   grid-template-rows: 30px 600px;
   width: 400px;
   height: 630px;
   background-color: white;
   margin-left: 20px;

}

.top200 {
 
   display: grid;
   grid-template-rows: 30px 30px 30px 30px 30px  30px 30px 30px 30px 30px 
   30px 30px 30px 30px 30px 30px 30px 30px 30px 30px ;
   width: 100%;
   height: 100%;
   background-color: white;

}

.top2000 {

   display: grid;
   grid-template-rows: 30px 30px 30px 30px 30px  30px 30px 30px 30px 30px 
   30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;
   width: 100%;
   height: 100%;
   background-color: white;

}


.top18 {
 
   display: grid;
   grid-template-rows: 30px 540px;
   width: 400px;
   height: 570px;
   background-color: white;
   margin-left: 20px;

}

.top188 {
 
   display: grid;
   grid-template-rows: 30px 30px 30px 30px 30px  30px 30px 30px 30px 30px 
   30px 30px 30px 30px 30px 30px 30px 30px;
   width: 100%;
   height: 100%;
   background-color: white;

}

.top1888 {

   display: grid;
   grid-template-rows: 30px 30px 30px 30px 30px  30px 30px 30px 30px 30px 
   30px 30px 30px 30px 30px 30px 30px 30px;
   width: 100%;
   height: 100%;
   background-color: white;

}



 
 .topica1 {
 
    display: grid;
    grid-template-columns: 50% 50%;
    width: 100%;
    height: 100%;
    background-color: rgb(30, 255, 0);
 }
 
 .topica2 {
 
    display: grid;
    grid-template-columns: 50% 50%;
    width: 100%;
    height: 100%;
    background-color: white;
 }


 .topa1 {
 
   display: grid;
   grid-template-rows: 30px 660px;
   width: 600px;
   height: 690px;
   background-color: white;
   margin-left: 20px;
}

.topa2 {
 
   display: grid;
   grid-template-rows: 30px 270px;
   width: 600px;
   height: 300px;
   background-color: white;
   margin-left: 20px;
}

.top9 {
 
   display: grid;
   grid-template-rows: 30px 270px;
   width: 400px;
   height: 300px;
   background-color: white;
   margin-left: 20px;
}


.topica11 {

   display: grid;
   grid-template-columns: 50% 50%;
   width: 100%;
   height: 100%;
   background-color: rgb(30, 255, 0);
}

.topica22 {

   display: grid;
   grid-template-columns: 50% 50%;
   width: 100%;
   height: 100%;
   background-color: white;
}



 
 
 .cou1 {
 
    display: grid;
    grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;
    width: 100%;
    height: 100%;
    background-color: white;
 
 }
 
 .cou2 {
 
    display: grid;
    grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;
    width: 100%;
    height: 100%;
    background-color: white;
 
 }

 .cou111 {
 
   display: grid;
   grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px;
   width: 100%;
   height: 100%;
   background-color: white;

}

.cou222 {

   display: grid;
   grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px;
   width: 100%;
   height: 100%;
   background-color: white;

}

.cou1111 {
 
   display: grid;
   grid-template-rows: 30px 30px 30px;
   width: 100%;
   height: 100%;
   background-color: white;

}

.cou2222 {

   display: grid;
   grid-template-rows: 30px 30px 30px;
   width: 100%;
   height: 100%;
   background-color: white;

}



.cou333 {

   display: grid;
   grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px;
   width: 100%;
   height: 100%;
   background-color: white;

}

 .cou11 {
 
   display: grid;
   grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 
   30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;
   width: 100%;
   height: 100%;
   background-color: white;

}

.cou22 {

   display: grid;
   grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 
   30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;
   width: 100%;
   height: 100%;
   background-color: white;

}


.cou111111 {

   display: grid;
   grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 
   30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 
   30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 
   30px 30px 30px 30px 30px 30px 30px 30px 30px 30px ;
   width: 100%;
   height: 100%;
   background-color: white;

}


.cou222222 {

   display: grid;
   grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 
   30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 
   30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 
   30px 30px 30px 30px 30px 30px 30px 30px 30px 30px ;
   width: 100%;
   height: 100%;
   background-color: white;

}

.cou333333 {

   display: grid;
   grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 
   30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 
   30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 
   30px 30px 30px 30px 30px 30px 30px 30px 30px 30px ;
   width: 100%;
   height: 100%;
   background-color: white;

}



.cou11111 {
 
   display: grid;
   grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 
   30px 30px 30px 30px 30px 30px;
   width: 100%;
   height: 100%;
   background-color: white;

}

.cou22222 {

   display: grid;
   grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 
   30px 30px 30px 30px 30px 30px;
   width: 100%;
   height: 100%;
   background-color: white;

}

.cou33 {

   display: grid;
   grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 
   30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;
   width: 100%;
   height: 100%;
   background-color: white;

}



.topica111 {

   display: grid;
   grid-template-columns: 200px 200px 200px;
   width: 100%;
   height: 100%;
   background-color: rgb(30, 255, 0);
}

.topica222 {

   display: grid;
   grid-template-columns: 200px 200px 200px;
   width: 100%;
   height: 100%;
   background-color: white;
}
 
 
 
 
 
 .mziba , .mzeba , .mzaba {
 
    border: 1px solid black;
    padding-top: 2px;
 }
 
 .mzaba, .mziba , .mzeba {
 
    padding-left: 20px;
 }
 
 
 
 .pura {
 
    color: grey;
    margin-left: 20px;
 }
 
 #zupa1, #zupa2 , #zupa3, #zupa4 {
 
     display: display;
    
 }