:root {
    --header-height: 14%;
    --column-width: 225px;
    --row-height: 267px;
    --bottom-row-offset: -120px;
}

body {
    display: flex;
    flex-direction: auto;
    height: 100vh;
    width: 100vw;
    margin: 0;
    overflow: scroll;
    justify-content: flex-start;
}

.column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /*justify-content: flex-start;*/
    transform-origin: top left;
    transform: scale(0.4);
}

.button-container, #imageRow {
    align-self: flex-start;
}

#imageRow {
    position: relative;

    display: grid;
    grid-template-columns: repeat(7, var(--column-width));
    grid-template-rows: repeat(2, var(--row-height));
    gap: 10px; /* adjust as needed */    
}



#imageRow button {
    width: var(--column-width);
    height: var(--row-height);
    position: relative;
    /* Adjust this value as needed */
    /*Border Color is red*/
    border: 3px solid red;
    /*Padding at the top of 5 px*/
}

.button-container {
    transform-origin: top left;
    transform: scale(0.8);
    /* Adjust this value as needed */
    position: relative;
    /*position: absolute;* /
    top: 25%;*/
    display: grid;
    grid-template-columns: repeat(7, var(--column-width));
    grid-template-rows: repeat(4, var(--row-height));
    gap: 10px; /* adjust as needed */    
}

@media screen and (max-width: 600px) {
    .button-container {
        grid-template-columns: repeat(auto-fill, minmax(15%, 1fr));
    }
    #imageRow {
        grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
    }

}
.vowButton {
    background-image: url('./images/vowSymbols/vowGlyphs.png');
    background-size: auto;
    width: var(--column-width);
    height: var(--row-height);
    display: inline-block;
    /*position: absolute;*/
    position: relative;
    overflow: hidden;
}

.vowButton::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 128, 0, 0);
    /* Initially transparent */
    transition: background-color 0.3s ease;
    /* Smooth transition */
}

.vowButton:hover::after {
    background-color: rgba(128, 250, 0, 0.5);
    /* Semi-transparent green on hover */
}

.vowButton:active::after {
    background-color: rgba(0, 0, 255, 0.5);
    /* Semi-transparent blue */
}

.vowButtonActive::after {
    /* for use when the image is selected, and in the imageRow.*/
    background-color: rgba(0, 0, 255, 0.5);
    /* Semi-transparent blue */
}

  /* Background position classes */
  .vowButton#ascendant_plane { background-position: 0 var(--header-height); }
  .vowButton#black_garden { background-position: calc(-1 * var(--column-width)) var(--header-height); }
  .vowButton#black_heart { background-position: calc(-2 * var(--column-width)) var(--header-height); }
  .vowButton#commune { background-position: calc(-3 * var(--column-width)) var(--header-height); }
  .vowButton#darkness { background-position: calc(-4 * var(--column-width)) var(--header-height); }
  .vowButton#drink { background-position: calc(-5 * var(--column-width)) var(--header-height); }
  .vowButton#earth { background-position: calc(-6 * var(--column-width)) var(--header-height); }
  
  .vowButton#enter { background-position: 0 calc(var(--header-height) - var(--row-height)); }
  .vowButton#fleet { background-position: calc(-1 * var(--column-width)) calc(var(--header-height) - var(--row-height)); }
  .vowButton#grief { background-position: calc(-2 * var(--column-width)) calc(var(--header-height) - var(--row-height)); }
  .vowButton#give { background-position: calc(-3 * var(--column-width)) calc(var(--header-height) - var(--row-height)); }
  .vowButton#guardian { background-position: calc(-4 * var(--column-width)) calc(var(--header-height) - var(--row-height)); }
  .vowButton#hive { background-position: calc(-5 * var(--column-width)) calc(var(--header-height) - var(--row-height)); }
  .vowButton#kill { background-position: calc(-6 * var(--column-width)) calc(var(--header-height) - var(--row-height)); }
  
  .vowButton#knowledge { background-position: 0 calc(var(--header-height) - 2 * var(--row-height)); }
  .vowButton#light { background-position: calc(-1 * var(--column-width)) calc(var(--header-height) - 2 * var(--row-height)); }
  .vowButton#love { background-position: calc(-2 * var(--column-width)) calc(var(--header-height) - 2 * var(--row-height)); }
  .vowButton#neutral { background-position: calc(-3 * var(--column-width)) calc(var(--header-height) - 2 * var(--row-height)); }
  .vowButton#pyramid { background-position: calc(-4 * var(--column-width)) calc(var(--header-height) - 2 * var(--row-height)); }
  .vowButton#savathun { background-position: calc(-5 * var(--column-width)) calc(var(--header-height) - 2 * var(--row-height)); }
  .vowButton#scorn { background-position: calc(-6 * var(--column-width)) calc(var(--header-height) - 2 * var(--row-height)); }
  
  .vowButton#stop {      background-position: var(--bottom-row-offset) calc(var(--header-height) - 3 * var(--row-height));  }
  .vowButton#tower {      background-position: calc(var(--bottom-row-offset) + (-1 * var(--column-width))) calc(var(--header-height) - 3 * var(--row-height));  }
  .vowButton#traveler {      background-position: calc(var(--bottom-row-offset) + (-2 * var(--column-width))) calc(var(--header-height) - 3 * var(--row-height));  }
  .vowButton#witness {      background-position: calc(var(--bottom-row-offset) + (-3 * var(--column-width))) calc(var(--header-height) - 3 * var(--row-height));  }
  .vowButton#worm {      background-position: calc(var(--bottom-row-offset) + (-4 * var(--column-width))) calc(var(--header-height) - 3 * var(--row-height));  }
  .vowButton#worship {      background-position: calc(var(--bottom-row-offset) + (-5 * var(--column-width))) calc(var(--header-height) - 3 * var(--row-height));  }