* {box-sizing: border-box;
        --aa: rgb(186, 186, 98);/*soft green-med*/   /*base text*/
        --bb: rgb(206, 206, 118);/*soft green-light*/   /*a text, box text, button text*/
        --bbb: rgb(236, 236, 148);/*lighter, more yellowy*/   /*a hover, button hover*/
        --dd: rgb(132, 145, 116);/*deeper blu-green*/   /*main background*/
        --ff: rgb(92, 105, 76);/*dark green*/   /*button hover*/
        --gg: rgb(72, 85, 56);/*darker green*/   /*b2 color, button background*/
        --ee: rgb(62, 75, 46);/*darkest green*/   /*main border, date color*/
      }
      
      .base {
        position: absolute;
        top:0; left:0;
        width: 100%; height: 100%;
        background: url('https://graphics-hoard.neocities.org/Images/Backgrounds/grn-flwr.png');
        background-size: 300px;
        color: var(--aa);
      }
      
      a {color: var(--bb);}
      a:hover {color: var(--bbb);}
      
      main {
        background: var(--dd);
        position: absolute;
        --w: 80%;
        width: var(--w);
        left: calc((100% - var(--w)) / 2);
        --h: 90%;
        height: var(--h);
        top: calc((100% - var(--h)) / 2);
        padding: 2%;
        border: 10px dotted var(--ee);
        box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.4);
      }
      #baseEvents { 
        background: rgba(0, 0, 0, 0.7);
        background-size: cover;        
      }
      #blankbase {background: transparent;display:none; overflow:hidden;}
      
      #mainEvents {
        top: -90%;
        position: relative;
      }
      
      section {
        display: flex;
        width: 100%;
      }
      
      .header {font-size: 7vmin; max-height:25%;text-align: center; display: block;}
      #top {max-height:25%;}
      #bttm {max-height: 75%;}
      
      
      .box {
        --b: 50px;
        
        width: var(--b);
        text-align: center;
        color: var(--bb);
        margin: 10px;
        font-size: calc(var(--b) / 4);
        word-wrap: break-word;
      }
      #box2 {
        --c: calc(var(--b) / 1.5);
        width: var(--c);
        font-size: calc(var(--c) / 4);
      }
      
      
      button {
        width: var(--b); height: var(--b);
        font-size: calc(var(--b) / 3.5);
        border-radius: 5px;
        text-align: center;
        line-height: var(--b);
        font-family: "Fjalla One";
        background: var(--gg);
        color: var(--bb);
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
      }
      button:hover {
        cursor: pointer;
        background: var(--ff);
        color: var(--bbb);
        box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
      }
      #mini { 
         
         width: var(--c); height: var(--c);
         line-height: var(--c);
         font-size: calc(var(--c) / 4.5);
      }
      #2 {
        --b: 49px;
        font-size: 14px;
        border-radius; 3.5px:
      }
      #b2 {        
        background: var(--bb);
        color: var(--gg);
      }
      #b2:hover {
        background: var(--bbb);
        color: var(--ff);
      }
      
      button img {width: var(--b); height: var(--b);border-radius: 5px;position:relative;left:0;top:0;}
      
      
      .note {
        background: url('https://soul-of-foxglove.neocities.org/-HW/page.png');
        background-size: 100% 100%;
        width: 25%;
        padding: 0 3% 8px 3%;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
      }
      #first {aspect-ratio: 657 / 1008;}
      #second {width: 30%;}
      p {width: 100%; font-size: 25px;}
      li {width: 100%;}
      u{font-size:25px; text-align:center;}
      
      .note2 {
        background: url('https://soul-of-foxglove.neocities.org/-HW/page.png');
        background-size: 100% 100%;
        width: 25%;
        padding: 0 3% 8px 3%;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
        aspect-ratio: 657 / 1008;
      }
      
      #date {
        position: absolute;
        bottom: 0; right: 0;
        max-width: 50%;
        font-size: 10vmin;
        font-family: Times New Roman;
        padding: 5%;
        color: var(--ee);
        text-align: center;
      }
      
      .edit {
        position: absolute;
        bottom:5px;right:5px;
        font-size: 18px;
      }