.teachers-font-variable {
  font-family: "Teachers", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

body{
  font-family: "Teachers", sans-serif;
}

.main-body{
  background-image: url('../images/main-bg.png');
  background-color: #FFF5E2;
}
.games-body{
  background-color: #FFF5E2;
}
.people-body{
  background-image: url('../images/people-bg.png');
  background-color: #FFF5E2;
}
.follow-body{
  background-image: url('../images/follow-bg.png');
  background-color: #FFF5E2;
}
.about-body{
  background-image: url('../images/about-bg.png');
  background-color: #FFF5E2;
}

.indent-basic{
  margin-left: 5%;
}

.games-menu-item{
  color: #FFF5E2;
  background-color: #BE4A00;
  height: calc((100vh - var(--vh-offset, 0px))*.25);
  align-content: center;
  text-indent: 5%;
}

.games{
  color: #FFF5E2;
  background-color: #BE4A00;
  height: 100%;
  align-content: center;
  text-indent: 5%;
  padding-top:5%;
}

.follow-menu-item{
  color: #000000;
  background-color: #FFF5E2;
  height: calc((100vh - var(--vh-offset, 0px))*.25);
  align-content: center;
  text-indent: 5%;
}
.follow{
  color: #000000;
  background-color: #FFF5E2;
  height: 100%;
  align-content: center;
  text-indent: 5%;
  padding-top:5%;
}

.people-menu-item{
  color: #FFF5E2;
  background-color: #EF7121;
  height: calc((100vh - var(--vh-offset, 0px))*.25);
  align-content: center;
  text-indent: 5%;
}
.people{
  color: #FFF5E2;
  background-color: #EF7121;
  height: 100%;
  align-content: center;
  padding-top:5%;
}

.about-menu-item{
  color: #FFF5E2;
  background-color: #000000;
  height: calc((100vh - var(--vh-offset, 0px))*.25);
  align-content: center;
  text-indent: 5%;
}
.about{
  color: #FFF5E2;
  background-color: #000000;
  height: 100%;
  align-content: center;
  padding-top:5%;
}

/* unvisited link */
a:link {
  color: #FFF5E2;
  text-decoration: none;
}

/* visited link */
a:visited {
  color: #ffbb91;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: #EF7121;
}

/* selected link */
a:active {
  color: #EF7121;
}

.project-container{
  padding: 1%;
  align-items: stretch;
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  height: calc(100vh - var(--vh-offset, 0px));
  overflow-y: scroll;
}

.center-image{
  width: stretch;
  display: block;
  margin-left: 0;
  margin-right: 0;
}

@media (min-width: 550px){
  .center-image{
     width: fit-content;
     display: block;
     margin-left: auto;
     margin-right: auto;
  }
}

.menu-button {
  float: right;
  padding-right: 4%;
  font-size: 36px;
}


div.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

div.gallery-item {
  margin: 5px;
  width: calc(25% - 20px);
}

div.gallery-item img {
  width: 100%;
	height: auto;
	object-fit: contain;
}

div.gallery-item div.desc {
  padding: 15px;
  text-align: center;
}

@media only screen and (max-width: 768px) {
  div.gallery-item {
    width: calc(50% - 20px);
  }
}

@media only screen and (max-width: 480px) {
  div.gallery-item {
    width: calc(100% - 20px);
  }
}

.game-gallery {
	display: grid;
	gap: 4px;
	grid-auto-flow: row dense;
	grid-template-columns: repeat(auto-fill, 80px);

	a {
		&.gold {
			grid-column: span 2;
			grid-row: span 2;
		}

		img {
			display: block;
		}
	}
}