@font-face {
  font-family: "Fall is coming";
  src: url(/fonts/FallIsComingRegular-Mx9B.ttf);
  src: url(/fonts/FIRACODE-REGULAR.TTF);
  src: url(/fonts/FIRACODE-BOLD.TTF);
  src: url(/fonts/FIRACODE-SEMIBOLD.TTF);
  src: url(/fonts/FIRACODE-MEDIUM.TTF);
}

body {
	background: #f5f5f5;
	height: 95%;
  margin: auto;
}

.wrapper {
  top: 10%;
  position: sticky;
  margin: auto;
  max-width: 95%;
  text-align: center;
}

.festival {
  color: #1e1e1e;
  font-family: "Fall is coming", "Open Sans", sans-serif;
  font-style: normal;
  font-weight: 500;
	text-align: center;
}

.date {
  color: #1e1e1e;
	font-family: "Open Sans", sans-serif;
	font-style: normal;
	font-weight: 500;
	text-align: center;
}

.bullet {
  color: #1e1e1e;
	font-family: "Open Sans", sans-serif;
	font-style: normal;
	font-weight: 500;
	text-align: center;
}

.details {
  font-family: "Open Sans", sans-serif;
  text-align: center;
  background-color: lightblue;
  margin: auto;
  padding: 15px 0;
  border-radius: 5px;
}

.clickme {
  cursor: pointer;
}

.form input {
    font-size: 16px;
    width: 60%;
    min-height: 44px;
    line-height: 28px;
    padding: 8px 16px;
    border: unset;
    border-radius: 4px;
    outline-color: rgb(84 105 212 / 0.5);
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
                rgba(0, 0, 0, 0) 0px 0px 0px 0px,
                rgba(0, 0, 0, 0) 0px 0px 0px 0px,
                rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
                rgba(0, 0, 0, 0) 0px 0px 0px 0px,
                rgba(0, 0, 0, 0) 0px 0px 0px 0px,
                rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

input[type="submit"] {
    background-color: rgb(84, 105, 212);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
                rgba(0, 0, 0, 0) 0px 0px 0px 0px,
                rgba(0, 0, 0, 0.12) 0px 1px 1px 0px,
                rgb(84, 105, 212) 0px 0px 0px 1px,
                rgba(0, 0, 0, 0) 0px 0px 0px 0px,
                rgba(0, 0, 0, 0) 0px 0px 0px 0px,
                rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}


/* Extra small devices (phones, 600px and down)*/
@media only screen and (max-width: 600px) {
  .festival {font-size: 45pt;}
  .date {font-size: 30pt;}
  .bullet {font-size: 30pt;}
  .details { width: 95%; }
}

/* Small devices (portrait tablets and large phones, 600px and up)*/
@media only screen and (min-width: 600px) {
  .festival {font-size: 40pt;}
  .date {font-size: 25pt;}
  .bullet {font-size: 25pt;}
  .details { width: 75%; }
  .form input {
      font-size: 16px;
      width: 60%;
      min-height: 44px;
  }
}

/* Medium devices (landscape tablets, 768px and up)*/
@media only screen and (min-width: 768px) {
  .festival {font-size: 40pt;}
  .date {font-size: 25pt;}
  .bullet {font-size: 25pt;}
  .details { font-size: 25pt; width: 95%; }
  .form input {
      font-size: 25px;
      width: 40%;
      min-height: 60px;
  }
}

@media only screen and (min-width: 1024px) {
  .festival {font-size: 35pt;}
  .date {font-size: 20pt;}
  .bullet {font-size: 20pt;}
  .details { font-size: 20pt; width: 85%; }
  .form input {
      font-size: 20pt;
      width: 60%;
      min-height: 50px;
  }
}

@media only screen and (min-width: 1300px) {
  .festival {font-size: 35pt;}
  .date {font-size: 20pt;}
  .bullet {font-size: 20pt;}
  .details { font-size: 20pt; width: 70%; }
  .form input {
      font-size: 20px;
      width: 60%;
      min-height: 50px;
  }
}

@media only screen and (min-width: 1500px) {
  .festival {font-size: 35pt;}
  .date {font-size: 20pt;}
  .bullet {font-size: 20pt;}
  .details { font-size: 20pt; width: 60%; }
  .form input {
      font-size: 20pt;
      width: 60%;
      min-height: 44px;
  }
}