body {
  background-color: #331974;
  background-image: url("/images/home-bkg.png");
  background-position: center;
  background-size: 16%;
  color: black;
  font-family: Verdana;
}

/*** *WEBSITE CONTAINER* ***/
#WebsiteContainer {
  background-color: #7eddfd;
  
  border: solid;
  
  max-height: 1024px;
  max-width: 768px;
  
  display:flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
}


/** *NAVBAR* **/
  /**Main NavBar Stylings**/
  #NavBar {
    background-color: #b7fee3;
    
    border: solid;
    
    display: flex;
    flex-flow: row;
    align-items: center;
    margin: 5px;
  }

  #HeaderMarquee {
    background-color: #9079f7;

    display: flex;
    border: solid;
    width: 100%;
    margin: 5px;
  }

    /*NavButtonContainer Center Children*/
    #NavButtonContainer {
      align-items: center;
      display: flex;
      justify-content: center;
      margin-block: 4px;
    }

    /*NavButton:Image Change on Hover*/
    a img.NavButton {
      display: inherit;
    }
    a img.NavButtonHover {
      display: none;
    }

    a:hover img.NavButton {
      display: none;
    }
    a:hover img.NavButtonHover {
      display: inherit;
    }

    a img.NavButton, a img.NavButtonHover {
        max-height: 75%;
        max-width: 75%;
    }

    /*NavButton:Image:Size Change on Screen:WidthOrHeight*/
    @media (height <= 1024) or (width <= 768) {
      
    }

    

/** *END OF NAVBAR* **/


/*** *END OF WEBSITE CONTAINER* ***/