@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
   
    
}

body {
    height: 1500px;
    display: flex;
    min-height: 100vh;
    background: #080808;
}

main {
    padding: 20px;
    position: fixed;
    z-index: 1;
    padding-left: calc(82px + 20px);
    color: #e3e9f7;
    
}

#sidebar {

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #080808;
    height: 100vh;
    border: 1px solid #f7f7f7;
    border-radius: 0px 18px 18px 0px;
    position: relative;
    transition: all .5s;
    min-width: 82px;
    z-index: 2;
}

#sidebar_content {
    padding: 12px;
}

#user {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}

#user_avatar {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 20px;
}

#user_infos {
    
    display: flex;
    flex-direction: column;
}

#user_infos span:last-child {
    color: #e5d6d6;
    font-size: 22px;
}

#side_items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
}

.side-item {
    border-radius: 8px;
    padding: 14px;
    cursor: pointer;
}

.side-item.active {
    background-color: #4f46e5;
}

.side-item:hover:not(.active),
#logout_btn:hover {
    background-color: #e3e9f7;
}

.side-item a {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f80ebb6;
}

.side-item.active a {
    color: #eff2f8;
}

.side-item a i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

#logout {
    border-top: 1px solid #e3e9f7;
    padding: 12px;
}



#open_btn {
    position: absolute;
    top: 30px;
    right: -10px;
    background-color: #4f46e5;
    color: #e3e9f7;
    border-radius: 100%;
    width: 20px;
    height: 20px;
    border: none;
    cursor: pointer;
}

#open_btn_icon {
    transition: transform .3s ease;
}

.open-sidebar #open_btn_icon {
    transform: rotate(180deg);
}

.item-description {
    width: 0px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    transition: width .6s;
    height: 0px;
}

#sidebar.open-sidebar {
    min-width: 15%;
}

#sidebar.open-sidebar .item-description {
    width: 150px;
    height: auto;
}

#sidebar.open-sidebar .side-item a {
    justify-content: flex-start;
    gap: 14px;
}

.featured-video video {
    position: relative;
    margin-left: -3%;
    width: 1500px; /* Define a largura desejada */
    height: 400px; /* Mantém a proporção do vídeo */
    border-radius: 0px;
    object-fit: cover; /* Remove as bordas ajustando o vídeo ao contêiner */
    z-index: -2; /* Envia o vídeo para o plano de fundo */
    filter: brightness(0.4); /* Deixa o vídeo mais escuro */

}
.featured-video scr {
    border-left: none;
    border-top: none;
    border-color: rgba(255, 255, 255, 0.2); /* Cor mais clara para contraste */
}



.movie-list {
    position: absolute;
    right: 10%;
    top: 65%;
    margin-bottom: 5px;
    gap: 10px;
    align-items: center;  
    padding: 0;
    border: none;
    background: none; /* Remove estilos padrões de botão */
    grid-template-columns: repeat(6, 1fr);
    display: grid;
    
    
}


.movie-title img {
    top: 30px;
    row-gap: 2vh; /* Ajuste o espaçamento entre as imagens */
    height: 250px;
    width: 180px;
    display: block;
    
}


@media (max-width: 1150px) {
    

    .movie-list {
        top: 28%;
        margin-left: 150%;
        gap: 10px;
        grid-template-columns: repeat(5, 1fr); /* 1 column for very small devices */
        
    }

    .movie-title img {
        height: 200px;
        width: 140px;
    }

    .featured-video video {
        left: 30px;
        width: 2000px;
        height: auto;
    }
}


@media (max-width: 1280px) {
    #sidebar {
        width: 20px;
        height: 100%;
        position: fixed;
       
    }
    #sidebar.open-sidebar {
        min-width: 50%;
        
    }

    #sidebar.open-sidebar .item-description {
        width: 100%;
    }
    .movie-list {
        top: 28%;
        margin-left: 145%;
        gap: 10px;
        grid-template-columns: repeat(5, 1fr); /* 1 column for very small devices */
        
    }

    .movie-title img {
        height: 200px;
        width: 140px;
    }

    .featured-video video {
        left: 30px;
        width: 2000px;
        height: 500px;
    }




/* Small screens (mobile, between 480px and 768px) */


@media (max-width: 700px) {

    .movie-list {
        right:345%;
    }

    
}

@media (max-width: 800px) {
    #sidebar {
        width: 20px;
        position: fixed;
    }
    #sidebar.open-sidebar {
        min-width: 50%;
    }

    #sidebar.open-sidebar .item-description {
        width: 100%;
    }

    .movie-list {
        position: relative;
        justify-content: space-between;
        gap: 10px; /* Menor espaçamento para telas menores */
    }
    .movie-title img {
        width: 100%; /* Ajusta o tamanho das imagens */
        height: auto;
    }

    .featured-video video {
        right: 70px;
        height: 300px;
        width: 400px;
    }

    main {
        padding-left: calc(60px + 20px);
    }
}
}

@media (max-width: 480px) {
    .movie-list {
        top: 15%;
        margin-left: 273%;
        grid-template-columns: repeat(3, 1fr); /* 1 column for very small devices */
        
    }

    .movie-title img {
        height: 140px;
        width: 90px;
    }
}