/* styling of basic components */
html { 
    background: url("https://media2.giphy.com/media/U3qYN8S0j3bpK/giphy.webp?cid=790b76119b80dadec7df9030ec6f4f38fc34b2e41e469c0a&rid=giphy.webp");}
body { 
    margin:10px;}
div {
    overflow: hidden;
    box-sizing: border-box;}
/* classes in order from back to front */
.container {
    /* background of webpage */
    display:flex;
    justify-content:center;
    align-items:center;
}
.base {
    background-color: #e7e2e2;
    display: flex;
    justify-content: center;
    height:70vh;
    width:325px;
    padding:20px;
    flex-direction: column;
}
.child { 
    background-color: #858080;
    display:flex;
    justify-content: center;
    align-items: center;
    height: 30vh;
    width:100%;
    border:groove 2px;
    flex-flow: wrap;
    margin-top: 10px;
}
.child2 {
    background-color: #e7e2e2;
    display:flex;
    justify-content: center;
    flex-flow: wrap;
    align-items: center;
    height: 30vh;
    width:100%;
    margin-top: 10px;
}
.outer-menu-grid {
    background-color:#196316;
    display:flex;
    width:65%;
    padding: 10px;
    height:65%;
    overflow: hidden;
    border: inset 5px;
    position: relative;
    float: left;
}
.menu-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #ccc;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    display: flex;
    flex-wrap:wrap;
  }
.menu-grid {
    background-color:rgb(16, 126, 40);
    width: 50%;
    height: 50%;
    border: 1px solid black;
    display: flex;
    justify-content:center; 
    align-items: center;
  }
.menu-item {
    line-height: 100%;
    font-size: 16px;
    font-weight: bold;
    text-align:center;
  }
.childschild2 {
    background-color:none;
    display:flex;
    width:100%;
    height:10px;
    font-size:9;
    color:white;
    overflow: hidden;
}
.lowerhalfcomponent { 
  height:50%;
  width:50%;
}
.horizontal-plus {
  position: relative;
  background-color: rgb(43, 43, 43);
  width: 40%;
  height: 16.5%;
  left: 30%;
  top: 49.75%;
  border-radius:3px;
}
.horizontal-plus-mini {
  position: relative;
  background-color: rgb(94, 94, 94);
  width: 30%;
  height: 4.5%;
  left:60px;
  top: 15%;
  border-radius:3px;
  transform: rotate(-30deg);
}
.vertical-plus {
  position: relative;
  background-color: rgb(43, 43, 43);
  width: 12.5%;
  height: 50%;
  left: 43.75%;
  top: 16.5%;
  border-radius:3px;
}
a {
  text-decoration: none;
  color:black;
}

/* now onto the ids */
#curvedbottomrightborder {
    border-top-left-radius:8px;
    border-top-right-radius:8px;
    border-bottom-left-radius:8px;
    border-bottom-right-radius: 40px;
}
#shadow {
  box-shadow: 2px 2px #888888;
}
#circle {
    position:relative;
    left:50px;
    top:40px;
    height: 35px;
    width: 35px;
    background-color: green;
    border-radius: 50%;
    margin:0;
    display: inline;
    }
#circle2 {
  position:relative;
    left:46px;
    top:5px;
    height: 50px;
    width: 50px;
    background-color: red;
    border-radius: 50%;
    text-align: center;
    margin: 1;
    display: inline;
    }
#flex {
  display:flex;
}
#block {
  display:block;
}
#buttonlabel1 {
  position: relative;
  top:52px;
  left:20px;
  transform: rotate(-30deg);
  transform-origin: 0 100%;
}
#buttonlabel2 {
  position: relative;
  top:28px;
  left:56px;
  transform: rotate(-35deg);
  transform-origin: 0 100%;
}
#table { 
  border-spacing:0;
}