/* body */

body {
  background-color: black;
  font-family: Verdana, Arial, Tahoma, Serif;
}

/* topbar */

div.topbar-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 2px;
  position: sticky;
  max-width: 900px;
  width: 100%;
  background-color: grey;
}

div.topbar-box {
  text-align: center;
  background-image: url("images/shortTabButton.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
  width: stretch;
  border-radius: 4px;
  /*max-width: 225px;*/
  /*float: left;*/
  text-decoration-line: none;
}


div.topbar-box:hover {
  /*font-size: 17px;*/
  text-decoration: underline yellow;
  text-decoration-style: wavy;
  color: white;
  text-shadow: 0px 0px 3px white;  
  
} 


p.topbar-text {
  color: yellow;
  text-shadow: 0px 0px 2px black;
  cursor: pointer;
  text-decoration-line: none;
}


/* 
li.topbar-list {
    list-style: none;
    min-width: 150px;
    float: left;
} 
*/

/* firstbox */

div.firstbox-container {
  width: 80%;
  max-width: 850px;
  margin: auto;
  margin-top: 30px;
  padding-top: 0px;
  border: solid blue 4px;
  height: 31px;
  }

div.firstbox-box {
  background-color: seashell;
  text-align: center;
  padding-left: 2%;
  padding-right: 2%;
  padding-bottom: 4px;
  padding-top: 0px;
  width: auto;
}

.firstbox-topbar {
  width: auto; 
}

p.firstbox-topbar {
  margin-top: 0px;
  padding: 2px;
  width: auto;
}

/* media query - https://www.w3schools.com/html/html_responsive.asp */
/* topbar hover resource - https://www.sololearn.com/en/Discuss/295495/how-can-i-increase-my-texts-fontsize-over-hovering-without-interacting-with-other-contents */


@media screen and (max-width: 800px) {
    .firstbox-box  {
      width: 100%;
   }
}

/* second box */

div.secondbox-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 2px;
  background-color: blue;
  width: 100%;
  max-width: 900px;
}



/*  we need to make it so that the topbar-container is larger heightwise but topbar-box is still the same size. when topbar-text font-size increases it makes topbar-box expand to fit the text within it, which stretches topbar-container due to it being the same height as topbar-box. topbar-box stretches to fill topbar-container and becasue of the new text size it makes the whole container increase. we need to separate the size of topbar-box from topbar-container. because all the topbar-box are size-attached to the container they move with it when it expands. also position-sticky flunked again */ 

/* i think this can be solved by making each topbar-box and container individual/separate (ie: topbar-1,2,3,4 etc). it would increase the work and make it a little messier but it works. i can just create the 1 and then copypaste as follows. */

/* alternativelyi can just make the text bold instead of larger. would be easier though tbh i quite like the larger text. */