body {
    background-color: #0B0F14;
    overflow-x: hidden;
}

main {
    min-height: 40em;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
    list-style: none;
}

p,
a,
span {
    font-family: "general sans", sans-serif;
    color: white;
}

a,
span {
    text-decoration: none;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5em 12.5em;
}

.btn-header {
    border: 0.0625em solid #5643DD;
    border-radius: 2em;
    padding: 0.5em 0.75em;
    display: flex;
    gap: 0.25em;
    font-size: 1em;
    white-space: nowrap;
    background-color: rgba(11, 15, 20, 0.8);
    backdrop-filter: blur(0.75em);
    transition: ease 0.3s;
}

.btn-header:hover {
    transform: scale(1.1);
}

.btn-header:active {
    transform: scale(0.9);
}

.content-ns {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1em;
    padding: 5em 12.5em;
    max-width: 27.5em;
}

.content-ns p {
    font-size: 1.125em;
    line-height: calc(1.5 * 1em);
}

.bg-ns {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    z-index: -1;
}

.content-ns form {
    border: 0.0625em solid white;
    padding: 0.5em;
    border-radius: 2.5em;
    background-color: rgba(11, 15, 20, 0.8);
    backdrop-filter: blur(0.75em);
    transition: 0.1s ease;
}

.content-ns form input {
    background-color: none;
    border: none;
    font-family: "general sans", sans-serif;
    font-size: 1em;
    color: white;
    width: 18.75em;
}

input[type="email"] {
    background: transparent;
    border: 0.0625em solid white;
    color: white;
    padding: 0.5em 1em;
    border-radius: 6.25em;
    outline: none;
}

input::placeholder {
    color: white;
    opacity: 1;
}

input:focus,
input:hover {
    border-color: white;
    box-shadow: none;
}

button[type="submit"] {
    font-size: 1em;
    background-color: #5643DD;
    font-family: "general sans", sans-serif;
    color: white;
    border: none;
    border-radius: 6.25em;
    cursor: pointer;
    width: 5.375em;
    height: 2.5em;
    transition: ease 0.3s;
}

button[type="submit"]:hover {
    transform: scale(1.05);
}

button[type="submit"]:active {
    transform: scale(0.9);
}

.text-privacy {
    font-weight: 400;
    font-size: 0.875em;
    letter-spacing: 0.03em;
    line-height: calc(1.6 * 1em);
}

.content-ns form:focus-within {
    border-color: #5643DD;
    box-shadow: 0 0 0 0.25em #8E7FF8;
}

/* 1200px */
@media (max-width: 75em) {

    header,
    .content-ns {
        padding: 4em 6em;
    }


}

/* até 900px */
@media (max-width: 56.25em) {
    header {
        gap: 2em;
        padding: 3em 4em;
    }

    .logotipo {
        width: 160px;
    } 

    .btn-header {
        padding: 0.5em 0.5em;
    }

    .btn-header span {
        display: none;
    }

    .content-ns {
        align-items: center;
        padding: 3em 4em;
    }

    .content-ns form {
        display: flex;
        align-items: center;
        gap: 1em;
        border-radius: 2em;
        width: 100%;
        max-width: 25em;
    }   

}

/* 600px */
@media (max-width: 37.5em) {

    header,
    .content-ns {
        padding: 2em;
    }

    .btn-header {
        font-size: 0.875em;
        padding: 0.4em 0.4em;
    }

    .content-ns p {
        font-size: 1em;
    }

    input[type="email"],
    button[type="submit"] {
        font-size: 0.875em;
        padding: 0.5em;
    }

    .text-privacy {
        font-size: 0.75em;
    }

        .bg-ns-frame {
        width: 100%;
    }

    .bg-ns {
        overflow: hidden;
        right: 0px;
    }
}


/* Motion */
.top-down-intro {
    animation-name: moveBox;
    animation-duration: 0.8s;
    animation-fill-mode: both;
}

@keyframes moveBox {
    0% {
        transform: translateY(-500px) rotate(-40deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }

    animate__fadeIn {
        animation-name: fadeIn;
    }
}

.down-top-intro {
    animation-name: moveBox1;
    animation-duration: 0.8s;
    animation-fill-mode: both;
}

@keyframes moveBox1 {
    0% {
        opacity: 0;
        transform: translateY(500px) rotate(-40deg);
    }

    100% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }

    animate__fadeIn {
        animation-name: fadeIn;
    }
}

.down-top-section {
    animation-name: moveBoxSection;
    animation-duration: 1.5s;
    animation-fill-mode: both;
}

@keyframes moveBoxSection {
    0% {
        transform: translateY(600px);
    }

    100% {
        transform: translateY(0);
    }
}

.section-wrapper {
    overflow: hidden;
}