/* karla-regular - latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/karla-v13-latin-regular.eot');
  /* IE9 Compat Modes */
  src: local('Karla'), local('Karla-Regular'),
    url('../fonts/karla-v13-latin-regular.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('../fonts/karla-v13-latin-regular.woff2') format('woff2'),
    /* Super Modern Browsers */
    url('../fonts/karla-v13-latin-regular.woff') format('woff'),
    /* Modern Browsers */
    url('../fonts/karla-v13-latin-regular.ttf') format('truetype'),
    /* Safari, Android, iOS */
    url('../fonts/karla-v13-latin-regular.svg#Karla') format('svg');
  /* Legacy iOS */
}

/* karla-regular - latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/karla-v15-latin-regular.eot');
  /* IE9 Compat Modes */
  src: local(''),
    url('../fonts/karla-v15-latin-regular.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('../fonts/karla-v15-latin-regular.woff2') format('woff2'),
    /* Super Modern Browsers */
    url('../fonts/karla-v15-latin-regular.woff') format('woff'),
    /* Modern Browsers */
    url('../fonts/karla-v15-latin-regular.ttf') format('truetype'),
    /* Safari, Android, iOS */
    url('../fonts/karla-v15-latin-regular.svg#Karla') format('svg');
  /* Legacy iOS */
}

/* karla-600 - latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/karla-v15-latin-600.eot');
  /* IE9 Compat Modes */
  src: local(''),
    url('../fonts/karla-v15-latin-600.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('../fonts/karla-v15-latin-600.woff2') format('woff2'),
    /* Super Modern Browsers */
    url('../fonts/karla-v15-latin-600.woff') format('woff'),
    /* Modern Browsers */
    url('../fonts/karla-v15-latin-600.ttf') format('truetype'),
    /* Safari, Android, iOS */
    url('../fonts/karla-v15-latin-600.svg#Karla') format('svg');
  /* Legacy iOS */
}

/* karla-700 - latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/karla-v13-latin-700.eot');
  /* IE9 Compat Modes */
  src: local('Karla Bold'), local('Karla-Bold'),
    url('../fonts/karla-v13-latin-700.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('../fonts/karla-v13-latin-700.woff2') format('woff2'),
    /* Super Modern Browsers */
    url('../fonts/karla-v13-latin-700.woff') format('woff'),
    /* Modern Browsers */
    url('../fonts/karla-v13-latin-700.ttf') format('truetype'),
    /* Safari, Android, iOS */
    url('../fonts/karla-v13-latin-700.svg#Karla') format('svg');
  /* Legacy iOS */
}

/* merriweather-regular - latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/merriweather-v25-latin-regular.eot');
  /* IE9 Compat Modes */
  src: local(''),
    url('../fonts/merriweather-v25-latin-regular.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('../fonts/merriweather-v25-latin-regular.woff2') format('woff2'),
    /* Super Modern Browsers */
    url('../fonts/merriweather-v25-latin-regular.woff') format('woff'),
    /* Modern Browsers */
    url('../fonts/merriweather-v25-latin-regular.ttf') format('truetype'),
    /* Safari, Android, iOS */
    url('../fonts/merriweather-v25-latin-regular.svg#Merriweather') format('svg');
  /* Legacy iOS */
}

/* merriweather-700 - latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/merriweather-v25-latin-700.eot');
  /* IE9 Compat Modes */
  src: local(''),
    url('../fonts/merriweather-v25-latin-700.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('../fonts/merriweather-v25-latin-700.woff2') format('woff2'),
    /* Super Modern Browsers */
    url('../fonts/merriweather-v25-latin-700.woff') format('woff'),
    /* Modern Browsers */
    url('../fonts/merriweather-v25-latin-700.ttf') format('truetype'),
    /* Safari, Android, iOS */
    url('../fonts/merriweather-v25-latin-700.svg#Merriweather') format('svg');
  /* Legacy iOS */
}


@keyframes float {
  0% {
    transform: translateY(-5px);
  }

  50% {
    transform: translateY(20px);
  }

  100% {
    transform: translateY(-5px);
  }
}

@-moz-keyframes float {
  0% {
    transform: translateY(-5px);
  }

  50% {
    transform: translateY(20px);
  }

  100% {
    transform: translateY(-5px);
  }
}

@-webkit-keyframes float {
  0% {
    transform: translateY(-5px);
  }

  50% {
    transform: translateY(20px);
  }

  100% {
    transform: translateY(-5px);
  }
}

@keyframes spin {
  from {
    transform: translateY(0%) rotate(0deg);
    opacity: 1;
  }

  to {
    transform: translateY(700%) rotate(360deg);
    opacity: 0;
  }
}

@keyframes slide {
  from {
    transform: translateY(0%);
  }

  to {
    transform: translateY(-80%);
  }
}

.paused {
  -webkit-animation-play-state: paused !important;
  -moz-animation-play-state: paused !important;
  -o-animation-play-state: paused !important;
  animation-play-state: paused !important;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #F5F5F5;
  /* background-image: url("../images/gradient_background.png");
  background-repeat: no-repeat; */
}

body.dark-mode {
  background-color: #133A34;
  color: #F5F5F5;
}

.img-container,
.flower-parent,
.city-parent {
  overflow: hidden;
  position: relative;
}

#home-illustration {
  animation: 6s float ease-in-out infinite;
  /* animation: 90s rotate ease-in-out infinite; */
}

#home-illustration3 {
  position: relative;
  z-index: 2;
  width: 70%;
}

#flower-1 {
  position: absolute;
  top: -10%;
  left: 10%;
  animation: 8s spin ease-in-out infinite;
  z-index: 1;
}

#flower-2 {
  position: absolute;
  top: -15%;
  left: 20%;
  animation: 6s spin ease-in-out infinite;
  z-index: 1;
}

#flower-3 {
  position: absolute;
  top: -10%;
  left: 35%;
  animation: 7s spin ease-in-out infinite;
  z-index: 1;
}

#flower-4 {
  position: absolute;
  top: -8%;
  left: 60%;
  animation: 7s spin ease-in-out infinite;
  z-index: 1;
}

#flower-5 {
  position: absolute;
  top: -10%;
  left: 70%;
  animation: 8s spin ease-in-out infinite;
  z-index: 1;
}

#flower-6 {
  position: absolute;
  top: -15%;
  left: 85%;
  animation: 6s spin ease-in-out infinite;
  z-index: 1;
}

#sky {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: 12s slide ease-in-out infinite;
  z-index: 0;
}

/* Animation pause + play button styling */
#animation-button {
  position: absolute;
  top: 10%;
  right: 0;
  border: none;
  z-index: 100;
}

.hide {
  display: none;
}

.show {
  display: inline;
}

.controls {
  width: 100%;
}

/* Filter to turn carousel arrows green */
.carousel-control-next,
.carousel-control-prev {
  filter: invert(44%) sepia(26%) saturate(1066%) hue-rotate(53deg) brightness(96%) contrast(86%);
  z-index: 99;
}

.carousel-indicators [data-bs-target] {
  background-color: #4F852D;
}

.btn {
  border: 3px solid #4F852D !important;
  border-radius: .75rem;
  font-weight: bold;
  transition: .5s;
}

.btn:hover a {
  color: #F5F5F5;
}

/* .btn .dark-mode {
  border: 3px solid #B5C192 !important;
  color: #B5C192;
} */

.btn:hover {
  border: 3px solid #945529 !important;
  background-color: #945529;
  color: #F5F5F5 !important;
}

/* .btn:hover .dark-mode {
  border: 3px solid #C7A982 !important;
  background-color: #C7A982;
} */

.btn-outline-primary {
  color: #4F852D;
}

/* Dark mode covered in JS */
.display-3 {
  font-family: 'Merriweather';
  color: #4F852D;
}

h2 {
  font-family: 'Merriweather';
  font-weight: bold;
}

p {
  font-family: 'Karla';
}

a {
  font-family: 'Karla';
  font-weight: bold;
  text-decoration: none;
  color: #4F852D;
}

a.dark-mode {
  color: #B5C192;
}

a:hover {
  color: #945529;
}

a.dark-mode:hover {
  color: #C7A982;
}

.socials a {
  text-decoration: underline;
}

#current {
  color: #945529;
  border-bottom: 1px solid #945529;
}

#current.dark-mode {
  color: #C7A982;
  border-bottom: 1px solid #C7A982;
}