:root {
    --body-img: url('https://file.garden/aKnb5jNQGAe7XPwF/Backgrounds/rootBG_home.png');
    --container-color: rgb(248, 240, 255);
    --container-border: rgb(160, 106, 196);
    --color: rgb(86, 49, 150); 
    --headerimg: url('https://file.garden/aKnb5jNQGAe7XPwF/Backgrounds/3.png');
    --pagedoll: url('')
}

* {
    box-sizing: border-box;
    color: var(--color);
    margin: 0px;
    padding: 0px;
}

body {
    background-color: var(--color);
}

div#homepage {
    display: grid;
    grid-template:
      'left header header right'
      'left nav nav right'
      'left main main right'
      'left main main right'
      'left footer footer right';
    height: 100vh;
    width: 100vw;
}

div#homepage > * {
    padding: 15px;
}

header { grid-area: header; }
left { grid-area: left; }
right { grid-area: right; }
nav {grid-area: nav;}
main { grid-area: main; }
footer { grid-area: footer; }

header {
    background-color: aquamarine;
}

left, right {
    background-color: blanchedalmond;
    container-type: size;
    z-index: 1;
    justify-content: center;
    width: 17vw;
    overflow-x: hidden;
    overflow-y: auto;
  }
  

nav {
    background-color: aqua;
}

main {
    background-color: var(--container-color);
    color: var(--container-text);
    overflow-y: auto;
    overflow-x: hidden;
    height: 77vh;
    width: 66vw;
    /* DO NOT FUCK WITH THE HEIGHT IT RUINS EVERYTHING*/
}

footer {
    background-color: azure;
}

hr {
    border: 1.5px solid var(--container-border);
    width: 75%;
}

marquee {
    color: var(--color); 
    font-family: 'Times New Roman', Times, serif; 
    font-size: 24px;
    font-weight: bold;
    border: solid var(--container-border);
    border-width: 3px 0px;
    margin-top: 10px;
}

p, h2, h3, h4, h5, h6 {
    padding: 15px;
    overflow-wrap: break-word;
}

#pagedoll {
    width: 15px;
    height: 15px;
    background-color: greenyellow;
    position: sticky;
}