* {
  box-sizing: border-box;
}

/*
My first F2U template! I want this to be super simple and super easily customizable.

Feel free to frankenstein, edit, delete my credit, idc. This is yours! Have fun!

All images used are screenshots/gifs from Evangelion or Evangelion merchandise.

COLORS USED
To easily change, use ctrl + f and then replace all with desired colors!

text (dark): #120b06
text (light: white
text outline: #3b2512
container bg: #261c13
border (container): #634328
border (buttons, article): #140d07
gradient (nav, header): to bottom, #634328,  #261c13

*/

body {
    background-image: url("/preview/compact/assets/Tokyo3.webp");
    background-size: 100% auto;
    font-family: 'Sour Gummy', sans-serif;
    color: #120b06;
    overflow-y: none;
    margin: 100px 400px 100px 400px;
}

.container {
    display: grid;
    grid-template:
    "header header"
    "sidebar main" / 1fr 3fr;
    grid-template-rows: auto 2fr;
    background-color: #261c13;
    border: 2px solid #634328;
    border-radius: 10px;
    height: 100%;
    padding: 0px
}

.header {
    grid-area: header;
    height: 100%;
    border-bottom: 2px solid #634328;
    border-radius: 10px 10px 0px 0px;
    background-image: linear-gradient(to bottom, #634328,  #261c13);
    padding-left: 10px;
}

.header h1 {  
    text-align: left;
    color: white;
    text-shadow: -1px -1px 0 #3b2512, 1px -1px 0 #3b2512, -1px 1px 0 #3b2512, 1px 1px 0 #3b2512;
}

.aside {
    grid-area: sidebar;
    border-right: 2px solid #634328;
    height: 100%;
    max-height: 100%;
    overflow-y: scroll;
    -ms-overflow-style: none; 
    scrollbar-width: none;
    color: white;
}

.aside::-webkit-scrollbar {
  display: none;
}

.aside img {
    margin: 0px 10px 0px 10px;
    width: 92%;
}


.aside button {
    font-family: 'Sour Gummy', sans-serif;
    border: 2px solid #140d07;
    margin: 0px 10px 0px 10px;
    width: 92%;
    padding-left: 5px;
    background-image: linear-gradient(to bottom, #634328,  #261c13);
    text-align: left;
    color: white;
}

.aside button:hover {
    background-image: linear-gradient(to bottom, #634328,  #634328);
}

.nav {
    margin: 10px 10px 0px 10px;
    border: 2px solid #140d07;
    border-radius: 0px 10px 0px 0px;
    width: 92%;
    padding-left: 5px;
    background-image: linear-gradient(to bottom, #634328,  #261c13);
}

.nav p {
    font-size: 20px;
    margin-top: -.5px;
    margin-bottom: -.5px;
    padding: 3px;
}

.box {
    margin: 10px;
    border-radius: 0px 10px 0px 10px;
    border: 2px solid #140d07;
    padding: 5px;
    background-color: #634328;
}

.main {
    grid-area: main;
    height: 100%;
    max-height: 100%;
    overflow-y: scroll;
    -ms-overflow-style: none; 
    scrollbar-width: none;
}

.main::-webkit-scrollbar {
  display: none;
}


.article {
    margin: 5px;
    width: 98%;
    height: auto;
    border: 2px solid #4a3b2e;
    background-color: #c9c1b9;
    padding: 5px;
}

.icon {
    border-radius: 5px;
    float: left; 
    margin: 25px 5px 5px 5px; 
    width: 200px;
}

.half {
    margin: 5px;
    width: 48%;
    border: 2px solid #4a3b2e;
    background-color: #c9c1b9;
    padding: 5px;
}

.pagedoll {
    position: fixed;
    bottom: 0px;
    right: 0px;
}