/* Font Declarations */
@font-face {
  font-family: Bevan; 
  src: url('/MAPLES/fonts/Bevan-Regular.ttf'); 
}
@font-face {
  font-family: BlackHanSans; 
  src: url('/MAPLES/fonts/BlackHanSans-Regular.ttf'); 
}
@font-face {
  font-family: Sriracha; 
  src: url('/MAPLES/fonts/Sriracha-Regular.ttf'); 
}
@font-face {
  font-family: Martel; 
  src: url('/MAPLES/fonts/Martel-Regular.ttf'); 
}
@font-face {
  font-family: RozhaOne; 
  src: url('/MAPLES/fonts/RozhaOne-Regular.ttf'); 
}
@font-face {
 font-family: WDXL; 
 src: url('/MAPLES/fonts/WDXLLubrifontSC-Regular.ttf'); 

}
/*tag modifications*/
body {
  overflow-x: hidden !important;
  background-color: red;
  font-family: Courier;
  font-size: 24px;
}
main{
  display: flex;
  flex-direction: column;
 }

header{
  background-color: #e8e7e1;
  border: ridge aliceblue 4px;
  border-radius: 5px;
  width: calc(100% - 5px);
}
header p {
  width: 100%;
  text-align: center;
}
header button{
 border: none;
 padding: 10px;
}
h1{
  font-family: Bevan, serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -1px;
  margin: .5em 1em 1em 1em;
  font-size: 1.6em;
}

@media (min-width: 600px){
h1{
  font-size: 2em;
}
}
h1::marker{
  content: ' * ';
}
h2{
  font-family: Sriracha,BlackHanSans, Bevan, WDXL, RozhaOne, Martel, sans-serif;
  font-weight: 400;
  font-style: normal;
}

/*Classes*/


.flex-column{
  display: flex;
  flex-direction: column;
}
.flex-row{
  display: flex;
  flex-direction: row;
}
.flex-wrap{
  flex-wrap: wrap;
}
.flex-80 {
  flex-basis: 80%;
}
.flex-grow-2 {
  flex-grow: 2;
}

.floating img{
  position: absolute;
  max-width: 250px;
  max-height: 250px;
  image-rendering: pixelated;
}
.tomato img{
  right: -30px;
  top: -30px;
}
.bokchoy img{
  position: relative;
  transform: rotate(90deg);
  left: 60%;
  top: -172%;
}
@media (min-width: 600px){
  .bokchoy img {
    top: -69%;
  }
}
@media (min-width: 1285px){
  .bokchoy img {
    top: -50%;
  }
}
.durian img{
  left: -50px;
  top: 27vh;
  transform: rotate(-90deg);
}
.over{
  position: relative;
  z-index: 999;
}
.to {
  margin: 0px;
  padding: 0px;
  left: calc(22vh - 25px);
}
.welcome{
  display: flex;
  z-index: 2;
  aspect-ratio: 1;
  align-items: center;
  color: red;
  background: yellow;
  /* 8-point star via 16-point polygon (outer/inner alternating) */
  clip-path: polygon(
    50% 0%,   60.7% 24.1%,
    85.4% 14.6%, 75.9% 39.3%,
    100% 50%, 75.9% 60.7%,
    85.4% 85.4%, 60.7% 75.9%,
    50% 100%, 39.3% 75.9%,
    14.6% 85.4%, 24.1% 60.7%,
    0% 50%, 24.1% 39.3%,
    14.6% 14.6%, 39.3% 24.1%
  );
  max-width: 22vh;
  max-height: 22vh;
  padding: 40px;
  position: absolute;
  top: -9vh;
  left: -5vh;
  transform: rotate(-25deg);
  border: 1px solid red;
}
.sticky {
  position: sticky;
  top: 0;
}
.fullname h1{
  text-transform: uppercase;
  color: red;
  display: inline;
  -webkit-text-stroke: 1px white;
  text-shadow: 
  #74bced -2px 2px, #74bced -4px 4px, #5ba6da -6px 6px, #3b8fc9 -8px 8px, #226da0 -10px 10px, #0e5c92 -12px 12px, #11227f -16px 12px 4px, #11227f -12px 16px 4px;
}
.fullname {
  text-align: right;
  position: relative;
  padding-top: 1em;
}
@media (min-width: 600px){
  .fullname {
    text-align: center;
  }
}
@media (min-width: 1285px){
  .fullname {
    top: 0vh;
  }
}
.shortname {
  max-height: 2.5em;
  display: flex;
  position: sticky;
  top: 0;
  justify-content: center;
  z-index: 9;
}
.shortname h1{
  max-height: 2.5em;
  font-size: 1em;
  text-transform: uppercase;
  color: red;
  margin-left: -125px;
  -webkit-text-stroke: 1px white;
  text-shadow: #1d68c4 -2px 2px, #1d68c4 -3px 3px, #1d68c4 -4px 4px, #11227f -5px 5px 2px, #11227f -4px 5px 2px;
}

@media (min-width: 600px){
  .shortname h1{
    font-size: 2em;
    margin-left: -125px;
  }
  .shortname {
    max-height: 4.5em;
  }
}
@media (min-width: 1285px){
  .shortname h1{
    font-size: 2.5em;
  }
  .shortname {
    max-height: 5.5em;
  }
}

/* Animations */
@keyframes scroll-left{
  from {
    left: 0;
  }
  to {
    left: -100%
  }
}

@keyframes spin{
  from {
    transform: rotate(-30deg);
    }
  to {
    transform: rotate(-390deg);
    }
}