@font-face {
  font-family: Humming;
  src: url(/fonts/Humming.otf);
}
@font-face {
  font-family: Finkheavy;
  src: url(/fonts/FinkHeavy.otf);
}
/*grid*/
.main {
	display: flex;  
  flex-direction: column;
  align-items: center;
  justify-content: center;
	gap: 3em;
	width: 100%;
	height: 100%;
}
.up {
  display: flexbox;
	background-color: rgba(255, 255, 255, 0.5);
  border-color: black;
  border-radius: 5em;
  padding: 1vh;
}
.down {
  display: flexbox;
	background-color: #5e4500bb;
  padding: 5vh;
  margin: 3em 15%;

  overflow: scroll;
  border: 30px solid transparent;
  border-image-source: url(/image/faithful/flower_border.png);
  border-image-slice: 30;
  border-image-outset: 15px;
  border-image-repeat: round;
}
.chocolate {
	display: grid;
	grid-template-rows: 30% 30% 30%;
	grid-template-columns: 30% 30% 30%;
	width: auto;
	height: auto;
  justify-content: center; 
}


/*classes*/
.banner{
  height: 100%;
  width: 100%;
  border-radius:5em;
}
.fth{
color:goldenrod
}
.mcknz{
color:fuchsia
}
.grysn{
color:blanchedalmond
}
.icon{
  width: 77%;
}
/*elements*/
body {
  background-image: url(/image/tiles/yellow_plaid.jpg);
  font-size: 16px;
  color: #F0A702;
  font-family: Humming, sans-serif;
  text-align: center;
}
hr{
  width: 77%;
  height: .77em;
  color: #784f0c;
  background-color: #784f0c;
  border-width: 0;
  border-radius: 1em;
}
table{
  width: 100%;
}
td{
  width: 33%;
}
p{
  color: goldenrod;
  font-size: 20px;
}
h1 {
  font-size: 2.2em;
  font-family: Finkheavy, serif;
  color: rgb(224, 208, 170);
}
h2 {
  font-size: 2em;
  font-family: Finkheavy;
  color: black;
}
h3 {
  font-size: 1.7em;
  font-family: Finkheavy;
  color: black;
}
h4 {
  font-size: 1.5em;
  font-family: Finkheavy;
  color: black;
}
h5 {
  font-size: 1.2em;
  font-family: Finkheavy;
  color: black;
}
h6 {
  font-size: 1em;
  font-family: Finkheavy;
  color: black;
}