body {
    gap: 20vh;
}

.homepage__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.homepage__logo {
    width: 76px;
    height: 76px;
}

.homepage__title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 4em;
    text-align: center;
    color: var(--btn-primary-color);
    margin-top: 0.5em;
    margin-bottom: 0;
}

.homepage__subtitle {
    font-weight: lighter;
    text-align: center;
    margin-bottom: .25em;
    color: var(--btn-primary-color);
}

.homepage__extra-title {
    font-weight: lighter;
    text-align: center;
    font-size: 1.1em;
    margin-bottom: 3em;
    color: var(--btn-primary-color);
}

.homepage__links {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

@media screen and (min-width: 768px) {
    .homepage__links {
        flex-direction: row-reverse;
        /* gap: 1em; */
    }
}

.homepage__button {
    width: 6em;
    height: 2em;

    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    border-radius: 2em;
    border: 2px solid var(--btn-primary-color);
    font-weight: bold;
    
    font-size: 1em;
    background-color: var(--btn-secondary-color);
    margin-bottom: 1em;

    padding: 0.5em 2em;
}

.homepage__button:hover {
    background-color: var(--btn-secondary-color-hover);
}

.homepage__button:focus {
    background-color: var(--btn-color-focus);
}

.homepage__play-button {
    color: var(--btn-primary-color-font);
    background-color: var(--btn-primary-color);
}

.homepage__play-button:hover {
    background-color: var(--btn-primary-color-hover);
    border-color: var(--btn-primary-color-hover);
}

.homepage__play-button:focus {
    background-color: var(--btn-color-focus);
}

.homepage__author {
    margin-top: 2em;
}