*{
  padding: 0;
  margin: 0;
  text-decoration: none;
  color: #cecdcd;
  font-family: 'Rubik', sans-serif;
  transition: 0.50s;
  font-weight: 300;
}
body{
  overflow: scroll;
  background: #000014;
}
header .logo{
  fill: dodgerblue;
  height: 27px;
  margin-left: 20px;
}
header{
  padding: 10px;
  width: 100%;
  position: fixed;
  top: 0;
  align-items: center;
  background: #010114;
  z-index: 9999999;
}
nav{
  padding: 10px;
  align-items: center;
  background: #010114;
  display: flex;
  justify-content: space-around;
  position: fixed;
  z-index: 9999999999999;
  margin-top: 50px;
  right: 0;
  align-items: center;
}
header div{
  display: flex;
  align-items: center;
}
.line{
  border: 1px #d3d2d2 solid;
  width: 15px;
}
input{
  width: 400px;
  border-radius: 100px;
  background: none;
  padding: 11px;
  border: none;
  background: #002;
}
.search{
  position: relative;
  margin-left: 120px;
}
::placeholder{
  color: #cecdcd;
}
.search svg{
  fill: #cecdcd;
  position: absolute;
  margin-left: 380px;
}
input:focus{
  outline: none;
}
.voice{
  background: dodgerblue;
  padding: 10px;
  border-radius: 100px;
  width: 17px;
  place-items: center;
  display: grid;
  height: 17px;
  margin-left: 30px;
}
.voice svg{
  fill: lightgray;
  height: 19px;
}
.icons svg{
  fill: lightgray;
  width: 25px;
  margin-left: 10px;
}
.container{
  display: flex;
  align-items: center;
  }
.icons{
  display: flex;
  align-items: center;
  right: 20px;
  position: absolute;
}
.icons img{
  width: 35px;
  border-radius: 100px;
  border: 1px dodgerblue solid;
  margin-left: 10px;
}
@media(max-width:850px){
  .search input{
    display: none;
  }
  .search svg{
    position: fixed;
    left: 270px;
    margin: 0;
  }
  .voice{
    margin-left: 0;
    background: none;
  }
  .voice svg{
    fill: dodgerblue;
  }
  .icons{
    margin-left: 10px;
  }
  .left{
    opacity: 0;
  }
}
.left{
  position: fixed;
  display: grid;
  width: 230px;
  z-index: 9999999999999999;
  height: 100vh;
  background: #010114;
  overflow: scroll;
  padding-left: 12px;
  margin-top: 50px;
  padding-top: 15px;
}
.left .container{
  overflow-y: scroll;
  position: relative;
  height: 100vh;
}
.icon{
  display: flex;
  align-items: center;
  padding: 8px;
  width: 170px;
}
.icon a{
  margin-left: 10px;
}
#hover{
  background: #002;
  border-radius: 10px;
}
.icon:hover{
  background: #002;
  border-radius: 10px;
  width: 170px;
}
.icon svg{
  fill: whitesmoke;
}
::-webkit-scrollbar {
  width: 1em;
}
::-webkit-scrollbar-track {
  background: #010114;
}
 .icon2{
  display: flex;
  align-items: center;
  width: 170px;
  padding: 10px;
 }
 .icon2 img{
  border-radius: 100px;
  width: 32px;
  height:32px;
  border: 1px #002 solid;
 }
 .icon2 a{
  margin-left: 10px;
  font-size: 12px;
 }
 .icon2:hover{
  background: #1e8fff73;
  border-radius: 10px;
  width: 170px;
 }
 .logo2{
  fill: dodgerblue;
  height: 30px; 
}
.video{
  border-radius: 10px;
  margin-top: 10px;
  width: 300px;
  text-align: right;
  padding: 15px;
  background: rgba(2, 2, 27, 0.596);
}
.video .img{
  border-radius: 10px;
  width: 300px;
}
.video .icon{
  display: flex;
  align-items: center;
  width: 250px;
  justify-content: center;
}
.icon img{
  width: 35px;
  height: 35px;
  border-radius: 200px;
}
.video h4{
  font-size: 15px;
  color: #cacaca;
}
.footer{
  margin-left: 50px;
}
.cont2{
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  right: 10px;
  position: absolute;
  margin-top: 100px;
}
@media (max-width:900px){
  nav{
    width: 98% !important;
  }
  .cont2{
    width: 100% !important;
 }
  .videoIcon{
    display: none;
}
 .hide{
  display: none;
 }
 .video{
  width: 90%;
 }
 .voice svg{
  display: none;
 }
 .video .img{
  width: 100%;
 }
}
nav #hover{
  padding: 7px;
  width: 70px;
  place-items: center;
  display: grid;
}
nav a{
  padding: 7px;
  place-items: center;
  display: grid;
  border-radius: 5px;
  background: #07021f9d;
}
footer{
  width: 100%;
  height: 100px;
  bottom: 0;
  display: grid;
  margin-top: 50px;
  place-items: center;
  left: 0;
  z-index: 9999999999999;
}
footer a{
  color: dodgerblue;
  text-decoration: underline;
}
