:root {
    --clr-violet: hsl(257, 40%, 49%);
    --clr-soft-Magenta: hsl(300, 69%, 71%);
    --clr-white: hsl(0, 0%, 100%);

    --ff-primary: "Open Sans", sans-serif;
    --ff-secondary: "Poppins", sans-serif;

    --fw-regular: 400;
    --fw-semibold: 600;
}

body {
    background-color: var(--clr-violet);
    font-family: var(--ff-primary);
    font-size: 1rem;
    font-weight: var(--fw-regular);
    color: var(--clr-white);
    height: 100vh;
}

/* Text styles */

.hero__content {
    text-align: center;
}

.hero__content__title {
    font-family: var(--ff-secondary);
    font-size: 1.5rem;
    font-weight: var(--fw-semibold);
}

.register-btn {
    font-family: var(--ff-secondary);
    font-size: .8rem;
    font-weight: var(--fw-regular);
    color: var(--clr-violet);
}

/* Layout styles */

.container {
    max-width: 1440px;
    padding: 0 2.4rem;
}

.header {
    padding: 2rem 0;
}

.hero {
    padding: 2rem 0;
}

.hero .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 3.75rem;
}

.hero__content *:not(.register-btn) {
    margin-bottom: 1.5rem;
}

.register-btn {
    padding: 0.625rem 4.6875rem;
    border: none;
    border-radius: 1.25rem;
}

.footer {
    padding: 2rem;
}

.footer .container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer__social-links {
    padding: 0;
    display: flex;
    align-items: center;
    column-gap: 1rem;
}

.footer__social-links li {
    width: 2.125rem;
    height: 2.125rem;
    border: 1px solid var(--clr-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* General styles */

.bg-container {
    background-image: url(../images/bg-mobile.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.register-btn {
    background-color: var(--clr-white);
    box-shadow: rgba(0, 0, 0, 0.35) 0rem 0.3125rem 0.9375rem;
    cursor: pointer;
    transition: all 0.4s ease;
}

.header__logo {
    max-width: 7.75rem;
}

.footer__social-links {
    list-style: none;
}

.footer__social-links li {
    cursor: pointer;
    transition: all 0.4s ease;
}

.register-btn:hover {
    background-color: var(--clr-soft-Magenta);
    color: var(--clr-white);
}

.footer__social-links li:hover {
    border-color: var(--clr-soft-Magenta);
    color: var(--clr-soft-Magenta);
}

@media (min-width: 1020px) {

    /* Text styles */

    .hero__content {
        text-align: left;
    }

    .hero__content__title {
        font-size: 2.5rem;
    }

    .register-btn {
        font-size: 1rem;
    }

    /* Layout styles */

    .container {
        padding: 0 6rem;
        margin: 0 auto;
    }

    .hero {
        padding: 2rem 0 0;
    }

    .hero .container {
        flex-direction: row;
        column-gap: 4.0625rem;
    }

    .hero__content {
        max-width: 28.75rem;
    }

    .register-btn {
        padding: 0.875rem 3.6rem;
        border-radius: 2.5rem;
    }

    .footer .container {
        justify-content: flex-end;
    }

    .footer {
        padding: 1.5rem 0;
    }

    /* General styles */

    .bg-container {
        background-image: url(../images/bg-desktop.svg);
    }

    .header__logo {
        max-width: 13.125rem;
    }

}