body{
    background-color: #f7f7f7;
    color: rgb(19, 12, 10);
    width: auto;
    display: flex;
    flex-direction: column;
}

html, body {
    height: 100%;
    margin: 0;
  }

main {
    flex-grow: 1;
}

a{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;  
    text-decoration: none;
    color: rgb(19, 12, 10);
}

.menu_img {
    object-fit: contain;
    transition: opacity 3s;
    height: 90%;
}

.bottom{
    opacity: 0;
    position: absolute;
    top: 0%;
    left: 0%;
}

.menu_img1,
.menu_img2,
.menu_img3,
.menu_img4,
.menu_img5,
.menu_img6 {
  width: 100%;
  height: auto;
}

.top {
    position: absolute;
    top: 0%;
    left: 0%;
}

.top:hover {
    opacity: 0;
}

.menuItem {
    width: 20vw;
    height: 25vh;
    position: relative;
}

.menuItem:hover .bottom {
    opacity: 1;
}

/* .menuItem:hover a{
    color: #f7f7f7;
} */

.menuContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70%;
    width: 100%;
}

.menuGrid {
    width: auto;
    height: 100%;
    display: grid;
    justify-content: center;
    align-content: center;
    grid-template-columns: repeat(4, 1fr);
}

.menuItem--1 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.menuItem--2 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }
  
  .menuItem--3 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
  
  .menuItem--4 {
    grid-column: 4 / 5;
    grid-row: 2 / 3;
  }
  
  .menuItem--5 {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }
  
  .menuItem--6 {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
  }

footer{
    text-align: center;
    position: sticky;
    bottom: 0;
    margin: auto;
    width: 99%;
    flex-shrink: 0;
}

footer > p{
    font-size: 12px;
}

footer> a{
    margin: 1em;
}

footer > p > img {
    height: 12px;
}

@media only screen and (max-width: 768px) {
    .menuGrid{
        display: block;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        max-width: 100%;
        height: 100%;
    }

    .menuItem--1,
    .menuItem--2,
    .menuItem--3,
    .menuItem--4,
    .menuItem--5,
    .menuItem--6 {
        grid-column: auto;
        grid-row: auto;
    }

    .menuItem {
        width: 45vw;
        height: 30vh;
    }
}