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

html, body {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100vh;
   background-color: transparent;
   font-family: "Montserrat", sans-serif;
}

.anuncio {
   position: absolute;
   display: none;
   top: 6%;
   width: 150px;
   border-radius: 5px;
   height: 90px;
   background-color: #000;
}

.anuncio img {
   border-radius: 5px;
   width: 100%;
   height: 100%;
}

.banner-1 {
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
   top: 0;
   width: 100%;
   height: 300px;
   background-color: #317ff4;
}

.player-control {
   position: absolute;
   bottom: 0;
   z-index: 1;
   width: 70%;
   height: 40px;
   border-top-left-radius: 9px;
   border-top-right-radius: 9px;
   background-color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
}

.btn-play {
   position: absolute;
   cursor: pointer;
   width: 50px;
   height: 50px;
   background-color: #fff;
   border: none;
   bottom: 20px;
   border-radius: 100%;
   box-shadow: 0px 20px 30px -10px rgba(38, 57, 77, 1);
}

.btn-play img {
   opacity: .8;
   transition: .3s ease-in-out;
}

.btn-play img:hover {
   opacity: 1;
}

.main {
   background-color: #0040C1;
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
   width: 100%;
   overflow: hidden;
}

.logo {
   animation: FadeBottom 2.5s;
   top: 50px;
   z-index: 1;
   width: 300px;
   position: absolute;
   filter: brightness(0) invert(1);
}

#volume {
   position: relative;
   left: 26%;
   opacity: .7;
}

input[type="range"] {
   position: relative;
   width: 20%;
   height: 3px;
   left: 26%;
   outline: none;
}

.bg-video {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 55%;
   background-color: #fff;
}

video {
   opacity: .8;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.redes {
   position: absolute;
   z-index: 1;
   display: flex;
   align-items: center;
   left: 10px;
   top: 10px;
   border-radius: 15px;
   width: 60px;
   height: 40px;
   transition: .8s;
   background-color: #fff;
}

.redes .icons {
   cursor: pointer;
}

.redes:hover {
   width: 160px;
}

.redes:hover > .row {
   transform: rotate(180deg);
}

.redes:hover > .t {
   display: block;
   position: relative;
   left: 20%;
}

.row {
   position: absolute;
   right: 0;
   transition: .8s ease-in-out;
   opacity: .8;
   width: 30px;
}

.icon-main {
   position: relative;
   left: 15%;
}

.icon-main, .icons {
   opacity: .4;
   width: 20px;
}

.t {
   position: absolute;
   margin-left: 6px;
   transition: 1s;
   width: 20px;
   display: none;
}

.icons:hover {
   opacity: 1;
}

.interesting {
   position: relative;
   display: flex;
   flex-direction: row;
   padding: 10px;
   align-items: center;
   left: 10%;
   top: 40px;
   width: 30%;
   text-align: center;
   border-radius: 6px;
   border-top: 1px solid rgba(0, 0, 0, 0.15);
   height: auto;
   cursor: pointer;
   transition: .5s;
   box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
   background-color: #fff;
}

.interesting:hover {
   transform: scale(1.1);
}

.interesting p {
   width: auto;
   font-size: 14px;
   position: relative;
   left: 3px;
}

.border-inside {
   width: 30px;
   height: 30px;
   position: relative;
   transition: .3s;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   border-radius: 100%;
   background-color: #00aaff;
}

.roboto-medium {
   font-family: "Roboto", sans-serif;
   font-weight: 500;
   font-style: normal;
}

@media(max-width: 1024px) {
   .logo {
       width: 230px;
       top: 60px;
   }
}

@media(max-width: 450px) {
   .btn-play {
       position: relative;
   }
   #volume, input[type="range"] {
       left: 5%;
       top: -10px;
   }
   input[type="range"] {
       width: 45%;
   }
}

@keyframes FadeBottom {
   from {
       top: 50%;
       opacity: 0;
   }
 
}
@keyframes FadeBottom {
   from {
       top: 50%;
       opacity: 0;
   }
   to {
       top: 50px;
       opacity: 1;
   }
}

.flex {
   position: absolute;
   right: 70px;
   top: 0;
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: auto auto;
   gap: 10px;
   width: 100%;
   max-width: 600px;
   margin-top: 10px;
}

.flex .box {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 150px;
   border-radius: 5px;
   background-color: #333;
}

.flex .box:nth-child(3) {
   grid-column: 1 / span 2;
}

.box img {
   transition: .7s;
   height: 100%;
   filter: blur(1.5px);
   border-radius: 5px;
   width: 100%;
}

.box img:hover {
   transform: scale(1.1);
   filter: blur(0px);
}

.box img:hover ~ .hme {
   color: #000;
   font-weight: bold;
}

.box .hme {
   z-index: 1;
   position: absolute;
   color: #fff;
}

@media(max-width: 1120px) {
   .interesting {
       flex-direction: column;
   }
   .border-inside {
       bottom: 13px;
       padding-left: 18px;
       padding-right: 3px;
       width: 100%;
       border-radius: 0;
       border-top-left-radius: 5px;
       border-top-right-radius: 5px;
   }
}

.annoucement {
   position: relative;
   width: 100%;
   border-radius: 5px;
   height: 200px;
   background-color: #333;
}

@media(max-width: 960px) {
   .interesting {
       width: 90%;
       left: 0;
   }
   .bg-video {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
   }
   .flex {
      display: flex;
      top: 420px;
      padding-bottom: 55px;
      align-items: center;
      justify-content: center;
      right: 0;
      width: 90%;
      height: auto;
      position: relative;
      flex-direction: column;
   }
   .flex .box:nth-child(3) {
      display: none;
  }
   .box {
      margin-left: 0;
      width: 10%;
   }
   
   .annoucement {
      display: none;
   }

   .interesting {
      top: 300px;
   }
   .border-inside {
      width: 100%;
   }
   .anuncio {
      display: block;
      width: 80%;
      border-radius: 5px;
   }
}

footer {
   position: fixed;
   bottom: 0;
   display: flex;
   letter-spacing: 1px;
   align-items: center;
   justify-content: center;
   color: #fff;
   width: 100%;
   font-size: 9px;
   height: 20px;
   background-color: #00aaff;
}