@keyframes circle1{
  25%{
    transform: translate(20px,0px);
  }
  50%{
    transform: translate(20px,20px);
  }
  75%{
    transform: translate(0px,20px);
  }
  100%{
    transform: translate(0px,0px);
  }
}
@keyframes circle2{
  0%{
    transform: translate(20px,20px);
  }
  25%{
    transform: translate(0px,20px);
  }
  50%{
    transform: translate(0px,0px);
  }
  75%{
    transform: translate(20px,0px);
  }
  100%{
    transform: translate(20px,20px);
  }
}
.bar{
    width:90vw;
    display:flex;
    border:none;
  
}



*{
    margin: 0;
    padding: 0;
}

body{
    

    font-family:Roboto;
}

header{
    background-color:#5a2d81;
    display:block;
    position:fixed;
    width:100%;
    top:-88px;
    transition:top 0.5s;
    border:none;
    z-index:5;
}
#second-bar{
    border:1px solid #5a2d81;
}
#main{
    display:none;
    padding: 0px 15px;
    
    justify-content: center;
    align-items:center;
    height:100.1vh;
    
}
@media(max-height:700px){
    #main{
        align-items: flex-start;
    }
}
#head-text{
  display: flex;
  justify-content: center;
  color:white;
  font-size:30px;
  font-weight: bold;
  padding:20px;
  
}




#container{

    margin-right:auto;
    margin-left:auto;
}
#block1{
    position:relative;
    display:block;
    max-width:700px;
    align-content: center;
    margin-right:auto;
    margin-left:auto;
    
}
#preloader{
    min-width:100%;
    min-height:100%;
    display:none;
    justify-content:center;
    align-items:center;
    z-index:5;
    opacity:0.5;
    background:#8C8C8C;
  position: absolute;
  
  
}
#preloader-text{
    color:#5a2d81;
  font-size:20px;
  font-weight:bold;
  top:40%;
  position:absolute;
}

.circle{

  position:absolute;
  border:none;
  border-radius:100%;
  background:#40076B;
  padding:10px;
  animation: circle 3s infinite;
}
#first-circle{
  animation:circle1 2s infinite;
}
#second-circle{
  animation:circle2 2s infinite;
}
#block2{
  display:flex;
  font-family:Roboto;
  justify-content: space-between;
  font-size: 20px;
  color:white;
  margin-top:10px;
  margin-bottom: 10px;
    max-width:700px;
    margin-right:auto;
    margin-left:auto;
}

#escape{
    z-index:3;
    position:absolute;
    width:50px;
    height:50px;
    padding:5px;
}
#escape-btn{

    background:none;
    border:none;
    border-radius:100%;
    max-width:50px;
    transition:1s;
}
#escape-btn img{
    width:100%;
}
#escape:hover #escape-btn{
    cursor:pointer;

}

#img-block{
    position:relative;
    background-color: #190c1f;
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 700px;
  max-width: 100%;
    overflow:hidden;
    z-index:0;
}



.work{
    overflow:hidden;
  display:inline-flex;
    position: relative;
}
.work-image{

  max-height: 700px;
  max-width:100%;
}

.video{

    z-index:3;
  max-height: 700px;
  max-width:100%;
}

@keyframes point{
    50%{
        opacity:1;
        transform:scale(1.3);

        

    }
    100%{
        
        transform:scale(1);
        box-shadow:none;
    }
    
}


#mention{
    display:flex;
    justify-content:center;
    color:white;
    font-size:20px;
    font-weight:bold;
    opacity:0.3;
    animation:mention 1s infinite;
}
@keyframes mention{
    50%{
        opacity:1;
    }
}


.btn{
    
  opacity:0.5;
}





#left-info{
  display:flex;
  align-content: center;
  
}



#right-info{
  display:flex;
  justify-content: right;
  align-content: center;
  

}
#author-name:hover{
    color:#5baaeb;
    cursor:pointer;
}

.num-info{
  display:flex;
  align-items: center;
  text-align: center;
  vertical-align: center;
  margin-left: 10px;
}

#btn-like{
  background:none;
  border:none;
}

.info-img{
  height: 30px;
    width: 30px;
}
#block3{
    max-width:800px;
}

#description{
    max-width:120%;
    color:white;
    font-family:Roboto;
}

#three-points{
    position:absolute;
    right:10px;
    top:10px;
    z-index:3;
    width:35px;
    height:35px;
}
#three-points-button{
    display:flex;
    align-items:center;
    background:black;
    border:none;
    border-radius:100%;
    padding:5px;
    
    
    
}
#three-points-button>img{
    width:100%;
    height:100%;
}
.btns-menu>li{
    list-style:none;
    
}
.btns-menu>li>button{
    width:100%;
    padding: 10px;
     background:#301945;
    border:none;
    color:white;
    transition: 0.5s;
    font-size:15px;
    font-family:Roboto;
    z-index:1;
    width:150px;
}
#three-points-menu{
    position:absolute;
    right:0;
    display:none;
    
}