@font-face {
  font-family: Magazine;
  src: url(/fonts/Magazine.otf);
}
@font-face {
  font-family: YaGitu;
  src: url(/fonts/YaGitu.otf);
}
/*root*/
:root {
  --border-width: 4px;
  --border-color: black;
  --border-style: double;
  --outer-margin: .25vw;
  --outer-padding:.4vw;
  --inner-margin:
  --inner-padding:
}

/*grid*/
.container {
  display: grid;
  grid-template-columns: 15vw 40vw 30vw;
  grid-template-rows: auto 100vh;
  justify-content: center;
}
.banner {
  border-color: var(--border-color);
  border-style: var(--border-style);
  border-width: var(--border-width);
  grid-column: 1 / 4;
  grid-row: 1 / 2;
}
.navigation-grid {
  background-color: #c8489b;
  background-image: url(/image/tiles/cheeta_print.png);
  border-color: var(--border-color);
  border-style: var(--border-style);
  border-width: var(--border-width);
  color: black;
  display: flex;
  flex-direction: column;
  grid-column: 1 / 2;
  grid-row: 2 / 4;
  margin: var(--outer-margin);
  padding: var(--outer-padding);
  text-align: center;
}
.navigation {
  background-color: #c967e2;
  border-color: var(--border-color);
  border-style: var(--border-style);
  border-width: var(--border-width);
  display: flexbox;
  margin: .1vw;
  padding: .25vw;
  text-align: center;
}
.grid-item-3 {
  display: flex;
  flex-direction: column;
  grid-column: 2 / 3;
  grid-row: 2 / 4;
}
.flex-item-3{
  background-color: #000000;
  border-color: var(--border-color);
  border-style: var(--border-style);
  border-width: var(--border-width);
  display: flexbox;
  margin: var(--outer-margin);
  height: 50vh;
  padding: var(--outer-padding);
  overflow: scroll;
}
.graphics-grid {
  display: flex;
  flex-direction: column;
  grid-column: 3 / 4;
  grid-row: 2 / 4;
}
.graphics{
  background-color: #e12c7d;
  background-image: url(/image/tiles/zebra_print.png);
  border-color: var(--border-color);
  border-style: var(--border-style);
  border-width: var(--border-width);
  display: flexbox;
  margin: var(--outer-margin);
  padding: var(--outer-padding);
  overflow: scroll;
}
/*classes*/
.fth{
  color:goldenrod
}
.mcknz{
  color:fuchsia
}
.grysn{
  color:blanchedalmond
}
.stmp{
  height: auto;
  width: 32%;
}
.blnk{
  height: auto;
  width: 49%;
}
.bttn{
  height: 4vh;
  width: auto;
}
/*elements*/
body {
  background-image: url(/image/tiles/pinkglitterbackground.gif);
  color: fuchsia;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}
image {
  height:auto;
  width:auto;
}
p {
  text-indent: 2em;
}
a:link {
  color: blue;
  text-decoration: underline;
}
a:hover {
  color: blue;
  text-decoration: underline;
}
a:visited {
  color: rgb(87, 0, 186)
}
ul {
  list-style-type: square;
}
h1 {
  font-family: 'Magazine';
  font-size: 2em;
  font-weight: bold;
  color: white;
  text-align: center;
}
h2 {
  font-family: 'YaGitu';
  font-size: 2em;
  font-weight: bold;
  color: white;
  text-align: center;
}
h3 {
  font-family: 'YaGitu';
  font-size: 1.7em;
  font-weight: bold;
  color: rgb(194, 25, 255);
  text-align: center;
  background-color: rgb(255, 166, 42);
}
h4 {
  font-size: 1em;
  font-weight: bold;
}
h5 {
  font-size: 1em;
  font-weight: bold;
}
h6 {
  font-size: 1em;
  font-weight: bold;
}