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;
    li {margin: auto; margin-left: -38px;margin-block:10px;font-size: 20px; border: 1px solid black;}
}

#body {
    grid-area: body;
    height: 66.5rem;
    overflow-y: auto;
    background-color:white;
    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;display: flex; flex-direction: row; align-items: center;}
}

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


/* CONTENTS ---------------------------->*/
.hoard-box {
    margin: 16px;
    text-align: center;
    img {margin: 2px}
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#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}

#shrine {
    img {
        width: 190px;
        margin: 7px;
        border: 3px double black;
        border-radius: 10px;
        transition: all .2s ease-in-out
    }
    img:hover {transform: scale(1.1);}
}
/*grow when hover thing: https://travis.media/blog/how-to-make-an-item-grow-on-hover-with-css/*/