body {
    background-image: url(../imagens/Background.png);
    background-repeat: no-repeat;
    background-position: center center; /*Centraliza a imagem horizontal e verticalmente*/
    background-size: cover;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /*Impede barras de rolagem*/
}

/*Logo da série*/
.container-logo {
    display: flex;
    justify-content: center; /*Centraliza horizontalmente*/
    align-items: center; /*Centraliza verticalmente*/
    margin-top: 50px;
    margin-bottom: -8px;
}

.logo {
    animation: digitalcircus 2s ease; /*Executa a animação durante 2 segundos*/
    height: 37vh;
    width: 60vh;
}

@keyframes digitalcircus {
    from {
        height: 10vh;
        width: 20vh;
    }

    to {
        height: 37vh;
        width: 60vh;
    }
}

/*Logo wiki*/
.container-wiki {
    display: flex;
    justify-content: center; /*Centraliza horizontalmente*/
    align-items: center; /*Centraliza verticalmente*/
    margin-bottom: 32px;
}

.wiki {
    animation: wikiLogo 3s ease; /*Executa a animação durante 3 segundos*/
    height: 8vh;
    width: 30vh;
}

@keyframes wikiLogo {
    from {
        height: 1vh;
        width: 5vh;
    }

    to {
        height: 8vh;
        width: 30vh;
    }
}

/*---------------------------------------------------------botões-----------------------------------------------------------------*/
.botaoQuit, .botaoPlay, .botaoOptions {
    cursor: pointer;
}

.container-quit.bloquearClique, .container-play.bloquearClique, .container-options.bloquearClique {
    pointer-events: none; /*Desativa cliques e interações*/
    cursor: default; /*Remove o cursor de clique*/
}

/*Botão play*/
.container-play {
    display: flex;
    justify-content: center; /*Centraliza horizontalmente*/
    align-items: center; /*Centraliza verticalmente*/
    height: 11vh;
}

.botaoPlay {
    animation: play 2000ms ease; /*Executa a animação durante 2 segundos*/
    height: 11vh;
    width: 16vh;
}

@keyframes play {
    from {
        height: 1vh;
        width: 4vh;
    }

    to {
        height: 11vh;
        width: 16vh;
    }
}

/*Botão options*/
.container-options {
    display: flex;
    justify-content: center; /*Centraliza horizontalmente*/
    align-items: center; /*Centraliza verticalmente*/
    height: 16vh;
}

.botaoOptions {
    animation: options 3000ms ease; /*Executa a animação durante 3 segundos*/
    height: 13vh;
    width: 18vh;
}

@keyframes options {
    from {
        height: 1vh;
        width: 4vh;
    }

    to {
        height: 13vh;
        width: 18vh;
    }
}

/*Botão Quit*/
.container-quit {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 13vh;
}

.botaoQuit {
    animation: quit 4000ms ease; /*Executa a animação durante 4 segundos*/
    height: 12vh;
    width: 17vh;
}

@keyframes quit {
    from {
        height: 1vh;
        width: 4vh;
    }

    to {
        height: 12vh;
        width: 17vh;
    }
}

/*--- Responsividade ---*/
.botaoPlay, .botaoOptions, .botaoQuit {
    transition: transform 0.2s ease, filter 0.2s ease; /*Suaviza zoom e brilho*/
}

.liberado:hover .botaoPlay,.liberado:hover .botaoOptions,.liberado:hover .botaoQuit{
    transform: scale(1.08); /*Aumenta o tamanho em 8% ao passar o mouse*/
    filter: brightness(1.2); /*Aumenta o brilho em 20%*/
}

.liberado {
    cursor: pointer;
}

@media (max-width: 768px) { /*Regras aplicadas em telas de até 768px*/

    html, body {
        overflow-y: auto; /*Permite rolagem vertical no celular*/
        height: auto; /*Ajusta a altura automaticamente*/
    }

    /* Remove as animações que quebram o tamanho das imagens no mobile */
    .logo, .wiki, .botaoPlay, .botaoOptions, .botaoQuit {
        animation: none; /*Desativa animações*/
        height: auto; /*Ajusta a altura automaticamente*/
    }
}