body {background-image: url(/medias/bg.png);background-attachment: fixed;background-size: cover;}
.mainbox {
    width: 83%;
    max-width: 1300px;
    margin: auto;
    display: grid;
    gap: 1rem 8px;
    grid-template-columns: 14.9% 68% 16%;
    grid-template-areas: "header header header" "left body right" "footer footer footer";
    margin-block: 40px;
    border: 8px solid transparent;
    border-image: url(/medias/border1.png) 8 fill round;
    background-color: white;
    border-radius: 10px;
    padding: 5px
}

.box {
    border: 4px ridge gold;
    border-radius: 6px;
    padding: 2px;
    background-image: url(/medias/bg2.gif);
}

@keyframes scroll {
  from {
    background-position: 0% 0%;
  }
  to {
    background-position: 100% 100%;
  }
}

.content {
    margin: 5px;
    background-color: white;
    border: 2px ridge rgb(53, 51, 45);
    overflow-y: auto;
}
/* CONTAINERS ---------------------------->*/
#header {
    grid-area: header;
    height: 300px;
    background-image: url(/medias/mkvheader.gif);
}

#sidebar1 {
    grid-area: left;
    height: auto;
    animation: scroll 25s linear infinite;
}
#navbar {li {margin: auto; margin-left: -38px;margin-block:10px;font-size: 20px; border: 1px solid black;}}
#body {
    grid-area: body;
    height: auto;
    display: grid;
    grid-template-columns: repeat(10, 10%);
    gap: 10px;
    animation: scroll 36s linear infinite;
}

#sidebar2 {
    grid-area: right;
    height: auto;
    animation: scroll 25s linear infinite;
    li {margin: auto; margin-left: -38px;margin-block:10px;font-size: 20px; border: 1px solid black;}
}

#footer {
    grid-area: footer;
    height: 3rem;
}

/* CONTENTS ---------------------------->*/
#pfp {grid-column-start: 1;grid-column-end: 4;height: 300px; margin-bottom: 20px;background-image: url(https://i.postimg.cc/W3Y8Fzh3/174990207720372439.jpg)}

#intro {grid-column-start: 4;grid-column-end: 10;height: 300px; padding: 5px}

#facts {grid-column-start: 1;grid-column-end: 4;height: 300px; overflow-y: auto;overflow-x: none;}

#likes {grid-column-start: 4;grid-column-end: 7;height: 300px; overflow-y: auto;overflow-x: none;}

#dislikes {grid-column-start: 7;grid-column-end: 10;height: 300px; overflow-y: auto;overflow-x: none;}

#quiz {grid-column-start: 1;grid-column-end: 5;height: 350px; overflow-x: none;}

#confuse {grid-column-start: 5;grid-column-end: 10;height: 350px; overflow-y: auto;overflow-x: none;}

#questionaire {grid-column-start: 1;grid-column-end: 10;height: 350px; overflow-y: auto;overflow-x: none;}

#pic1, #pic2 {height: 200px;} #pic1{background-image: url(/medias//cropped/2.png);} #pic2{background-image: url(/medias//cropped/1.png);}

#ad1 {height: auto; overflow:hidden; text-align: center; img {border: 2px black solid; text-align: center;}}

#stats p {margin: 5px}