// 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; } &::after { content: "­☟"; font-size: 4.8rem; position: absolute; bottom: 2rem; animation: 1s ease-in infinite alternate scrollDown; font-family: serif; } @keyframes scrollDown { from { transform: translateY(0); } to { transform: translateY(1rem); } } } 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; } } }