website/assets/scss/home.scss

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

// fonts
@import "fonts/playfair";

// shortcodes
@import "shortcodes/verticalposts";

// partials
@import "partials/sidebar";
@import "partials/footer";
@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);
    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 {
        font-size: 4.8rem;
        position: absolute;
        bottom: 2rem;
        animation: 1s ease-in infinite alternate scrollDown;
        font-family: serif;
        text-decoration: none;
        color: var(--vriish-gradient-text);
        transition: color 0.2s ease-in-out;

        &:hover {
            color: var(--vriish-gradient-text-hover);
        }

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

main > p {
    font-family: "playfair";
    font-size: 2.15rem;
    letter-spacing: 0.1rem;
    line-height: 2rem;
    text-align: center;
    margin: 1.5rem;
    &:first-of-type {
        line-height: 2.6rem;
        font-size: 3rem;
        margin-top: 6rem;
    }
    &:last-of-type {
        margin-bottom: 8rem;
    }
}

section {
    position: relative;
    h2 {
        .more{
            font-size: .75em;
            font-weight: normal;
            hyphens: none;
            &::after {
                content: "\27F6";
                margin-left: .25em;
                transition: margin .5s;
            }
            &:hover::after {
                margin-left: .5em !important;
            }
        }
        &:hover .more::after {
            margin-left: .35em;
        }
    }
}