.main-page{
    overflow: auto;
    padding: 0 2rem;
}

.main-page > .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1.5;

    padding: 2rem;
    margin: 0 auto 6rem auto;

    border-radius: 1rem;
    border: 2px solid var(--border-color);
    background-image:
            url("IMAGE_URL"),
            linear-gradient(
                90deg,
                #5a244a,
                #613635
            );

    box-shadow: inset 0 0 60px 4px black;
    text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px,
    #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px;

    color: hsl(from var(--main) h s calc(l * 12));
}

.main-page > .hero h1 {
    font-size: 3rem;
}

.main-page > .hero p {
    font-size: 1.25rem;
}