html
{
    min-height: 100%;
}

body
{
    width: 100%;
    min-height: 100%;
    margin: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    background: hsl(142, 100%, 98%);
    padding: calc(1cm + 26px) 0px 100px 0px;
}

@media (orientation: landscape)
{
    .navigate-button-container
    {
        width: calc(max(70%, 500px) - 50px);
        max-width: 700px;
        border-radius: 0px 0px 15px 15px;
        background-color: hsla(0, 0%, 100%, 85%);
        box-shadow: 0px 2px 5px hsl(0, 0%, 75%);
        padding: 10px 50px;
        margin: 0px;
        position: fixed;
        top: 0px;
        left: calc(50% - min(max(35%, 250px), 375px) - 25px);
        display: flex;
        justify-content: space-between;
        align-items: center;
        backdrop-filter: blur(5px);
        z-index: 254;
    }
}

@media (orientation: portrait)
{
    .navigate-button-container
    {
        width: calc(100% - 70px);
        background-color: hsla(0, 0%, 100%, 85%);
        box-shadow: 0px 2px 5px hsl(0, 0%, 75%);
        padding: 10px 35px;
        margin: 0px;
        position: fixed;
        top: 0px;
        left: 0px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        backdrop-filter: blur(5px);
        z-index: 254;
    }
}

.main-title
{
    font-weight: bold;
    font-size: 0.65cm;
    color: hsl(0, 0%, 0%);
    margin: 0px;
}

.warning-banner
{
    width: 100%;
    background-color: hsl(0, 100%, 50%);
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 255;
}

.warning-banner-container
{
    display: flex;
    justify-content: center;
}

.warning-banner-text
{
    color: hsl(0, 0%, 100%);
    font-size: 0.45cm;
    font-weight: bold;
    margin: 10px 0px;
}

.icon-button
{
    width: 1cm;
    height: 1cm;
    margin: 3px 0px 3px 15px;
    border-radius: 50%;
    background-color: hsla(0, 0%, 100%, 85%);
    border: none;
    transition: 0.1s;
}

.icon-button:hover
{
    background-color: hsl(0, 0%, 95%);
}

.button-icon
{
    width: 100%;
    height: 100%;
}

.about-text
{
    font-weight: normal;
    font-size: 0.45cm;
    color: hsl(0, 0%, 0%);
    margin: 0px;
    text-decoration: none;
    white-space: pre-wrap;
    word-wrap: break-word;
}

hr
{
    border-bottom: solid 1px hsl(0, 0%, 50%);
    border-top: none;
    border-left: none;
    border-right: none;
}