/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}


/*container for splitting the site vertically*/
.top-screen-bar-container {
  display: grid;
  grid-template-rows: 150px 70px auto;
  grid-template-columns: 100%;
  background-color: black;
  justify-content: center;
  
  
}

/*div style for vertical splits*/
.top-screen-bar-container div {
  text-align: center;
  margin: 3px;
  padding: 2px;
  position:relative;
  
  /*#fff8c9 - light yellow
  #ffbb56 - bright orange
  */
  background-color: #2c2726;
  font-size:12;
  color: #ffbb56;
  text-shadow: 1px 0px 10px #ffbb56;
}

/*test object*/
.container {
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: 30% 30% 30%;
  border: 3px solid #000000;
  margin-left: 5%;
  margin-right: 5%;
  gap: 2px;
  justify-content: center;
  background-color: blue; /*just some*/
}
/*test object*/
.container div {
  background-color: red; /*just some*/
  border: 1px solid #000000;
  width: auto;
  height: 50px;
  padding: 10px;
  margin: 2px;
  text-align: center;
  align-self:center;
}
/*even more test objects*/
.TEST  {
  font-size: 30px;
  font-weight: bold;
}