website/assets/scss/home.scss

// general
@import "variables";
@import "main";

// fonts
@import "fonts/playfair";

// partials
@import "partials/sidebar";
@import "partials/footer";
@import "partials/moreposts";
@import "partials/helpers/icons";


#introduction {
    background: var(--vriish-gradient);
    font-family: "playfair";
    font-size: 2rem;
    height: 100vh;
    color: var(--vriish-gradient-text);
    mask: var(--vriish-waves);
    -webkit-mask: var(--vriish-waves);
    padding: 5rem 1rem 8rem 1rem;

    @media (max-width: 1140px) {
        height: 90vh;
        font-size: 1.5rem;
    }

    h1 {
        letter-spacing: 0.5rem;
        font-size: 7rem;

        @media (max-width: 1140px) {
            font-size: 4rem;
        }
    }

    p {
        letter-spacing: 0.15rem;
    }

    #scroll-down {
        bottom: 2rem;
        color: var(--vriish-gradient-text);
        font-family: FreeSerif, serif;
        font-size: 4.8rem;
        position: absolute;
        text-decoration: none;

        @media (prefers-reduced-motion: no-preference) {
            animation: 1s ease-in infinite alternate scrollDown;
            transition: color 0.2s ease-in-out;
        }
        
        &:hover {
            color: var(--vriish-gradient-text-hover);
        }

        @keyframes scrollDown {
            from { transform: translateY(0); }
            to { transform: translateY(1rem); }
        }
    }
}

#general-description {
    font-family: "playfair";
    font-size: 2.15rem;
    letter-spacing: 0.1rem;
    line-height: 2rem;
    text-align: center;
    margin: 1.5rem;

    #websites-and-graphics {
        line-height: 2.6rem;
        font-size: 3rem;
        margin-top: 6rem;
    }

    #cozy-town {
        margin-bottom: 8rem;
    }
}