:root {
        /* Cores principais */
        --primary-color: #e2bc00;
        --secondary-color: #000000;
        --light-gray: #D9D5CC;
        --dark-gray: #686868;
        --white: #FFFFFF;

        /* Cores com sombra e gradiente */
        --shadow-primary: rgba(0, 0, 0, 0.5);
        --shadow-secondary: var(--primary-color);
        --gradient-secondary-color-gray: linear-gradient(120deg, var(--secondary-color), var(--dark-gray));

        /* Spinner */
        --spinner-start: var(--secondary-color);
        --spinner-end: var(--primary-color);
}

/* General Styles */
body {
        margin: 0;
        font-family: sans-serif;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
}

/* Header Styles */
header {
        color: var(--white);
        background-image: url(../img/background.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
}

header span {
        color: var(--secondary-color);
        font-weight: bold;
        font-size: xx-large;
        background-color: var(--primary-color);
}

.boxTextHeader {
        margin: 20px;
        padding: 20px;
        border: 1px solid var(--secondary-color);
        box-shadow: 0 0 10px var(--secondary-color);
        border-radius: 10px;
        -webkit-backdrop-filter: blur(7px);
        backdrop-filter: blur(7px);
}

.bookBox {
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
}

.bookBox img {
        width: 50%;
        border-radius: 10px;
}

.abrirFormBtn {
        font-size: x-large;
        font-weight: bold;
        background-color: var(--primary-color);
        filter: drop-shadow(0 0 7px var(--primary-color));
        border: 0px;
        border-radius: 10px;
        height: 70px;
        width: 100%;
}

.abrirFormBtn:hover {
        cursor: pointer;
        transform: scale(1.1);
        color: var(--white);
        animation: buttonAnim 0.5s normal;
}

@keyframes buttonAnim {
        0% {
                transform: scale(1);
                color: var(--secondary-color);
        }

        100% {
                transform: scale(1.1);
                color: var(--white);
        }
}

/* Main Styles */
main {
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 80px;
        height: auto;
        width: 100%;
        flex-wrap: wrap;
        padding-bottom: 50px;
}

main ul {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        padding: 0;
        align-items: stretch;
}

main ul li {
        filter: drop-shadow(0 0 30px var(--secondary-color));
        border: 2px solid var(--secondary-color);
        font: 1em sans-serif;
        width: 100%;
        max-width: 500px;
        border-radius: 20px;
        background-color: var(--white);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 20px;
        margin: 20px;
        height: auto;
}

main ul li h2 {
        margin: 10px;
        color: var(--primary-color);
}

main ul li img {
        border-radius: 50%;
        max-width: 150px;
}

.textVantagens {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
}

.textBox {
        margin: 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        width: 70%;
        font-weight: bold;
}

.textBox h1 {
        font-weight: bolder;
        color: var(--primary-color);
        background-color: var(--secondary-color);
        border-radius: 10px;
        font-size: xx-large;
}

.sectionSobreEbook {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        gap: 20px;
}

.btnBox{
        width: 80%;
}

/* Footer Styles */
footer {
        height: auto;
        background-color: var(--secondary-color);
        color: var(--white);
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
}

.footerBox {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 30px;
}

.logo {
        width: 20%;
}

.contatosBox {
        width: 50%;
        text-align: left;
}

.redeSociaisBox {
        height: 100%;
        display: flex;
        justify-content: end;
        align-items: end;
        text-align: right;
}

.redeSociaisBox h3 {
        margin-bottom: 10px;
}

.iconesBox a {
        margin: 10px;
}

.iconesBox img {
        width: 40px;
}

.iconesBox img:hover {
        transform: scale(1.1);
}

/* Form Styles */
#errorMessage {
        display: none;
}

#cadastroBox {
        display: none;
        position: fixed;
        justify-content: center;
        align-items: center;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: var(--shadow-primary);
        -webkit-backdrop-filter: blur(7px);
        backdrop-filter: blur(7px);

}

#cadastroForm {
        position: relative;
        color: var(--white);
        max-width: 80%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        text-align: center;
        background-color: #362400;
        padding: 20px;
        padding-top: 10px;
        border-radius: 10px;
        box-shadow: 0 0 10px var(--shadow-primary);
        gap: 30px;
}

@keyframes slideDown {
        from {
                top: -600px;
                opacity: 0;
        }

        to {
                top: 0;
                opacity: 1;
        }
}

@keyframes slideUp {
        from {
                top: 0;
                opacity: 1;
        }

        to {
                top: -600px;
                opacity: 0;
        }
}

.inputBox {
        box-shadow: 0 0 15px var(--primary-color);
        border-radius: 10px;
        padding: 5px;
        display: flex;
        flex-direction: column;
        width: 90%;
        height: 100%;
        gap: 10px;
}

select {
        appearance: none;
        background-image: url(../img/icons/arrowDown.png);
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 30px;

}

.cadastroTextBox {
        width: 70%;
}

.cadastroTextBox h1 {
        padding-bottom: 20px;
}

.cadastroTextBox p {
        font-size: medium;
}

.inputLimpo::placeholder {
        color: #b9a57d;
}

.inputIncompleto::placeholder {
        color: rgb(255, 255, 255);
}

.inputLimpo {

        color: #b9a57d;
        width: 100%;
        height: 50px;
        padding: 10px;
        border-radius: 5px;
        border: 1px solid var(--primary-color);
        background-color: #573A00;
        color: var(--white);
}

.inputIncompleto {
        color: var(--white);
        width: 100%;
        height: 50px;
        padding: 10px;
        border-radius: 5px;
        border: 1px solid red;
        background-color: #340404;
        color: var(--white);
}

.placeholderRealidade {
        color: var(--primary-color);
}

.btnEnviarCadastro {
        width: 100%;
        height: 60px;
        border: 0px;
        border-radius: 10px;
        background-color: var(--primary-color);
        color: var(--secondary-color);
        font-weight: bold;
}

.btnEnviarCadastro:hover {
        cursor: pointer;
        color: var(--white);
        animation: buttonDegrade 0.2s normal;
}

@keyframes buttonDegrade {
        0% {

                color: var(--secondary-color);
        }

        100% {

                color: var(--white);
        }
}

#fecharFormBtn {
        height: 30px;
        border: 0px;
        background-color: transparent;
        color: var(--white);
}

.btnSairBox {
        width: 100%;
        display: flex;
        justify-content: end;
}

.buttonsBox {
        width: 100%;
        display: flex;
        gap: 20px;
}

/* Loading Popup Styles */
#loadingPopup {
        border-radius: 10px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: var(--white);
        border: 1px solid var(--secondary-color);
        padding: 20px;
        z-index: 1001;
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
}

#loadingPopup p {
        font-size: 16px;
        color: var(--secondary-color);
}

#loadingMessage {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
}

/* Error popUp */
.popup {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.7);
        justify-content: center;
        align-items: center;
        z-index: 1000;
}

.popupContent {
        background-color: white;
        padding: 20px;
        border-radius: 8px;
        text-align: center;
}

.popupContent h2 {
        margin: 0 0 10px 0;
}

.popupContent button {
        margin-top: 10px;
}

/* Spinner Styles */
.spinner {
        background-image: linear-gradient(var(--spinner-start) 35%, var(--spinner-end));
        width: 100px;
        height: 100px;
        animation: spinning82341 1.7s linear infinite;
        border-radius: 50%;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        position: relative;
        margin: 0 auto;
}

.spinner:before,
.spinner:after {
        content: "";
        background-image: linear-gradient(var(--spinner-start) 35%, var(--spinner-end));
        width: 100px;
        height: 100px;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 50%;
}

@keyframes spinning82341 {
        100% {
                transform: rotate(360deg);
        }
}

.spinner:before {
        width: 80px;
        height: 80px;
        top: 10px;
        left: 10px;
        background-color: var(--white);
}

.spinner:after {
        width: 60px;
        height: 60px;
        top: 20px;
        left: 20px;
        background-color: var(--white);
}