* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  color: black;
  text-shadow: 
    -1px -1px 0 #fff,  
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff;
  font-family: Verdana;
  text-align: justify;
  font-size: .85rem;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center; 
  align-items: center;     
  overflow: hidden;
  cursor: url('/UI/EATScursor.png'), auto;
  background-image: url('/UI/background.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.container {
  display: grid;
  width: 70vw;
  height: 90vh;
  place-content: center;
  column-gap: .20vw;
  row-gap: .20vh;
  grid-template-areas:
  "nav nav"
  "main aside"
  "foot foot ";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
}

main, aside, section, footer {
    margin: 0;
    padding: 1rem;
    border: 2px solid #2088E8;
    border-radius: 1rem;
    overflow: scroll;
    background-color: rgba(203, 250, 219, 0.90);
    box-shadow: 1px 1px 30px 0px rgba(53,199,95,0.74) inset;
    -webkit-box-shadow: 1px 1px 30px 0px rgba(53,199,95,0.74) inset;
    -moz-box-shadow: 1px 1px 30px 0px rgba(53,199,95,0.74) inset;
}
nav {
    grid-area: nav;
    padding: .5rem;
    display: flex;
    justify-content: center;
    gap: .25rem;
    border: 2px solid #2088E8;
    border-radius: 1rem;
    overflow: scroll;
    background-color: rgba(187, 245, 206, 0.75);
    box-shadow: 1px 1px 30px 0px rgba(53,199,95,0.74) inset;
    -webkit-box-shadow: 1px 1px 30px 0px rgba(53,199,95,0.74) inset;
    -moz-box-shadow: 1px 1px 30px 0px rgba(53,199,95,0.74) inset;
}
main {
    grid-area: main;
}
aside {
    grid-area: aside;
}
section {
    grid-area: sect;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}
footer {
    grid-area: foot;
}
/* Images */
img {
  max-width: 100%;
  height: auto;
}

h1, h2, h3, a:link, a:visited, a:hover,a:active {
    text-shadow: none;
}
/* Headers */
	h1 {
		font-family: "Protest Revolution", sans-serif;
		padding: 0;
        margin: 0;
        background: #2088E8;
        background: linear-gradient(to bottom, #2088E8 0%, #16A124 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: center;
	}
	h2 {
		font-family: "Protest Revolution", sans-serif;
		background: #2088E8;
        background: linear-gradient(to bottom, #2088E8 0%, #16A124 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: center;
        padding: 0;
        margin: 0;
	}
	h3 {
		font-family: "Protest Revolution", sans-serif;
        text-align: center; 
        font-size: 1rem;
        background: #2088E8;
        background: linear-gradient(to bottom, #2088E8 0%, #16A124 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        padding: 0;
        margin: 0;
	}

/* links */
	a:link {
	color: rgb(247, 228, 63);
	}
	/* visited link */
	a:visited {
	color: rgb(255, 247, 139);
	}
	/* mouse over link */
	a:hover {
	color: rgb(255, 233, 35);
    font-weight: bold;
	}
	/* selected link */
	a:active {
	color: rgb(83, 241, 117);
	}
/* Div Dividing */
    .nest {
        display: flex;
        gap: 1rem;
    }
    .egg {
        flex: 1; 
        padding: .5rem;
    }
/* Button */
    .button {
        color: black;
        background-color: rgb(90, 170, 245);
        box-shadow: 1px 1px 30px 0px rgb(204, 230, 255) inset;
        -webkit-box-shadow: 1px 1px 30px 0px rgb(204, 230, 255) inset;
        -moz-box-shadow: 1px 1px 30px 0px rgb(204, 230, 255) inset;
        text-decoration: none;
        border: 2px solid #1b7bd4;
        border-radius: .5rem;
        padding: .5rem;
        font-family: sans-serif;
        display: flex;
        align-items: center; 
        justify-content: center; 
    }

/* Vendor Menu */
    .vendorimg {
    height: auto;
    width: 250px;
    margin-left:auto;
    margin-right:auto;
    }
	.vendorlist {
	margin: 0;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 0.5vw;
	}
	.vendor {
	grid-template-columns: auto, auto;
	grid-template-rows: auto, auto;
	}

/* Vendor Map */
    .image-mapper-shape {
        fill: rgba(0, 0, 0, 0);
    }
    g:hover .image-mapper-shape {
        stroke: rgb(0, 25, 253);
        stroke-width: 2px;
        opacity: 50%;
    }

/* Media Phone */
@media (max-width: 700px) {
    body {
        overflow: scroll;
        font-size: .75rem;
        display: flex;
    }
    .container {
        width: 100vw;
        height: 100vh;
        display: grid;
        row-gap: .5vh;
        column-gap: .5vw;
        padding: 10px;
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-template-areas:
        "nav"
        "main"
        "aside"
        "foot";
    }
}