* {box-sizing:border-box;
        --aa: grey;/*base color*/
        
        
      }
      
      .base {
        position:absolute;top:0;left:0;
        width:100%;
        display:flex;
        z-index: 2;
        background:var(--aa);
      }
      
      .column {
        min-width: 25%;
        max-width: 25%;
        height:100%;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows:auto;
        padding: 5px;
        gap: 5px;
      }
      
      .small {
        height: auto;
        position: static;
        margin: 0;
        width: 100%;
        display: inline-block;
        margin-left: auto; margin-right: auto;
        z-index: 2;
      }
      
      .small:hover {
        cursor: pointer
      }
      
      .active {
        position: fixed;
        width: auto;
        max-width: 90%;
        min-height: 80%;
        max-height: 90%;
        z-index: 6;
      }
      
      
      
      #shade {
        position: fixed; top: 0; left: 0;
        width: 100%; height: 100%;
        display: none;
        background: rgba(0, 0, 0, 0.5);
        z-index: 4;
      }
      
      #shade:hover {
        cursor: pointer
      }