/* Colors
     background: #ece3d6
     lilac: #8d7e98
     dark green: #4e5b11
     heart pink: #dea474
*/

@font-face {
    font-family: 'Campground';
    src: url('static/CampgroundFreeDemo-regular.woff2') format('woff2');
 }

@font-face {
   font-family: 'Posterable';
   src: url('static/POSTERABLE.ttf') format('truetype');
}

html {
   height: 100vh;
}

body {
   background-color: #ece3d6;
   padding-left: 20%;
   padding-right: 20%;
   font-family: 'Posterable';

   background-image: url(static/mountains_light.png);
   background-position: bottom;
   background-size: 100vw;
   background-repeat: no-repeat;
   background-attachment: fixed;

   display: flex;
   flex-direction: column;
   align-items: center;
}


.nav {
   color: #4e5b11;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
   text-align: center;
   margin-bottom: 40px;

   color: #4e5b11;
   font-size: 25px;
   margin: 5px;
}

.currentNav {
   display: flex;
   flex-direction: row;
   justify-content: center;
   z-index: 999;
   background-color: #ece3d600;
}

@media (max-width: 768px) {
   .currentNav {
      background-color: #ece3d6;
   }
}

.expandedNav {
   display: flex;
   flex-direction: column;
   position: absolute;
   transform: translateY(35px);
   background-color: #ece3d6e3;
   border-radius: 20px;
   padding-inline:30px;
}

@media (max-width: 768px) {
   .expandedNav {
/*      width:100%;*/
   }
}

.hamburger {
   padding-top: 2px;
   color: #4e5b11;
}

.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
  transform: translateY( -10px );
}

h1 {
   font-family: 'Campground';
   margin:0px;
   font-weight: normal;
   font-style: normal;
   font-size: 120px;
   text-align: center;
   color: #8d7e98;
}

.namebanner {
   position: relative;
   text-align: center;
   display: flex;
   justify-content: center;
   margin-bottom: 20px;
   flex-direction: column;
}

.discoStars {
   margin-bottom: 20px;
}

.bannerText {
   font-family: 'Posterable';
   color: #8d7e98;

   width:100%;
   position:absolute;
   bottom: 0;
}

.bannerText .names {
   font-family: 'Campground';
   margin:0px;
   font-weight: normal;
   font-style: normal;
   font-size: 10vw;
   color: #8d7e98;
}

.bannerText .bannerDate {
   font-size: 2vw;
   margin-top: -20px;
   margin-bottom: 5px;
}

.bannerText .bannerVenue {
   font-size: 1.5vw;
   letter-spacing: .1vw;
}

@media (max-width: 768px) {
   body {
      padding-left: 0px;
      padding-right: 0px;
   }
   .bannerText .names {
      font-size: 80px;
   }
   .bannerText .bannerDate {
      font-size: 20px;
   }
   .bannerText .bannerVenue {
      font-size: 12px;
   }
   .discoStars {
      margin-bottom: 30px;
   }
}


.basicinfo {
   text-align: center;
   color: #8d7e98;
}

.hearts {
   height: 20px;
   margin: 5px;
}

.checkboxes{
   height: 25px;
}

.content {
   max-width: 500px;
}

.basicinfo .date {
   font-size: 50px;
   margin-bottom: 20px;
   font-family: 'Posterable';
}

.basicinfo .std {
   font-size: 35px;
   color: #4e5b11;
   margin-bottom: 10px;
}

.basicinfo .venue {
   font-size: 20px;
   letter-spacing: 2px;
}

.dancingshoes {
   color: #4e5b11;
   font-size: 25px;
   margin-top: 40px;

   text-align: center;
}


h2 {
   font-size: 20px;
   color: #4e5b11;
   text-align: center;
   text-decoration: underline;
   text-decoration-color: #dea474;
   text-decoration-thickness: 3px;

   letter-spacing: 1px;
}

p {
   font-size: 18px;
   line-height: 1.1;
   text-align: center;
   color: #4e5b11;
}

p.moreInformation {
   color: #657714
}

p.moreInformation .emphasis {
   text-decoration: underline;
   text-decoration-color: #dea474;
   text-decoration-thickness: 3px;
}

p.moreInformation .link{
   cursor: pointer;
}

p.moreInformation .time{
   text-decoration: underline;
   text-decoration-thickness: 2px;
}

p.moreInformation .ceremonyTime {
   font-size: 30px;
   text-decoration: underline;
   text-decoration-thickness: 2px;
   text-shadow: 0px 0px 10px #dea474;
}

ul {
   font-size: 18px;
   line-height: 1.1;
   text-align: left;
   color: #657714;
   margin-inline: 4em
}

@media (max-width: 768px) {
   ul {
      margin-inline-start: 0em;
      margin-inline-end: 0em;
      padding-inline: 25px
   }
}

img{
   max-width: 100%;
/*   border-radius: 15%;*/
}

img.maps {
   border: 2px solid #8d7e98;
   margin-inline: -1px;
}

a, .clickable {
  color: #8d7e98;
  text-decoration: none;
}

.clickable:hover{
   cursor: pointer;
}

a:hover, a:active {
   text-decoration: underline;
   text-decoration-color: #dea474;
   text-decoration-thickness: 3px;
}

.selected {
   cursor: pointer;
   background-color: #dea47470;
   border-radius: 20px;
}

a.navigation {
   color: #4e5b11;
   font-size: 20px;
   margin: 5px;
}

a.navigation.currentpage {
   text-decoration: underline;
   text-decoration-color: #dea474;
   text-decoration-thickness: 3px;
}

.rsvpForm {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.rsvpWelcome {
   font-size: 30px;
   margin-top: 0px;
}

.rsvpPageNavigation {
   display: flex;
   flex-direction: row;
   justify-content: center;
}

.rsvpNavigationChoices {
   font-size: 20px;
   line-height: 1.1;
   color: #4e5b11;
   padding: 10px;
   -webkit-tap-highlight-color: transparent;
}

.navDisabled {
   opacity: 50%;
   cursor: auto;
}

.navEnabled {
   opacity: 100%;
   cursor: pointer;
}

.rsvpChoices {
   font-size: 18px;
   line-height: 1.1;
   color: #4e5b11;
   display: flex;
   flex-direction: row;
   justify-content: center;
}

.eventsChoices {
   font-size: 18px;
   line-height: 1.4;
   color: #4e5b11;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.choice {
   padding: 5px;
   padding-inline: 10px;
   margin: 2px;
   -webkit-tap-highlight-color: transparent;
}

@media (min-width: 768px) {
   .choice:hover {
      background-color: #dea47470;
      border-radius: 20px;
   }
}

input.inviteCodeInput {
   font-size: 35px;
   align-items: center;
   text-align: center;
   border-radius: 25px;
   background-color: #fffaf3;
   color: #dea474;
   border-width: 0px;
   font-family: 'Posterable';
   letter-spacing: 5px;
   height: 40px;
   width: 200px;
   outline: none;
   padding-top:5px;
}

input.shortAnswer {
   font-size: 18px;
   align-items: center;
   text-align: center;
   border-radius: 25px;
   background-color: #fffaf3;
   color: #dea474;
   border-width: 0px;
   font-family: 'Posterable';
   letter-spacing: 1px;
   height: 40px;
   width: 600px;
   outline: none;
   padding-top: 5px;
   padding-inline: 10px;
}

@media (max-width: 768px) {
   input.shortAnswer {
      padding-inline: 0px;
      width: 100%;
   }
}

.inviteCodeDiv {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.eventsSectionDiv {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}

.guestsSectionDiv {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}

.multiSelectItem {
   display: flex;
   flex-direction: row;
   align-items: center;
}

.multiSelectHearts {
   height: 15px;
}

.rsvpButtonDiv {
   display: flex;
   justify-content: space-evenly;
   padding-top: 50px;
   flex-direction: row;
   align-items: center;
   padding-bottom:20px;
}

button.submitRSVP {
   font-size: 35px;
   background-color: #fffaf3;
   color: #dea474;
   height: 40px;
   width: 200px;
   outline: none;
   font-family: 'Posterable';
   border-width: 0px;
   padding-top: 5px;
   border-radius: 25px;
   cursor: pointer;
}

@media (max-width: 768px) {
   button.submitRSVP {
      width: 48%;
   }
}

button.submitRSVP.disableButton {
   cursor: auto;
   opacity: 50%;

}

table {
   font-size: 18px;
   color: #4e5b11;
}

table.cabinData {
   border-radius: 20px;
   padding: 10px;
   width: 700px;
}



table.cabinData.reserved {
   opacity: 60%;
   background-color: #8d7e9800;
}

@media (max-width: 768px) {
   table.cabinData {
      padding-inline: 5px;
      width: 100%;
   }
}

@media (min-width: 768px) {
   table.cabinData.bookable:hover {
      background-color: #dea47470;
      cursor: pointer;
   }
}

table.cabinData.selectedCabin {
   background-color: #dea47470;
}

.topRow {
   letter-spacing: .5px;
   vertical-align: bottom;
   line-height: 1.1;
}

.descriptionRow {
   font-size: 16px;
/*   height: 40px;*/
   text-align: left;
   line-height: 1.1;
   letter-spacing: .5px;
   vertical-align: top;
}

.guestReservedBy {
   font-size:12px; 
   line-height: 1.0;
}

.zoomMap {
   width: 500px;
}