* {
    font-size: 20px;
}

main {
    display: flex;
    flex: 1;
    max-width: 40%;

    margin: 50px auto 50px auto;
    padding: 10px;

    justify-items: start;
    flex-direction: column;

    text-align: center;
}

main > * {
    margin: 5px auto 5px auto;
}

.link {
    display: flex;
    flex: 1;
    justify-content: flex-start;
    align-items: center;

    margin: 10px 15px 5px 15px;
    padding: 12px 16px 12px 16px;
    text-decoration: none;
}

.link > *
{
    flex-grow: 0;
    margin: auto 7px auto 0;
}

.spacer
{
    flex: 1;
}

.main_pfp {
    display: flex;
    flex: 1;

    max-width: 128px;
    max-height: 128px;
}

@media (orientation: portrait) {
    * {
        font-size: 2.5rem;
    }

    main {
        max-width: 90%;
    }

    .main_pfp {
        max-width: 60%;
        max-height: 256px;
    }

    .link {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    h1 {
        font-size: 4rem;
    }

    h2 {
        font-size: 3rem;
        font-weight: normal;
    }
}