* {
        box-sizing: border-box;
      }
      
      html { background-image: var(--html);
        background-size: fill;
        background-repeat:repeat;
        background-color:var(--basecolor);
        background-blend-mode: multiply;}
      
      .basecamphoorah {position:absolute;top:0;left:0;height:auto;min-height:200%;width:100%;box-sizing:border-box; 
        
        
        display: grid;
        grid-template-columns: 1fr 3fr;
        grid-template-rows: 20vmin 5fr 1fr;
        padding:2vmin;
        gap: 1vmin;
      }
      :root {
        --paperw: 54vmin;
        --paperh: 70vmin;
        
        --html: url('/I2/curriculum/texture.jpg');
        --paper: url('/I2/curriculum/back.png');
        --gentexture: url('/I2/curriculum/textures.jpg');
        --basecolor: rgb(46, 27, 36);
        --baseoverlay: rgba(46, 27, 36, 0.4);
        --topcolor: rgb(75, 66, 82);
        --leftcolor: rgb(75, 66, 82);
        --border: 5px dashed rgb(59, 42, 53);
        
        --line: 6vmin;
        --font: rgb(91, 75, 81);
        --lfont: rgb(131, 115, 121);
      }
      
      .paper {
        position: relative;
        width:100%;
        grid-area: 2 / 2;
        background-image: var(--paper);
        background-size: 100% auto;background-repeat:repeat-Y;
      }
      
      .paperback {
        width:100%;
        position: absolute;
      }
      
      .overlay {
        background-color: var(--baseoverlay);
        width:100%;
        position: absolute;
        grid-area: 2 / 2;
        height: 100%;
        color: var(--lfont);
      }
      
      .top {
        position: absolute;
        width:100%;height:100%;
        top:0;left:0;
        grid-area: 1 / 1 / span 1 / span 2;
        
        background-image: var(--gentexture);
        background-size: cover;
        background-repeat:no-repeat;
        background-blend-mode: multiply;
        background-color: var(--topcolor);
        border: var(--border);
        color: var(--lfont);
      }
      
      .left {
        position: absolute;
        width:100%;height:100%;
        top:0;left:0;
        grid-area: 2 / 1 / span 1 / span 1;
        color: var(--lfont);
        
        background-image: var(--gentexture);
        background-size: cover;
        background-position: center;
        background-repeat:no-repeat;
        background-blend-mode: multiply;
        background-color: var(--leftcolor);
        border: var(--border);
      }
      
      .bttm {
        position: absolute;
        width:100%;height:auto;
        top:0;left:0;
        grid-area: 3 / 1 / span 1 / span 2;
        
        background-image: var(--gentexture);
        background-size: cover;
        background-repeat:no-repeat;
        background-blend-mode: multiply;
        background-color: var(--topcolor);
        border: var(--border);
        padding: 1vmin;
      }
      
      
      
      
      
      .paper > p {
        background-image: url('/I2/curriculum/lines.png');
        background-size: 100% var(--line);background-repeat: repeat-Y;
        height: auto;width:100%;
        margin: 0;
        padding: 0 0 5vmin 5vmin;
        
        font-size: calc(var(--line) - 1vmin);
        line-height: var(--line);
        color: var(--font);
      }
      
      li {
        font-size: calc(var(--line) - 1vmin);
        line-height: var(--line);
        color: var(--font);
      }
      
      
      .left > figure {
        position:relative;top:0;left:0;
        width: 100%;padding:4vmin;margin:0;
      }
      
      .left > figure > img {
        width: 100%;
        position:relative;
        top:0;
        left:0;
      }
      
      .bttm > h1 {
        color: var(--lfont);
      }