@font-face {font-family: "chiller"; src: url("./fonts/chiller.ttf")}
@font-face {font-family: "oddballz"; src: url("./fonts/oddballz.ttf")}
@font-face {font-family: "gen"; src: url("./fonts/Gen-Light.otf")}
@font-face {font-family: "bybsy"; src: url(./fonts/bybsy-regular-webfont.ttf);}
@font-face {font-family: "playwrite"; src: url(./fonts/PlaywriteCU-VariableFont_wght.ttf);}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
  gap: 10px;
  font-family: Courier;
  font-weight: 600;
  font-size: 0.8rem;
  background-color: rgb(134, 233, 200);
  color: black;
}

@keyframes float {
  0% {
    transform: translateY(-20px);
  }

  50% {
    transform: translateY(20px);
  }

  100% {
    transform: translateY(-20px);
  }
}

@keyframes swing {
  0%{
    transform: perspective(50px) rotateY(25deg);
  }

  50%{
    transform: perspective(50px) rotateY(-25deg);
  }

  100%{
    transform: perspective(50px) rotateY(25deg);
  }
}


 a{
   color: rgb(186, 59, 211);
 }

 a:visited{
   color: rgb(38, 153, 192)
 }

 a:hover{
   color: hotpink;
 }


div {
  max-width: 500px;
}

fieldset{
  border-color: rgb(169, 28, 197);
}

footer{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 10px;
   align-items: center;
   justify-content: center;
   margin-top: 25px;
}

h1{
  margin: 0;
  font-size: 15px;
}

 legend{
   font-family: 'oddballz';
   font-size: 15px;
   color: rgb(37, 36, 36)
 }

input[type="text"],
input[type="email"],
textarea {
  background-color: rgb(231, 185, 240);
  color: black;
  width: 95%;
  border: 1px solid #0a0a23;
}

.add-buttons{
  display: flex;
  justify-content: space-evenly;
  gap: 15%;
}

 #banner{
   margin-bottom: 5px;
   max-width: 500px;
   width: 95%;
   border: 5px solid rgb(169, 28, 197);
   /* transform: perspective(40px) rotateX(-2deg) translateY(10px); */
   box-shadow: 0px 10px 5px yellow;

 }

#bring {
  display: grid;
  justify-content: center;
  align-items: center;
}

#bring-box {
  width: 90vw;
  height: 160px;
  /* height: 300px; */
}

#bring-button {
	box-shadow: 3px 4px 0px 0px #8a2a21;
	background:linear-gradient(to bottom, #c62d1f 5%, #f24437 100%);
	background-color:#c62d1f;
	border-radius:18px;
	border:1px solid #d02718;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:14px;
	padding:7px 25px;
	text-decoration:none;
	text-shadow:0px 1px 0px #810e05;
}
#bring-button:hover {
	background:linear-gradient(to bottom, #f24437 5%, #c62d1f 100%);
	background-color:#f24437;
}
#bring-button:active {
	position:relative;
	top:1px;
}

.bye {
  display: none;
  visibility: hidden;
}

#cart{
  height: 30px;
}

#cart-box{
 display: flex;
 align-items: center;
 gap: 5px;
}

.cart-item{
  width: 15%;
  height: 75px;
}

#cart-number{
  font-size: 24px;
}

#click-to-add{
  display: flex;
  justify-content: center;
  color: rgb(168, 168, 11);
  /* background-color: #0a0a23; */
  font-family: "bybsy";
  font-size: 20px;
  height: 20px;
}

.corn {
  width: 6.25%;
  filter: invert(63%) sepia(88%) saturate(359%) hue-rotate(100deg) brightness(57%) contrast(86%);
}


#date-display{
  font-family: 'playwrite';
  font-size: 20px;
  display: flex;
  justify-content: end;
}

#dob-disp {
  height: 50px;
}

.dunkthank{
  width: 100%;
  height: 305px;
  border-radius: 15px;
}

#e-number{
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  color: #833dbf;
  font-size: 55px;
}

.e-score{
  font-size: 40px;
    display: flex;
  justify-content: center;
}

#ethics-score{
transform: perspective(400px) rotateY(10deg);
background: transparent;
box-shadow: -10px 5px 5px yellow;
}

#floating0 {
  position: relative;
  animation: float 3s ease-out infinite;
}

#floating1 {
  position: relative;
  animation: float 7s ease-in-out infinite;
}

#floating2 {
  position: relative;
  animation: float 1.5s ease-in-out infinite;
}

.floating3 {
  position: relative;
  animation: float 5s ease-in-out infinite;
}

#info{
  padding-left: 10px;
  padding-right: 10px;
  background-color: #600fa3;
  color: white;
}

.item {
  width: 33%;
  height: 150px;
}


.item-button {
	box-shadow: 0px 0px 0px 0px #3dc21b;
	background-color:#c46ff2;
	border-radius:42px;
	border:1px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Impact;
	font-size:20px;
	font-weight:bold;
	padding:10px 16px;
	text-decoration:none;
	text-shadow:0px 0px 8px #2f6627;
}
.item-button:hover {
	background-color:#8347b8;
}
.item-button:active {
	position:relative;
	top:1px;
}

#month-slider {
  /* writing-mode: vertical-lr; */
  width: 80%;
}

.not-it-box{
  height: 25px;
  display: flex;
  align-items: center;
}

#day-slider {
  width: 100%;
}

 #option{
  font-size: 10px;
 }

.personal {
  background-size: contain;
  background-color: rgba(255, 255, 255, 0.8);
  background-blend-mode: lighten;
}

#personal{
  border-radius: 8px;
  background-position: center top;
  border: 4px solid rgb(169, 28, 197);
}

.phone{
  font-size: 14px;
  font-style: italic;
  color: red;
}

.rsvp{
  transform: perspective(400px) rotateY(-10deg);
  box-shadow: 10px 5px 5px yellow;
}

.rsvp-head{
  color:#34d98f
}

.rsvp-size{
  font-size: 15px;
}

.shop-button-box{
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: space-between;
}

 #submit {
  transform: perspective(80px) rotateY(25deg);
  width:40%;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  -webkit-box-shadow: -15px -10px 4px #e388e3;
  -moz-box-shadow: -15px -10px 4px #e388e3;
  box-shadow: -15px -10px 4px #e388e3;
  color: #34d98f;
  font-size: 20px;
  background: #833dbf;
  padding: 10px 20px 10px 20px;
  text-decoration: none;

  position: relative;
  animation: swing 7s ease-in-out infinite;
}

#submit:hover {
  background: #600fa3;
  text-decoration: none;
    -webkit-box-shadow: -9px -10px 4px #e388e3;
  -moz-box-shadow: -9px -10px 4px #e388e3;
  box-shadow: -9px -10px 4px #e388e3;
}

#test {
  display: grid;
  justify-content: center;
}

#test-pic-box {
  display: flex;
  flex-flow: row wrap;
  width: 80vw;
  gap: 5px;
  overflow: hidden;
}
.test-pic {
  flex: 1 0 50%;
  max-width: 48%;
  max-height: 48%;
  width: 100px;
  height: 150px;
  object-fit: cover;
  border-radius: 12px;
  transition: all 1s;
}

.test-pic:hover {
  /* transform: scale(1.1); */
  rotate: 360deg;
  /* box-shadow: 0 0 115px rgb(101, 228, 101); */
}