html, body {
    background-color: pink;
    margin: 0;
}

.viewport {
    width: 100vw;
    height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    overflow: hidden;
}

#content {
    width: 500px;
    height: 700px;
    transform: scale(var(--scale, 1));
    transform-origin: center;
}

.title {
    justify-self: center;
    font-family: Times New Roman;
    font-weight: 600;
    font-size: 22pt;
    padding: 20px;
    text-align: center;
}

#links {
    display: grid;
    justify-content: center;
    padding: 20px;



    a {
        border: 4px solid var(--brand-color);
        border-radius: 20px;
        padding: 20px;
        margin: 15px;
        background-color: color-mix(in srgb, var(--brand-color), black 40%);
        display: flex;
        text-decoration: none;
        color: color-mix(in srgb, var(--brand-color), 90% white);
        align-items: center;
        filter: drop-shadow(0 0 10px var(--brand-color));
        transform: scale(1.1);
        -webkit-transition: all 500ms;
    }

    a:hover, a:active {
        filter: drop-shadow(0 0 5px var(--brand-color));
        transform: scale(1.2);
        -webkit-transition: all 500ms;
    }

    svg {
        padding-right: 5px;
    }
}