body {
  background-image: url("MathAndMatter.png");
  background-size: contain;      /* This makes the whole image visible */
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;  /* Optional */
  background-color: #000;        /* Fills empty space if aspect ratios differ */
}

.overlay-services table {
  color:white;
  padding-left: 30px;
  padding-right:30px;
  margin-left:auto;
  margin-right:auto;
  margin-top:5px;
  width:40%;
  vertical-align:top;
   text-align:center;
  background-color: rgba(0, 0, 60, 0.3); 
}

.overlay-services2 table {
  color:white;
  padding-left: 30px;
  padding-right:30px;
  margin-left:auto;
  margin-right:auto;
  margin-top:20px;
  width:40%;
  vertical-align:top;
   text-align:center;
  background-color: rgba(0, 0, 60, 0.8); 
}

#subjects {
   display:none;
}

.wholePage {
  position: relative;
}

.menuBanner {
  position: relative; /* Establishes the positioning context for the absolutely positioned child */
  top: 30px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto; /* Automatically calculates equal margins to center the block */
  height: 40px; /* Must have a defined height and width for this to work */
  width: 100%;
  ##background-color:yellow;
}

.overlay-text {
  position: relative; /* Positions the element relative to the nearest positioned ancestor (the container) */
  top: 10;             /* Aligns to the top edge of the container */
  width:80%;
  margin:auto;
  text-align: center;
  ##background-color:green;
}

.buttons {
   position:relative;
   margin-left:30px;
   margin-right:30px;
   width:100px;
   height:25px;
   border-radius:0px;
}

.buttons:hover {
  background-color: #45a049; /* Darker green background on hover */
  color:  white;
   border-color: #45ff49;
}

.menus {
   position:relative;
   margin-left:30px;
   margin-right:30px;
   width:100px;
   height:25px;
   border-radius:0px;
}

.menu1 {
}

.menu2 {
}

.menu3 {
}