*{
  font-family: sans-serif;
}

body {
  background-color: rgb(248, 243, 202);
  color: rgb(26, 25, 25);
  font-family: Verdana;
}

.navbar{
  top: 1%;
  right: 1%;
  position: fixed;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}


.navbar a{
  min-width: 64px;
  color: black;
  text-decoration: none;
  background-color: rgb(159, 249, 226);
  border: 2px rgb(220, 90, 90) solid;
  border-radius: 12px;
  margin: 0;
  padding: 10px;
}

.navbar a:hover{
  box-shadow: inset 2px 2px rgb(185, 76, 76);
}

.navbar a:active{
  box-shadow: inset 4px 4px rgb(185, 76, 76);
}

.maingrid{
  display: grid;
  align-content: center;
  justify-items: center;
}

.game{
  background-color: blueviolet;
  border-radius: 1px;
  display: flex;
  flex-direction: column;
}

#gametitle{
  text-align: center;
}

.game-info-button{
  position: fixed;
  margin: 1px;
  color:brown;
  background-color: blue;
}

#gameholder{
  margin: 20px;
  padding: 6px;
}

#spiralflex{
  flex-direction: column;
  align-items: center;
  display: flex;
  font-size: 0.8em;
}

/* #sliderholder{
  max-height: 90%;
  margin: 10px;;
} */

.title-dropdown{
  display: inline-block;
  overflow: hidden;
}

.dropdown-info{
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  max-width: 90%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;

}

.show {
  display: block;
}

.flex-column{
  display: flex;
  flex-direction: column;
}

.three-columns{
  column-count: 3;
}

.six-columns{
  column-count: 6;
}

.grid{
  display: grid;
}

.padding-md{
  padding: 16px;
}

.min-height-lg{
  min-height: 48px;
}

.min-height-sm{
  min-height: 12px;
}

.max-width-xxl{
  max-width: 75vw;
}