* {
  box-sizing: border-box;
}
/* 
The :root is where you can change the colors of everything to make it look the way you want!
If you edit the root, it'll change everything.
*/
:root {
    --color: #020a61; /* This is the text color, accept hex codes, rgba(0,0,0), etc. */
    --background: url("assets/bgs/bg.gif"); /* This is for a tiled background image. If you'd rather have an image fill the bg, let me know and I can help lol. */

    --link: #020a61;
    --linkhover: #ADBCED;
;

    --border: 2px solid blue; /* This is for the border around the different boxes. You can keep it as dashed, or make it solid or dotted. You can also make it thicker by adjusting the 1px*/

    --boxbg: white; /* This changes the background color of the info boxes. */

    --navbg: white; /* Changes color of navbox, just in case if you want it differet :3 */
    --navborder: 2px solid blue /* Border for the nav box, replace with "none" if you don't want one. */
}

body {
    background-image: var(--background);
    background-repeat: repeat;
    color: var(--color);
    font-family: "Coda", sans-serif;
}

h1, h2, h3 {
    text-decoration: underline;
    font-style: italic;
}

a:link {
    color: var(--link);
}

a:visited {
    color: var(--link);
}

a:active {
    color: var(--link);
}

a:hover {
    color: var(--linkhover);
}

.container {
    display: grid;
    grid-template:
    "header"
    "main";
    grid-gap: 10px;
}

.header {
    grid-area: header;
}

.navbox {
    background-color: var(--boxbg);
    width: 200px;
    text-align: center;
    border: var(--navborder);
}

.main {
    grid-area: main;
    align-items: center;
    margin-left: 400px;
    margin-right: 400px;
}

.article {
    border: var(--border);
    background-color: var(--boxbg);
    width: 100%;
    padding: 5px;
    margin: 10px;
}

.half {
    border: var(--border);
    background-color: var(--boxbg);
    width: 50%;
    padding: 5px;
    margin: 10px;
    height: 150px;
    max-height: 150px;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none; 
}

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

.character {
    height: 150px;
    padding: 5px;
}