main.css

body {
  background-image: url('beach.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}

.navMenu {
  background-color: #519eaf;
  color: floralwhite;
  font-family: 'Nobile', sans-serif;
  font-size: 20px;
  opacity: 0.9;
}

.palmTree {
  width: 30px;
  height: 25px;
}

.menuOption {
  cursor: pointer;
}

.menuOption a {
  cursor: pointer;
  color: floralwhite;
  font-family: 'Nobile', sans-serif;
  font-size: 20px;
}

.menuOption:hover a {
  color: #e6e6e6c7;
  text-decoration: none;
}

.menuOption:hover {
  color: #e6e6e6c7;
}

.weatherNphotos {
  margin-top: 30px;
}

.weatherApp {
  font-family: 'Nobile', sans-serif;
  background-color: #539faf30;
  color: floralwhite;
  border: 2px solid #4293a933;
}

.locationPhotos {
  color: floralwhite;
  font-family: 'Nobile', sans-serif;
}

.btnCollection {
  font-family: 'Nobile', sans-serif;
  color: floralwhite;
  border: 0px;
  background-color: #469aac;
}

.btnCollection:hover {
  background-color: floralwhite;
  color: #519eaf;
}

.carouselImgs {
  border-radius: 10px;
  width: 250px;
  height: 170px;
}

.bookTrip {
  background-color: #96b9cc6b;
  display: none;
  box-shadow: 1px 1px 5px 1px darkgrey;
  color: #e2eae7;
  text-shadow: 1px 1px #519eaf;
  margin-bottom: 5px;
}

.tripSelector {
  font-size: 20px;
  font-family: 'Nobile', cursive;
  background-color: #469aac99;
  color: floralwhite;
  border-style: solid;
  border-color: floralwhite;
  border-radius: 4px;
  border-width: 2px;
  padding: 5px;
}

.travelersDiv {
  font-size: 20px;
  color: #e2eae7;
  font-family: 'Nobile', cursive;
  text-shadow: 1px 1px #469aac99;
}

.travelersInput {
  background-color: #519eafbf;
  border-radius: 7px;
  text-align: center;
  color: floralwhite;
  border-color: floralwhite;
  border-style: solid;
}

.toolTip {
  position: absolute;
  left: 51%;
  top: 37%;
  font-size: 20px;
  color: red;
  display: none;
  animation: fadeOutWarning 3s infinite alternate;
}

@keyframes fadeOutWarning {
  0% {
    opacity: 0.9;
  }
  25% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.4;
  }
  75% {
    opacity: 0.2;
  }
  100% {
    opacity: 0.0;
  }
}

@keyframes fadeInBook {
  0% {
    opacity: 0.0;
  }
  25% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.7;
  }
  100% {
    opacity: 0.9;
  }
}

.closingButton {
  font-size: 20px;
  display: flex;
  align-items: center;
}

.closingButton:hover {
  color: darkred;
  transition: color;
  transition-timing-function: ease-in;
  cursor: pointer;
}

.userNameInputBox {
  animation: 0.6s inputBoxAnimation forwards;
  transition: animation;
  transition-timing-function: ease-in-out;
}

.userNameInputBox:hover {
  box-shadow: 1px 1px 2px 1px lightgrey;
  box-sizing: border-box;
  border: 1px solid darkgrey;
}

.userNameInfoRow {
  font-size: 20px;
}

@keyframes inputBoxAnimation {
  0% {
    width: 0%;
    opacity: 0%;
  }
  25% {
    width: 25%;
    opacity: 25%;
  }
  50% {
    width: 50%;
    opacity: 50%;
  }
  75% {
    width: 75%;
    opacity: 75%;
  }
  100% {
    width: 100%;
    opacity: 100%;
  }
}

.bookTripSubmit {
  font-family: 'Nobile';
  font-size: 22px;
  text-shadow: 1px 2px #4c829f;
  background-color: #4c9aab;
  text-align: center;
  box-shadow: 1px 2px 10px darkgrey;
}

.submitCloserButton {
  display: none;
  float: right;
  font-size: 30px;
  cursor: pointer;
}

.submitCloserButton:hover {
  color: #e6e6e6c7;
}

.discoverDRContainer {
  background-color: #96b9cc6b;
  box-shadow: 1px 1px 5px 1px darkgrey;
  color: #e2eae7;
  display: none;
  text-shadow: 1px 1px #519eaf;
  animation: 0.8s fadeInBook forwards;
  transition: animation;
  transition-timing-function: 250ms ease-in-out;
  font-family: 'Nobile', sans-serif;
}

.discoverDRheadRow {
  padding-top: 15px;
}

.aboutRow {
  padding-bottom: 15px;
}

.aboutCol {
  background-color: #fcfcfc;
  opacity: 0.9;
  border-radius: 3px;
  padding: 0px !important;
  margin-bottom: 15px;
}

.aboutCol:hover {
  box-shadow: 2px 2px 6px 5px darkgrey;
  transition-timing-function: ease-in-out;
  transition: box-shadow;
  cursor: pointer;
}

.aboutCol img {
  width: 100%;
  border-radius: 4px 3px 0px 0px;
}

.aboutHeadTitle {
  padding: 15px 15px 15px 15px;
  font-weight: bold;
  color: #469aac59;
}

.aboutPara {
  color: #469aac;
  padding: 15px 0px 15px 15px;
  text-shadow: 0px 0px;
}

.tainoIMG {
  height: 247px;
}

.modal {
  background-color: #aac4cb59;
  font-family: 'Nobile';
  overflow: scroll !important;
}

.modal-header {
  background-color: #63a9b7;
  color: floralwhite;
}

.modal-footer {
  background-color: #62a9b7;
}

.modal-body {
  background-color: #dbe4e747;
}

.modalimgs {
  height: 200px;
  opacity: 0.8;
  box-shadow: 1px 1px 15px darkgrey;
  width: 90%;
}

.modalPara {
  font-weight: bold !important;
  color: #62a9b7
}

.img1Title {
  color: #62a9b7 !important;
  font-weight: bold !important;
}

.img2Title {
  color: #62a9b7 !important;
  font-weight: bold !important;
}

.img3Title {
  color: #62a9b7 !important;
  font-weight: bold !important;
}

.IMG1Para {
  padding: 15px 15px 15px 15px;
}

.IMG2Para {
  padding: 15px 15px 15px 15px;
}

.IMG3Para {
  padding: 15px 15px 15px 15px;
}

.img1Title {
  padding: 15px 15px 15px 15px;
}

.img2Title {
  padding: 15px 15px 15px 15px;
}

.img3Title {
  padding: 15px 15px 15px 15px;
}

@media screen and (max-width: 400px) {
  .travelersDiv {
    padding-top: 20px;
  }
  .locationPhotos {
    padding-top: 15px;
  }
}