@font-face{
    font-family: 'nise';
    src: url('../fonts/nise-sega-sonic/NiseSegaSonic.TTF');
 }

 body{
    font-family: nise, Courier, monospace;
 }


.cabecalho{
   display: flex;
   justify-content: space-between;
   padding: 30px;
   max-width: 2160px;
   margin: 0 auto;
}

.cabecalho .logo{
   width: 112px;
}

.cabecalho .menu{
   display: flex;
   align-items: center;
   height: 100%;
}

.cabecalho nav li a{
   font-weight: bold;
   color: white;
   font-size: 25px;
   padding: 10px 20px;
   border-radius: 50px;
   transition: 0.2s;
}

.cabecalho nav li a:hover{
   background-color: gold;
}

.container{
   max-width: 2160px;
   margin: 0 auto;
   display: flex;
   align-items: center;
   height: calc(100vh - 140px);
   padding: 0 30px 30px;
}

.container .imagem-titulo{
   max-width: 400px;
}

.sonic {
   max-width: 400px;
}

.container .descricao{
   color: white;
   width: 85%;
   font-size: 16px;
   margin: 30px 0;
}

.descricao{
   font-size: 20px;
   color: white;
   padding: 20px 20px 20px 0;
   text-align: center;
   display: flex;
}

.container .botao-trailer {
   background-color: blue;
   color: white;
   padding: 15px;
   font-size: 18px;
   cursor: pointer;
   border: none;
   text-transform: uppercase;
   transition: 0.5s all ease-in-out;
   font-family: nise, Courier, monospace;
}

.container .botao-trailer:hover{
   transform: scale(1.1);
}

.fundo-video{
   background-color: blue;
   position: absolute;
   z-index: -1;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
   display: flex;
   justify-content: center;
}

.fundo-video .video{
   height: 100vh;
}

.fundo-video::after{
   content: "";
   height: 100vh;
   width: 100vw;
   position: absolute;
   top: 0;
   left: 0;
   background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,1) 100%);
}

.modal{
   position: fixed;
   width: 100vw;
   height: 100vh;
   top: 0;
   left: 0;
   background-color: rgba(52,52,50,0.749);
   visibility: hidden;
   opacity: 0;
}

.conteudo-modal{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   height: 100vh;
   border: 10px;
   gap: 15px;
}

.fechar-modal{
   background-color: white;
   color: blue;
   font-weight: bold;
   font-size: 15px;
   width: 40px;
   text-align: center;
   cursor: pointer;
   border-radius: 10px;
}

.modal iframe{
   border-width: 0;
   width: 640px;
   height: 360px;
}

.modal.aberto{
   opacity: 1;
   visibility: visible;
}