html * {
  transition: 0.5s ease;
  scroll-behavior: smooth;
}

body {
  /* background-color: #fffef7; */
  background-color: rgb(250, 247, 244);
  color: #323232;
  color: #191919;
  width: 100vw;
  height: fit-content;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin: 0;
  animation-name: fadeIn;
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  /* cursor: url('https://64.media.tumblr.com/tumblr_m98z134kHu1qid2nw.gif'), auto; */
  cursor: url('https://64.media.tumblr.com/324fa724affe7b26e1ef95991865f512/56331ea50f5a5fca-b4/s75x75_c1/9821342e27e172d7628e1c17cab0758cf22ef9a3.gifv'),
    auto;

  /* font-family: 'panoptica', sans-serif;
  font-weight: 400;
  font-style: normal; */

  /* font-family: 'panoptica-script', sans-serif;
  font-weight: 400;
  font-style: normal; */

  /* this is the goofy one we were using */
  /* font-family: 'ff-providence-sans-web-pro', sans-serif;
  font-weight: 700;
  font-style: normal; */

  /* font-family: 'gryphius-mvb', serif;
  font-weight: 400;
  font-style: normal;
  font-size: large; */

  font-family: 'etna', serif;
  font-weight: 100;
  font-style: normal;

  /* font-family: 'gryphius-mvb', serif;
  font-weight: 400;
  font-style: italic; */

  /* font-family: 'gryphius-mvb-small-caps', serif;
  font-weight: 400;
  font-style: normal; */
}

b {
  font-family: 'etna', serif;
  font-weight: 700;
  font-style: normal;
}

.navbar {
  /* font-family: 'gryphius-mvb', serif;
  font-weight: 400;
  font-style: italic; */

  font-family: 'etna', serif;
  font-weight: 100;
  font-style: italic;

  right: 5vw;
  top: 2.5vh;
  position: fixed;
  display: flex;
  flex-direction: row;
  gap: 40px;
}

.nav-link,
.nav-link:active,
.nav-link:visited {
  text-decoration: none;
  color: #419d77;
}

.main {
  margin-top: 15vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 45vw;
}
.container {
  padding: 100px;
  /* margin-bottom: 200px; */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  padding: 0 100px 100px 100px;
  /* margin-bottom: 200px; */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rsvp-header {
  padding: 20px;
  /* margin-bottom: 200px; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.acebee {
  /* font-family: 'bd-supper', sans-serif;
  font-weight: 700;
  font-style: bold;
  text-transform: uppercase; */

  /* this is the goofy one we were using */
  font-family: 'ff-providence-sans-web-pro', sans-serif;
  font-weight: 700;
  font-style: normal;

  /* font-family: 'etna-xx-condensed', serif;
  font-weight: 700;
  font-style: normal; */

  /* font-family: 'etna', serif;
  font-weight: 100;
  font-style: italic; */

  /* font-family: 'bd-caramel-variable', sans-serif;
  font-variation-settings: 'BUBL' 300; */
  color: #f98a86;
  font-size: 70px;
}

.acebee-tagline {
  /* font-family: 'gryphius-mvb', serif;
  font-weight: 400;
  font-style: italic;
  font-size: x-large; */
  padding: 0 10vw 0 10vw;
  text-align: center;
  font-family: 'etna', serif;
  font-weight: 100;
  font-style: italic;
  font-size: large;
}

.header {
  /* font-family: 'bd-supper', sans-serif;
  font-weight: 700;
  font-style: normal;
  text-transform: capitalize; */

  /* font-family: 'bd-caramel-variable', sans-serif;
  font-variation-settings: 'BUBL' 300; */
  font-size: x-large;
  color: #f3816d;

  font-family: 'ff-providence-sans-web-pro', sans-serif;
  font-weight: 700;
  font-style: normal;

  padding: 20px;
  /* font-family: 'etna', serif;
  font-weight: 100;
  font-style: italic; */
}

.hero {
  img {
    width: 40vw;
  }
  margin-bottom: 20px;
}

.rsvp-button,
.rsvp-button:visited {
  font-family: 'ff-providence-sans-web-pro', sans-serif;
  font-weight: 700;
  font-style: bold;
  /* text-transform: uppercase; */
  font-size: 20px;
  text-decoration: none;
  color: #fff8da;
  cursor: pointer;
}

.button {
  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 100px;
  background-color: #419d77;
  margin: 40px;
  border: none;
}

.button:hover {
  background-color: #6abe87;
  .rsvp-button {
    font-size: 24px;
  }
}

a {
  color: #419d77
}

.body-text {
  padding: 10px;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.q {
  color: #307592;
}

form {
  display: flex;
  flex-direction: column;
}

label {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  margin-top: 10px;
}

.checkboxes {
  margin: 20px;
  label {
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
    gap: 20px;
    color: #ff9d96;
  }
}

.disclaimer {
  font-size: small;
  margin-bottom: 20px;
  color: #007c7e;
}

input[type='checkbox'].fanfic-check {
  /* Double-sized Checkboxes */
  -ms-transform: scale(4); /* IE */
  -moz-transform: scale(4); /* FF */
  -webkit-transform: scale(4); /* Safari and Chrome */
  -o-transform: scale(4); /* Opera */
  transform: scale(4);
  padding: 20px;
  margin-left: 20px;
  margin-right: 20px;
  z-index: -1;
}

input[type='checkbox'] {
  /* Double-sized Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  transform: scale(2);
  padding: 10px;
}

#dresscode-img {
  width: 30vw;
}

@media only screen and (max-width: 1024px) /* mobile */ {
  .main {
    margin-top: 15vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    justify-content: center;
  }

  .container {
    .body-text {
      padding: 10px;
      display: flex;
      flex-direction: column;
      width: 85vw;
    }
    padding: 100px 0 100px 0;
  }

  .navbar {
    top: 0;
    right: auto;
    width: 100vw;
    justify-content: center;
    flex-wrap: wrap;
    position: fixed;
    display: flex;
    flex-direction: row;
    gap: 40px;
    padding: 2.5vh;
    background-color: rgb(250, 247, 244);
  }

  .title {
    padding: 0 0 100px 0;
  }
  .hero {
    img {
      width: 100vw;
    }
  }

  #dresscode-img {
    width: 100vw;
  }

  .header {
    font-size: xx-large;
  }

  .acebee {
    text-align: center;
  }

  .rsvp-header {
    padding: 0;
  }

  .form {
    padding: 10vw;
  }
}

.sillyfont {
  font-family: 'gryphius-mvb', serif;
  font-weight: 400;
  font-style: normal;
  font-size: large;
}