body{
    /* whole document */
    box-sizing: border-box;
    color: #dee9fd;
    font-family: UnifontExMono;
    image-rendering: pixelated; 

    /* backgrounds */
    background-color: rgb(0, 0, 0);
    background-image: url('wallpaper.jpg') ;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;

    .outer{
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        padding: 10px;
        border: 32px solid transparent;
        border-image: url('liquidgalaxyborder.png') 16 round;
        background-clip: padding-box;
        background-color: #2d234c;
        font-size: 30px;
        width: auto;
        height: auto;
        float: right;
    }

    .index-main{
        display: grid;
        grid-gap: 20px;
        grid-template:
            "floatimage warnings"
            / 1fr;
    }

    floatimage { grid-area: floatimage; }
    warnings { grid-area: warnings }

    .warning-text{
        width: 600px;
        padding-top: 30px;
    }

    .warning-text h2{
        margin: -15px;
    }

    .panda-censor{
        width: auto;
        height: auto;
        padding-top: 30px;
    }

    .panda-censor img{
        width: auto;
        height: auto;
        margin: auto
    }

    .floating{
        width: 500px;
        height: auto;
    }

    .floating img{
        width: 100%;
        height: 100%;
        object-fit: contain;
        image-rendering: smooth;
    }

    .enter-text{
        padding: 30px;
        font-size: 40px;
        text-align: center;
    }
    
    /* link controls */
    a:link{
        color: #dee9fd;
        text-decoration: none;
    }
    a:hover{
        text-decoration: underline;
    }
    a:visited{
        color: #dee9fd;
    }
}