@keyframes slideInFromTop {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInFromBottom {
  0% {
    transform: translateY(120%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes Opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


@font-face {
  font-family: 'Archivo-Narrow-Bold-Italic';
  src: url('fonts/Archivo-Narrow-Bold-Italic.woff2') format('woff2'),
       url('fonts/Archivo-Narrow-Bold-Italic.woff') format('woff'),
       url('fonts/Archivo-Narrow-Bold-Italic.eot'),
       url('fonts/Archivo-Narrow-Bold-Italic.svg#Archivo-Narrow-Bold-Italic') format('svg');
  font-weight: normal;
  font-style: normal;
}


* {
             margin: 0;
            padding: 0;
  box-sizing: border-box;
         
         }

body {
 color: #00f;
 font-style: italic;
 text-transform: uppercase;
 font-family: 'Archivo-Narrow-Bold-Italic', Arial, sans-serif;
 background:url(pics/bg/bggif.gif);
 }

a:link {
  text-decoration: none;
  
}

.header {
  width: 100%;
  min-height:10vh;
  display: flex;
  justify-content: space-between;
  position: fixed;
  z-index: 2;
  background: #090f09;
  padding: 0px 20px;
  animation: 1s ease-out 0s 1 slideInFromTop; 
        }


.call {
           
  display: flex;
  min-width: 10%;
  height: 4em;
  align-content: center;
  justify-content: center;
  padding-top: 9px;
  
 
        }

.call:hover {
  padding-left: 5px;
}

.back:hover {
  padding-left: 5px;
}

.main-description:hover {
  padding-left: 5px;
}


.back {
 
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  min-width: 10%;
  height: 4em;
  cursor: grab;
  
    -webkit-transition:max-height 0.2s linear;
    -moz-transition:max-height 0.2s linear;
    transition:max-height 0.2s linear;
  
  
    
      }



.main {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  transform: translateY(100px);
 
}

.main-gif {
  width: 420px;
  height: 420px;
  background-image: url(site_gif/word.gif) ;
  background-size:cover;
  align-self: center;
}




.main-description {
  
  margin: 0 auto;
  padding-top: 50px;
  height: 280px;
  animation: 3s ease-out 0s 1 Opacity;

}

p { text-indent: 30%;
padding-top:15px; } 



h1 {
  
  font-size: 4em;
  font-weight: bold;
  text-align: center;
}  

h2 {
  
  font-size: 2em;
  text-align: center;
  
}

h3 {
  font-size: 1.2em;
  font-weight: bold;
  text-align: left;
}

p:hover {
  padding-left: 5px;
}  
   


        
 main a:link {
  text-decoration: underline;
  color:  #0b02b0!important;
            }


.body a:visited {
  color: #696969;
}



.back-link {
  font-size: 4em;
  text-align: center;
  font-weight: bold;
  animation: 3s ease-out 0s 1 Opacity;
}


.videotable ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.videotable li {
  flex: 1 1 calc(33.33% - 20px); /* 33.33% для 3 элементов в ряд, вычитание отступа */
  margin: 10px;
  box-sizing: border-box;
}

.videotable li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: black;
}

.videotable img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 5px;
}

.videotable p {
  margin: 10px 0 0;
  text-align: center;
  font-size: 16px;
}






.footer{
  
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-content: center;
  height: 40em;
  padding-top: 15%;

}
.red a{
  color: red;
}

.blue a{
  color: blue;
}




       
 
@media (max-width: 1024px) {
   .videocell {
      width: 100%;
     flex-direction: column;
   }
}


@media (max-width: 800px) {
  .footer {
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  h1 {
    font-size: 3em;
  }

  h2 {
    font-size: 1.5em;
  }

  .main-gif {
    width: 300px;
    height: 300px;
  }
}