* {box-sizing:border-box;}
      
      .base {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: var(--bheight);
        background: url('https://graphics-hoard.neocities.org/Images/Backgrounds/prpl-stars3.png') 200px repeat;
        display: flex;
        justify-content: center;
        align-content: center;
        color:rgba(34, 22, 47);
        
        --bheight: 100%;
        --hheight: 95%;
        --htop: calc((var(--bheight) - var(--hheight)) / 4);
      }
      
      .holder {
        width: 70%;
        height: var(--hheight);
        margin-top: var(--htop);
        display: flex;
        flex-wrap:wrap;
        
        --gap: 2%;
        --headerH: 20%;
      }
      
      header {
        width: 100%;
        height: var(--headerH);
        bottom: var(--gap);
        background: rgba(79, 56, 101);
        font-size: 50px;
        line-height: var(--headerH);
        display:flex;
        justify-content: center;
      }
      h1 {top:0;}
      
      .sidebar {
        float: left;
        width: var(--sideW);
      }
      
      .main {
        float: right;
        width: var(--mainW);
        margin-left: var(--gap);
      }
      
      .sidebar, .main {
        --sideW: 20%;
        --mainW: calc(100% - var(--sideW) - var(--gap));
        height: calc(100% - var(--headerH) - var(--gap));
        background: rgba(106, 75, 137);
        --col: rgba(33, 22, 47);
        border: 3px ridge var(--col);
      }
      
      .sidebar > button {
        width: 100%;
        height: 7%;
        background: rgba(186, 156, 238);
        border: none;
        border-bottom: 3px ridge var(--col);
      }
      
      .sidebar > button:hover {
        cursor:pointer;
        background: rgba(166, 136, 218);
      }
      #top{
        border-top: 3px ridge var(--col);
      }
      
      img {width: 100%;margin:0;}