.site-header {
    user-select: none;

    position: fixed;

    width: 100%;
    height: 10lvh;

    background-color: rgb(34, 34, 34);

    display: flex;
    align-items: center;

    padding-left: 4.5lvh;

    color: white;
    z-index: 3;
    top: 0;
}

.site-header p {
    position: relative;

    text-align: center;
    font-family: 'Roboto';
    font-size: 29px;
    font-weight: bold;
}

.site-header img {
    position: relative;

    width: 8lvh; height: 8lvh;
}
.site-header a {
    text-decoration: none;
    color: inherit;
}

.site-header-expand-button {
    position: absolute;

    transform: rotate(90deg);
    right: 14.2vh;

    width: 6lvh; height: 6lvh;

    transition: transform 0.401s ease-in-out, right 0.330s ease-in-out;

    fill: #fff;
}
.site-header-expand svg {
    position: absolute;

    transform: translate(-50%, -50%);
    left: 50%; top: 50%;

    width: 5.5lvh;
    height: 5.5lvh;

    fill: #fff;
}

.site-header-expansion {
    position: absolute;

    right: 14lvh; top: 7.2lvh;

    background-color: #1d1d1d;

    width: 34lvh; height: 0vh;
    border-radius: 8.3px;
    transition: height 0.195s ease, outline 0.21s ease;
}
.site-header-expansion span {
    display: flex;
    align-items: center;
    justify-content: center;

    font-family: 'Roboto';
    font-size: 2.7lvh;
    font-weight: bold;

    padding: 1.88lvh;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.23s ease, visibility 0.23s ease;
}
.site-header-expansion data {
    user-select: all;

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

    font-family: 'Roboto';
    font-size: 2.2lvh;
    font-weight: lighter;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.23s ease, visibility 0.23s ease;

    margin-top: -7px;
}