/* these are global css variables */
:root {
  --dow1: 0;
  /* used to position the column for the first day of the month on the calendar pages */
  --dow2: 0;
}

* {
  box-sizing: border-box;
  /* means padding and border are included in the width and height */
  margin: 0;
  /* make sure we start from scratch */
  padding: 0;
  border: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  overflow: scroll;
  font-size: 15px;
}

.gridArea { /* all grid area divs eventually to have this class */ 
  margin: 3px;
  border-width: 3px;
  padding: 10px;
  border-style: double;
  border-color: antiquewhite;
  gap: 1px;
  background-color: aliceblue;
  justify-content: center;
  /* x axis */
  align-content: center;
  /* y axis */
}

/* main container */
.gridContainer {
  display: grid;
  grid-template-columns: 250px auto 250px;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "mainPhoto houseDesc contactData"
    "nav nav nav"
    "pageContent pageContent pageContent";
  margin: 3px;
  border-width: 3px;
  padding: 10px;
  border-style: double;
  border-color: antiquewhite;
  gap: 1px;
  background-color: aliceblue;
  justify-content: center;
  /* x axis */
  align-content: center;
  /* y axis */
}

.gridContainer>div {
  margin: 3px;
  border-color: antiquewhite;
  border-width: 3px;
  border-style: groove;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px;
}

.contactData {
  grid-area: contactData;
}

.houseDesc {
  grid-area: houseDesc;
}

.mainPhoto {
  /* main photo on the main page */
  grid-area: mainPhoto;
  display: flex;
  justify-content: center;
  /* x axis */
  align-content: center;
  /* y axis */
}

/* Add a background color to the navigation bar*/
.navDiv {
  grid-area: nav;
  grid-column: 1 / span 3;
  background-color: rgba(252, 241, 168, 0.658);
  overflow: hidden;
}

.pageContent {
  grid-area: pageContent;
  grid-column: 1 / span 3;
}

/* Style the links inside the navigation bar */
.nav a {
  float: left;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change the color of the nav links on hover */
.nav a:hover {
  background-color: khaki;
  color: whitesmoke;
}

/* photo gallery page */
.photoGallery {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "pic1 pic2 pic3 pic4"
    "pic5 pic6 pic7 pic8"
    "pic9 pic10 pic11 pic12"
    "picControls picControls picControls picControls";
  margin: 3px;
  border-width: 3px;
  padding: 10px;
  border-style: double;
  border-color: antiquewhite;
  gap: 1px;
  background-color: aliceblue;

}

.pic {
  display: flex;
  position: relative;
  /* so the div text goes on top */
  justify-content: center;
  /* x axis */
  align-content: center;
  /* y axis */
  margin: 3px;
}

.picText {
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: bisque;
  text-align: center;
}

#pic1 {
  grid-area: pic1;
  content-visibility: auto;
}

#pic2 {
  grid-area: pic2;
  content-visibility: auto;
}

#pic3 {
  grid-area: pic3;
  content-visibility: auto;
}

#pic4 {
  grid-area: pic4;
  content-visibility: auto;
}

#pic5 {
  grid-area: pic5;
  content-visibility: auto;
}

#pic6 {
  grid-area: pic6;
  content-visibility: auto;
}

#pic7 {
  grid-area: pic7;
  content-visibility: auto;
}

#pic8 {
  grid-area: pic8;
  content-visibility: auto;
}

#pic9 {
  grid-area: pic9;
  content-visibility: auto;
}

#pic10 {
  grid-area: pic10;
  content-visibility: auto;
}

#pic11 {
  grid-area: pic11;
  content-visibility: auto;
}

#pic12 {
  grid-area: pic12;
  content-visibility: auto;
}

#picControls {
  grid-area: picControls;
}

/* ends the photo gallery page, but there is button stuff below that applies */

table {
  width: 100%;

}

table,
th,
td {
  border-right: 1px solid black;
  text-align: center;
  vertical-align: top;
  justify-content: center;
}

input {
  width: 90%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.button {
  width: 140px;
  height: 45px;
  text-transform: none;
  background-color: beige;
  border: 1px solid black;
  border-radius: 45px;
  margin: 1px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
}

.button:hover {
  background-color: khaki;
  box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
  color: black;
  transform: translateY(-7px);
}

#buttonNext {
  float: right;
}

/* about forms */

/* map uses grids */
.map-grid-container {
  display: grid;
  justify-content: space-evenly;
  column-gap: 5px;
  row-gap: 5px;
  grid-template-columns: 600px 600px;
  grid-template-rows: 600px;
  padding: 5px;
}

.map-grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 2px;
  text-align: center;
}

/* # hashes are id's */
#services {
  text-align: center;
}

#contact {
  border: 1px solid black;
}

#logo {
  width: 1000px;
  height: 200px;
}

#messageSent {
  color: black;
  background-color: burlywood;
  border: darksalmon;
  font-size: larger;
  font-weight: bolder;
  text-shadow: 4px 4px 5px rgba(255, 0, 0, 0.24);
}

#map-canvas {
  height: 100%;
  width: 100%;
}

/* calendar stuff */
.calendar {
  display: grid;
  grid-template-rows: 80px 50px auto auto auto;
  grid-template-columns: 1fr, 1fr, 1fr;
  grid-template-areas:
    "month1 month2 contact"
    "dow1 dow2 contact"
    "date1 date2 contact"
    "key key contact"
    "info info contact";
  margin: 3px;
  border-width: 3px;
  padding: 10px;
  border-style: double;
  border-color: antiquewhite;
  gap: 1px;
  background-color: aliceblue;
  justify-content: center;
  /* x axis */
  align-content: center;
  /* y axis */
}

.calendar>div {
  margin: 3px;
  border-color: antiquewhite;
  border-width: 3px;
  border-style: groove;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px;
}

#monthYear1 {
  grid-area: month1;
  text-align: center;
  font-size: 15px;
}

#dow1 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-area: dow1;
  text-align: center;
  font-size: 15px;
}

#dateDiv1 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-area: date1;
}

#monthYear2 {
  grid-area: month2;
  text-align: center;
  font-size: 15px;
}

#dow2 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-area: dow2;
  text-align: center;
  font-size: 15px;
}

#dateDiv2 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-area: date2;
}

/* Position the first date of the month against its dow */
#dateDiv1 button:first-child {
  grid-column: var(--dow1);
}

#dateDiv2 button:first-child {
  grid-column: var(--dow2);
}

.buttonSelected {
  background-color: red;
}

#contactForm {
  grid-area: contact;
  grid-template-rows: 1 / span 4;
}

#infoText {
  grid-area: info;
  text-align: center;
  font-size: 15px;
}

#infoTextLabel {
  padding: 5px;
  border-radius: 5px;
}

/* animation stuff for the interstitial */
/* The animation code */
@keyframes example {
  25% {
    opacity: 0
  }
}

.interstitial {
  display: flex;
  align-items: center;
  justify-content: center;
  animation-name: example;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

#loading {
  padding: 10px;
  border-radius: 8px;
  border-style: dashed;
  border-width: 2px;
  border-color: black;
  text-align: center;
  background-color: khaki;
  width: 350px;
  height: 150px;
  align-items: center;
  justify-content: center;
}

/* colour-key stuff on the calendar page */
#key {
  grid-area: key;
  grid-column: 1 / span 2;
  font-size: 15px;
}

#unoccupied {
  background-color: beige;
}

#occupied {
  background-color: lightblue;
}

/* form stuff */
#contactForm {
  font-size: 15px;
}

#comments {
  border-style: dotted;
  border-width: 1px;
  border-color: grey;
}

#labelFromDate {
  /* I show errors here */
  font-size: 10px;
  font-style: italic;
  padding: 3px;
  border-width: 1px;
  border-color: black;
  border-radius: 3px;
}

.formItemSelected {
  border-color: black;
  border-width: 3px;
  border-style: double;
}

/* overview page */
#overviewContent {
  text-align: center;
  font-size: 15px;
}

/* facilities page */
/* Style the buttons that are used to open and close the accordion panel */
.facilityContainer {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr, 1fr, 1fr;
  grid-template-areas:
    "buttons photos text"
    "buttons dots text";
  margin: 3px;
  border-width: 3px;
  padding: 10px;
  border-style: double;
  border-color: antiquewhite;
  gap: 1px;
  background-color: aliceblue;
  justify-content: center;
  /* x axis */
  align-content: center;
  /* y axis */
}

#facilitiesButtons {
  display: grid;
  grid-area: buttons;
  margin: 3px;
  border-width: 3px;
  padding: 10px;
  border-style: double;
  border-color: antiquewhite;
  gap: 1px;
  background-color: aliceblue;
  justify-content: center;
  /* x axis */
  align-content: center;
  /* y axis */
}

#facilitiesImages {
  grid-area: photos;
  margin: 3px;
  border-width: 3px;
  padding: 10px;
  border-style: double;
  border-color: antiquewhite;
  gap: 1px;
  background-color: aliceblue;
  justify-content: center;
  /* x axis */
  align-content: center;
  /* y axis */
}

#facilitiesText {
  grid-area: text;
  margin: 3px;
  border-width: 3px;
  padding: 10px;
  border-style: double;
  border-color: antiquewhite;
  gap: 1px;
  background-color: aliceblue;
  justify-content: center;
  /* x axis */
  align-content: center;
  /* y axis */
  font-size: 15px;
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border-width: 3px;
  border-style: groove;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.accordion:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

#facilities1 {
  grid-area: accordion1;
  font-size: 15px;
}

#facilities2 {
  grid-area: accordion2;
  font-size: 15px;
}

/* carousel stuff */
/* Slideshow container */
.slideshowContainer {
  grid-area: photos;
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numberText {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  grid-area: dots;
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active,
.dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: .4
  }

  to {
    opacity: 1
  }
}

/* map page */

.mapPage {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr, 1fr;
  grid-template-areas:
    "mapText mapGoogle";
  margin: 3px;
  border-width: 3px;
  padding: 10px;
  border-style: double;
  border-color: antiquewhite;
  gap: 1px;
  background-color: aliceblue;
  justify-content: center;
  /* x axis */
  align-content: center;
  /* y axis */
}

.mapNarrative {
  grid-area: mapText;
  display: flex;
  text-align: center;
  /* align-items: center; */
  justify-content: center;
  margin: 3px;
  border-width: 3px;
  padding: 10px;
  border-style: double;
  border-color: antiquewhite;
}

.mainMap {
  grid-area: mapGoogle;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 3px;
  border-width: 3px;
  padding: 10px;
  border-style: double;
  border-color: antiquewhite;
}

/* guest area, including login page */

.loginPage {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr, 1fr;
  grid-template-areas:
    "loginText loginForm"
    "loginFailText loginForm";
  margin: 3px;
  border-width: 3px;
  padding: 10px;
  border-style: double;
  border-color: antiquewhite;
  gap: 1px;
  background-color: aliceblue;
  justify-content: center;
  /* x axis */
  align-content: center;
  /* y axis */
}

.loginText {
  grid-area: loginText;
  display: flex;
  text-align: center;
  /* align-items: center; */
  justify-content: center;
  margin: 3px;
  border-width: 3px;
  padding: 10px;
  border-style: double;
  border-color: antiquewhite;
}

.loginFailText {
  grid-area: loginFailText;
  display: flex;
  text-align: center;
  /* align-items: center; */
  justify-content: center;
  margin: 3px;
  border-width: 3px;
  padding: 10px;
  border-style: double;
  border-color: red;
}

.loginForm {
  grid-area: loginForm;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 3px;
  border-width: 3px;
  padding: 10px;
  border-style: double;
  border-color: antiquewhite;
}

.guestAreaOptions {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr, 1fr, 1fr;
  grid-template-areas:
    "guestOption1 guestOption2 guestOption3"
    "guestOption4 guestOption5 guestOption6";
  margin: 3px;
  border-width: 3px;
  padding: 10px;
  border-style: double;
  border-color: antiquewhite;
  gap: 1px;
  background-color: aliceblue;
  justify-content: center;
  /* x axis */
  align-content: center;
  /* y axis */
}

#guestOption1 {
  grid-area: guestOption1;
}

#guestOption2 {
  grid-area: guestOption2;
}

#guestOption3 {
  grid-area: guestOption3;
}

#guestOption4 {
  grid-area: guestOption4;
}

#guestOption5 {
  grid-area: guestOption5;
}

#guestOption6 {
  grid-area: guestOption6;
}

.guestOption {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 3px;
  border-width: 3px;
  padding: 10px;
  border-style: double;
  border-color: antiquewhite;
}

/* these are displayed once an option has been chosen */
.guestAreaOptionPage {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr, 1fr, 250px;
  grid-template-areas:
    "optionText optionContent backBtn";
}

#guestAreaOptionPageText {
  grid-area: optionText;
}

#guestAreaOptionPageContent {
  grid-area: optionContent;
}

#guestAreaOptionPageBack {
  grid-area: backBtn;
}