/* General form settings */

label {
  font-family: "Poppins", sans-serif;
}

input,
select,
textarea {
  border: 1px solid #e8e8e8;
  border-radius: 5px;
  margin: 10px 10px 10px 0px;
  padding: 10px;
}

form {
  display: flex;
  justify-content: center;
}

textarea {
  field-sizing: content;
}

/* Ticket Form section */

.tickets {
  max-width: 1000px;
  margin: 50px auto;
  text-align: center;
  position: relative;
  top: 100px;
}

.ticket__fieldset {
  border: #fff;
  display: flex;
  text-align: left;
  flex-direction: column;
  background: #fff;
  padding: 20px;
  border-radius: 25px;
  width: 238px;
}

.ticket__fieldset > * {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ticket a {
  display: block;
  text-align: center;
  max-width: fit-content;
}

.tickets p {
  font-size: x-small;
  margin: auto;
}

/* Contact Form */

.contact {
  max-width: 1000px;
  margin: 50px auto;
  text-align: center;
  position: relative;
  padding-top: 50px;
}

.contact__fieldset {
  border: #fff;
  display: flex;
  text-align: left;
  flex-direction: column;
  background: #fff;
  border-radius: 25px;
  width: 238px;
}

.contact__fieldset > * {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.contacting {
  max-width: 1000px;
  margin: 30px auto;
  text-align: center;
  position: relative;
}

.contact a {
  display: block;
  text-align: center;
  max-width: fit-content;
}

.contact p {
  font-size: x-small;
  margin: auto;
}

/* Top Part */

.contact-top {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: auto;
  width: 100%;
  align-items: center;
  flex-wrap: wrap;
}

.tickets-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: top;
}

/* Bottom Part */

.contact-bottom {
  display: flex;
  justify-content: center;
  margin: auto;
  align-items: center;
  padding: 0px 50px 90px 50px;
}

.contact-bottom-text {
  max-width: 45ch;
}

.upcoming {
  display: none;
  flex-direction: row;
  justify-content: center;
  align-items: top;
  gap: 40px;
  margin: auto;
  width: 100%;
}

.upcoming img {
  max-width: 200px;
  height: 100%;
  position: relative;
  margin: auto;
  object-fit: cover;
  border-radius: 0px 25px 25px 25px;
}

.upcoming h3 {
  font-size: x-large;
}

/* Calendar */

/* NOTE: Can't figure out how to do calendar without JS.
This is now just a image that replaces where a calendar would be */

.calendar-container {
  height: 190px;
  width: 300px;
  margin: auto;
}

.calendar {
  position: relative;
  width: 300px;
  max-height: 100%;
  margin: auto;
  display: flex;
}

.calendar-mobile {
  width: 200px;
  height: 200px;
  position: relative;
  margin: auto;
}