body {

   height: 2600px;
   width: 1300px;
   background-color:  rgb(255, 159, 247);
   background-image:url('images/love16.jpg');
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: left;
   background-size: 100% 100%;
   margin-top: 0px;
   margin-bottom: 0px;
}


.top{
   height: 300px;
   width: 900px;
   background-color: transparent;
   z-index: 2;
   margin-top: 30px;
   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: transparent;
  
}

.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: rgb(255, 159, 247);
  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: 460px;
 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;

}

.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: black;
    margin-top: 55px;
    height: 1800px;
    width: 600px;
    margin-left: 10px;
   
}



.wer1{

   background-color: transparent; 
   align-content:center;
   text-align: start;
   padding-left: 10px;
   width: 100%;
   font-size: 19px;
   font-weight: 550;
   
   
}


.qer1 {

   background-color: transparent;
   color: rgb(34, 34, 34);
   text-align: left;
   width: 100%;
   height: 90%;
   font-size: 20px;
   padding-top: 6px;
  
}

.topics {

   background-color: white;
   height: 30px;
   width: 650px;
   margin-left: 10px;
   margin-top: 20px;
   margin-bottom: 0px;
}

.huge {

   margin-top: 20px;
   margin-left: 10px;
}

#ezovela2{

   background-color: transparent;
   height: 1895px;
   width: 700px;
   margin-top: 50px;
   
}

.inf {

   font-size: 20px;
   margin-left: 0px;
   color: blue;
   text-decoration: underline;
   
 }

 .inf:hover {

   opacity: 0.6;
 }

 .educ {

   background-color: transparent;
   font-size: 20px;
   color: black;
}

#sections {

   height: 60px;
   width: 400px;
   margin-left: 15px;
   background-color: transparent;
   display: grid;
   grid-template-columns: 1fr 1fr;
   column-gap: 1px;
   margin-top: 50px;
   margin-bottom: 20px;

} 

#sectionA {

   height: 100%;
   background-color:  rgb(201, 201, 201);
   text-align: center;
   border-bottom: 4px solid red;
   
}

#sectionA:hover, #sectionB:hover {

   opacity: 0.6;
}



#sectionB {

  height: 100%;
  background-color:  rgb(201, 201, 201);
  text-align: center;
  
  
}

.sectA{

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

.sectB{

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

.last {
    
   margin-bottom: 0px;
   height: 200px;
   width: 100%;
   margin-left: 0px;
   margin-right: 0px;
   background-color: lightslategray;
   color: white;
   margin-top: 45px;
}


.copi {

   text-align: center;
   align-content: center;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   font-weight: 500;
  
   font-size: 27px;
}

.foll {

    font-size: 20px;
    margin-left: 30px;
}


a {

   text-decoration: none;
}

.info {

   font-size: 30px;
   margin-left: 20px;
   color: blue;
   text-decoration: underline;
}

.info:hover {

   opacity: 0.6;
}

.blocks {

   height: 900px;
   row-gap: 2px;
   background-color:  transparent;
   width: 651px;
   display: grid;
   grid-template-rows: 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 500px; 
   margin-top: 0px;
   margin-left: 9px;
}

.nomi1 {

   background-color: white;
   height: 100px;
   width: 650px;
   display: grid;
   grid-template-columns: 25% 75%;
   margin-left: 0px;
   margin-bottom: 0px;
   

}

.nomi2 {

 background-color: white;
 height: 100px;
 width: 650px;
 display: grid;
 grid-template-columns: 25% 75%;
 margin-left: 0px;
 margin-top: 0px;
}

.nomi3 {

 
 background-color: white;
 height: 100px;
 width: 650px;
 display: grid;
 grid-template-columns: 25% 75%;
 margin-left: 0px;
 margin-top: 0px;
}

.nomi4 {


 background-color: white;
 height: 100px;
 width: 650px;
 display: grid;
 grid-template-columns: 25% 75%;
 margin-left: 0px;
 margin-top: 0px;
}

.nomi5 {


 background-color: white;
 height: 100px;
 width: 650px;
 display: grid;
 grid-template-columns: 25% 75%;
 margin-left: 0px;
 margin-top: 0px;
}

.nomi6 {


 background-color: white;
 height: 100px;
 width: 650px;
 display: grid;
 grid-template-columns: 25% 75%;
 margin-left: 0px;
 margin-top: 0px;
}

.nomi7 {


 background-color: white;
 height: 100px;
 width: 650px;
 display: grid;
 grid-template-columns: 25% 75%;
 margin-left: 0px;
 margin-top: 0px;
}

.nomi8 {


 background-color: white;
 height: 100px;
 width: 650px;
 display: grid;
 grid-template-columns: 25% 75%;
 margin-left: 0px;
 margin-top: 0px;
}

.nomi9 {

 
 background-color: white;
 height: 100px;
 width: 650px;
 display: grid;
 grid-template-columns: 25% 75%;
 display: grid;
 margin-top: 0px;
}

.nomi10 {

 
 background-color: white;
 height: 100px;
 width: 650px;
 display: grid;
 grid-template-columns: 25% 75%;
 margin-left: 0px;
 margin-top: 0px;
}

#top {

  font-size: 30px;
  color: rgb(246, 255, 167);
  display: block;
  margin-left: 150px;
}

#here {

  font-size: 25px;
  color:  rgb(246, 255, 167);
  display: block;
  margin-left: 5px;
}

#continent1 , #continent2 , #continent3, #continent4, #continent5 , #continent6 {

  font-size: 25px;
  color:  rgb(246, 255, 167);
  display: block;
  margin-left: 10px;
}

#cities1 , #cities2 , #cities3, #cities4, #cities5 , #cities6 {

  font-size: 20px;
  color:  rgb(246, 255, 167);
  display: block;
  margin-left: 10px;
}

#wowo {

  height: 300px;
  width: 500px;
  background-color: green;
  margin-top: 900px;
  

}



.copi {

  text-align: center;
  align-content: center;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight: 500;
 
  font-size: 27px;
}

.foll {

   font-size: 20px;
   margin-left: 30px;
}

.fmage {

  height: 150px;
  margin-top: 200px;
  width: 300px;
  background-color: blue;
  display: inline-block;
}

.gmage {

  height: 150px;
  margin-top: 0px;
  margin-left: 350px;
  width: 300px;
  background-color: blue;
  display: inline-block;

}


.Previous {

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

.also {

  height: 60px;
  width: 600px;
  background-color: lightslategray;
  margin-left: 10px;
  padding: 10px;
  margin-top: 50px;
  font-weight: 80%;
  font-size: 22px;
  margin-bottom: 0px;
  border: 1px solid black;
  align-content: center;
  text-decoration: none;
  color: black;
 
  
}

.also:hover {

   opacity: 0.6;
}

.als {

  height: 60px;
  width: 600px;
  background-color: lightslategray;
  margin-left: 10px;
  padding: 10px;
  margin-top: 5px;
  font-weight: 80%;
  font-size: 22px;
  margin-bottom: 200px;
  border: 1px solid black;
  align-content: center;
  text-decoration: none;
  color: black;
 
  
}

.als:hover {

   opacity: 0.6;
}

.see {

   font-size: 25px;
   margin-top: 50px;
   margin-left: 10px;
   font-weight: bold;
}

a {

  text-decoration: none;
}

.info {

  font-size: 30px;
  margin-left: 20px;
  color: blue;
  text-decoration: underline;
}

.info:hover {

  opacity: 0.6;
}


.image {

  height: 100%;
  width: 100%;
}

img {

  height: 100px;
  width: 100%;
}

#zukro {

   display: grid;
   grid-template-columns: 110px 110px;
   width: 220px;
   height: 30px;
   margin-top: 50px;
   margin-left: 20px;
   background-color:  rgb(255, 159, 247);

}

#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);

}

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

.topa {

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

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


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

}


.mziba , .mzeba , .mzaba {

   border: 1px solid black;
   padding-top: 2px;
}

.mziba , .mzeba {

   padding-left: 20px;
}



.pura {

   color: black;
   margin-left: 20px;
}

#zupa1, #zupa2 , #zupa3, #zupa4 {

    display: none;
}

#ezovela3{

   background-color: transparent;
   height: 1895px;
   width: 700px;
   margin-top: 50px;
   display: none;
   
}