html{
    background-color: #febbdd;
    background-image: url(https://files.catbox.moe/en0ofl.png);

    animation: scroll 25s infinite linear;
    font: 15px "DotGothic16";
    text-align: center;    

    margin: 0;
    padding-top: 15px; 
}

#main_body {
    margin: auto;  
    height: 850px;
    width: 1300px;
    background-image: url(https://files.catbox.moe/etafbg.png);


    /*background image position*/
    background-position: 0,-100px;


    /*allow the panel and main body to be side by side*/
    display: flex;

}


#left_panel {
    display: flex;
    flex-direction: column;
    height: 850px;
    width: 235px;
    background-image: url(https://files.catbox.moe/vt1pue.png);



}

#left_panel_header {
    display: flex;
    width: 26px;
    height: 26px;
    margin-top: 8px;
    margin-left: 200px;
    background-image: url(https://files.catbox.moe/s1on8f.png);
}

#left_panel_body {

    height: 790px;
    width: 216px;
    margin-top: 5px;
    margin-left: 6px;

}


#right_main_body {
    display: flex;
    height: 850px;
    width: 1065px;
    background-image: url(https://files.catbox.moe/8s77ii.png);

}

.container {
    display: flex;
    margin-left: 943px;
    margin-top: 1px;
    width: 100%;
}

.container div {
    margin: 10px;
}


/* utsune-san popup window */
.popup {
    position: fixed;          
    opacity: 1;
    pointer-events: none;
    background-size: contain;
    background-image: url(https://files.catbox.moe/p28vj6.png);

    height: 164px;
    width: 120px;

    animation: flyInAnimation 4s ease forwards;
    z-index: 999999;
}

/* actual popup image itself */
.popup-image {
    margin-left: 8px;
    margin-top: 41px;
    width: 100px;
    height: 100px;

    display: block;
    image-rendering: pixelated; 
}

/* popup animation intro */
@keyframes flyInAnimation {
    0% {
        opacity: 1;
        transform: translateY(100000px);  /* starts far below screen */ 
                                     /* increase the position to make it faster */
    }

    100% {
        opacity: 1;
        transform: translateY(0);      /* final on-screen position */
    }
}

/* background scroll */
@keyframes scroll {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -854px -480px;
    }
}

/* font for the text */
@font-face {
    font-family: "DotGothic16";
    src: url("fonts/DotGothic16-Regular.ttf");
}