@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.cdnfonts.com/css/better-grade');

@font-face {
    font-family: 'swaderyregular';
    src: url('swadery_demo-webfont.woff2') format('woff2'),
         url('swadery_demo-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

h1 {
font-family: 'swaderyregular', Arial, sans-serif;
font-weight:normal;
font-style:normal;
}

.hero-text {
  font-family: 'Better Grade', sans-serif;
}

body {
  color: white;
}

.hero {
    width: 70vh;
    height: 100%;
    margin-top: 20vh;
}

.contact-button {
  position: fixed;
  background-color: #FFB900;
  z-index: 999;
  right: 5%;
  bottom: 5%;
  height: 60px;
  width: 60px;
  border-radius: 100%
}

.olive {
  color: #90a594;
}

.cream {
  color: #f7eedb;
}

.peach {
  color: #f8d7d0;
}

.lightpink {
  color: #d5adb5;
}

.middlepink {
  color: #c1929c;
}

.darkpink {
  color: #ab7e83;
}

.darkgreen {
  color: #243233;
}

.fixedContainer {
  position: absolute;
  right:  10%;
  bottom: 25%;
}

.hero-image {
  background-image: url("./img/hero.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  min-height: 100vh; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

.about-image {
  background-image: url("./img/background.svg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

.rsvp-banner {
  background-image: url("./img/rsvphome.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  min-height: 100vh; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  z-index: 20;
}

.rsvp-table {
  background-image: url("./img/rsvpform.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  background-attachment: fixed;
}

.rsvp-hero {
  background-image: url("./img/rsvpform.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  min-height: 100vh; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  z-index: 20;
}

.storie-banner {
  background-image: url("./img/onsstorie.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  background-color: #f7eedb; /* Used if the image is unavailable */
  min-height: 100vh; /* You must set a specified height */
  background-position: right; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  z-index: 20;
}

.storie-hero {
  background-image: url("./img/onsstorie.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  background-color: #f7eedb; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  background-attachment: fixed;
}

.akkomodasie-banner {
  background-image: url("./img/akkomidasiehome.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  min-height: 100vh; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  z-index: 20;
}

.venue-banner {
  background-image: url("./img/venuebg.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  min-height: 100vh; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  z-index: 20;
}

.qa-banner {
  background-image: url("./img/qa.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  background-attachment: fixed;
}

.min-60 {
  min-height: 415px;
}

.buttonb {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
}