:root {
    --background: rgb(72, 72, 72);
    --orange: #ff4400;
    --blue: #00eeff;
    --darkwhite: rgb(240, 240, 240);
    --darkerwhite: rgb(160, 160, 160);
}

html, body{
    padding: 0;
    border: 0;
    margin: 0;
}

html, body{
    height: calc(100vh - calc(100vh - 100%))  
}

.site-wrapper{
    /* 
    The next four lines prevent scrollability on mobile.
    This is necessary since mobile browsers parse the <meta>-tag and thus ignore the fixed width and height.
    */
    position: fixed;
    height: 100vh;
    width: 100vw;
    overflow: hidden !important;
    
    display: grid;
    place-items: center;
    grid-template-rows: 90vh 10vh;

    font-family: Helvetica, sans-serif;
}

.content-wrapper{
    grid-column: 1 / 2;
    grid-row: 1 / 2;

    justify-self: center;
    align-self: center;

    display: grid;
    place-items: center;
    
    max-height: 100%;
    width: 100vw;
    /* overflow: hidden; */

    aspect-ratio: auto;
}

.content-wrapper img, .content-wrapper video{
    max-height: 85dvh;
    max-width: 95dvw;
    aspect-ratio: auto;
    box-shadow: 0 0 20px rgba(0,0,0,.75);
}

.memeButton-wrapper{
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, -50%);
}

.memeButton{
    padding: .8rem;
    color: white;
    border: 3px solid var(--orange);
    border-radius: 3px;
    background-color: rgba(20, 20, 20, .75);
}

.memeButton:hover{
    border: 3px solid var(--blue);
}

.memeButton-wrapper a{
    text-decoration: none;
}

.error{
    font-size: xx-large;
    color: var(--darkwhite);
}

#imprint{
    position:fixed;
    inset: auto auto 0.5rem 0.5rem;
    text-decoration: none;
}

#imprint > a{
    color: var(--darkerwhite);
}