html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
}

.main-image {
  border-radius: 10px;
  animation: appear 2s;
}

#reset-password-form {
  width: 100%;
  max-width: 300px;
  padding: 15px;
  margin: auto;
 }

 .mvp-form {
  width: 100%;
  max-width: 400px;
  padding: 15px;
  margin-top: 100px;
  margin-bottom: auto;

 }

@media (max-width: 767px) {
  .main-image {
    width: 75%;
  }

  #recipesRow {
    display: none;
  }

  #recipesSlide {
    scroll-snap-type: x proximity;
    overflow-x: scroll;
    width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  .search-icon {
   font-size: 1.5em;
   line-height: 0.04167em;
   vertical-align: -0.125em;
  }

}

@media (min-width: 768px) {

  .email-input {
    width: 75%;
  }

  .search-icon {
   font-size: 1.25em;
   line-height: 0.05em;
   vertical-align: -0.075em;
  }

}

@media (min-width: 500px) {
  .bg-image,
  .bg-no-image {
    height: 70vh;
  }
}

@media (max-width: 500px) {
  .bg-image,
  .bg-no-image {
    height: 55vh;
  }
}

.navbar-toggler {
  border-color: transparent !important;
}

.btn-link {
  text-decoration: none;
}

.btn-link:hover {
  text-decoration: underline;
}

.showcase {
  animation: appear 2s;
}

@keyframes appear {

  from {
    opacity: 0.2;
  }

  to {
    opacity: 1;
  }

}

.list-group-item-action {
  cursor: pointer;
}

.text-yt {
  color: rgb(255, 0, 0);
}

.fa-spotify {
  color: #1DB954;
}

.spotify-btn {
  background-color: #1DB954 !important;
  border-color: #1DB954 !important;
}


.text-orange {
  color: orange;
}

.btn-container {
  margin-right: auto;
  margin-left: auto;
}

.ig-btn {
  border: none;
  background: #f09433;
  background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f09433', endColorstr='#bc1888', GradientType=1);
}

.yt-btn {
  background-color: rgb(255, 0, 0) !important;
  border-color: rgb(255, 0, 0) !important;
}

.algolia-btn {
  color: #5468FF;
}

.bg-image,
.bg-no-image {
  position: relative;
  max-width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 0px 0px 10px 10px;
}

.title {
  border-radius: 10px;
  background-color: #f3ae64;
}

.bottomright {
  position: absolute;
  bottom: 8px;
  right: 16px;
  font-size: 18px;
}

.card {
  -webkit-transition: transform 0.25s ease-in-out;
  -moz-transition: transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out;
}

.card:not(.bg-spotify):hover {
  -moz-transform: scale(1.02);
  -webkit-transform: scale(1.02);
  -o-transform: scale(1.02);
  -ms-transform: scale(1.02);
  -webkit-transform: scale(1.02);
  transform: scale(1.02);
}

.ingredient-tile:hover,
.utensil-tile:hover {
  cursor: pointer;
}

.flag-icon {
  font-size: 1.75em;
}

@media (prefers-color-scheme: light) {

  body {
    background-color: #fff;
    color: #212529;
  }

  footer {
    background-color: #f8f9fa;
  }

  .bg-image,
  .bg-no-image {
    background-color: #f8f9fa;
  }

  .bg-dark-mode {
    background-color: #f8f9fa;
  }

  .search-icon,
  .language-icon {
    color: rgba(0, 0, 0, .55);
  }

  .ingredient-tile,
  .utensil-tile {
    background-color: #f8f9fa;
  }

  .text-decoration-line-through {
    color: rgba(0, 0, 0, .55);
  }

  #minimizeButton,
  #pinButton,
  #timerButton,
  #timerTextButton,
  #ingredientsButton,
  #ingredientsTextButton,
  #spotifyBtn {
    background-color: #f3f4f4 !important;
    border-color: #f3f4f4 !important;
  }

  #pinButton.active,
  #minimizeButton.active,
  #timerButton.active,
  #ingredientsButton.active,
  #ingredientsTextButton.active,
  #timerTextButton.active {
  background-color: #d3d4d5 !important;
  border-color: #d3d4d5 !important;
  }

  #minimizeIcon,
  #minimizeIcon:hover,
  #minimizeIcon:focus,
  #pinIcon,
  #pinIcon:hover,
  #pinIcon:focus,
  #timerTextIcon,
  #timerTextIcon:hover,
  #timerTextIcon:focus,
  #timerIcon,
  #timerIcon:hover,
  #timerIcon:focus,
  #spotifyText,
  #spotifyText:hover,
  #spotifyText:focus {
    color: #212529 !important;
  }

  .card-title {
    color: #212529;
  }

  .bg-spotify {
    background-color: #f8f9fa;
    border-color: #f8f9fa;
  }

  .spotify-previous.active,
  .spotify-pause.active,
  .spotify-next.active,
  .spinner-border-sm {
    color: #191414 !important;
  }

}

@media (prefers-color-scheme: dark) {

  body {
    background-color: #121212;
    color: #f8f9fa;
  }

  .form-control,
  .form-control:focus,
  .list-group-item {
    color: #f8f9fa;
  }

  .list-group-item:hover {
    background-color: #3B3F43;
    color: #f8f9fa;
  }

  .input-group-text {
    background-color: #3B3F43;
    color: #f8f9fa;
  }

  footer,
  .card {
    background-color: #212529;
  }

  .modal-content, #offcanvasTimer, #offcanvasIngredients {
    color: #f8f9fa !important;
  }

  #offcanvasTimer, #offcanvasIngredients {
    background-color: #212529 !important;
  }

  .bg-image,
  .bg-no-image {
    background-color: #212529;
  }

  .bg-dark-mode {
    background-color: #212529;
  }

  .search-icon,
  .language-icon {
    color: rgba(255, 255, 255, .55)
  }

  .ingredient-tile,
  .utensil-tile {
    background-color: #212529;
  }

  .text-decoration-line-through {
    color: rgba(255, 255, 255, .5);
  }

  #minimizeButton,
  #pinButton,
  #timerButton,
  #timerTextButton,
  #ingredientsButton,
  #ingredientsTextButton,
  #spotifyBtn {
  background-color: #343A40 !important;
  border-color: #212529 !important;
  }

  #pinButton.active,
  #minimizeButton.active,
  #timerButton.active,
  #timerTextButton.active,
  #ingredientsButton.active,
  #ingredientsTextButton.active {
    background-color: #4d5154 !important;
    border-color: #4d5154 !important;
  }

  #minimizeText,
  #minimizeText:hover,
  #minimizeText:focus,
  #minimizeIcon,
  #minimizeIcon:hover,
  #minimizeIcon:focus,
  #pinIcon,
  #pinIcon:hover,
  #pinIcon:focus,
  #timerText,
  #timerText:hover,
  #timerText:focus,
  #timerTextSmall,
  #timerTextSmall:hover,
  #timerTextSmall:focus,
  #timerTextIcon,
  #timerTextIcon:focus,
  #timerTextIcon:hover,
  #timerIcon,
  #timerIcon:focus,
  #timerIcon:hover,
  #ingredientsText,
  #ingredientsText:hover,
  #ingredientsText:focus,
  #spotifyText,
  #spotifyText:hover,
  #spotifyText:focus {
    color: #fff !important;
  }

  .card-title {
    color: #f8f9fa;
  }

  .bg-spotify {
    background-color: #212529;
    border-color: #212529;
  }

  .spotify-previous.active,
  .spotify-pause.active,
  .spotify-next.active,
  .spinner-border-sm {
    color: #f8f9fa !important;
  }

}

.image-placeholder {
  background-color: #b0c0c7;
  animation-name: shine;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.slide-child {
  flex: 0 0 auto;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.slide-child-placeholder {
  flex: 0 0 auto;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

@media (max-width: 575px) {
  .image-placeholder {
    height: 70vw;
    width: 100%;
  }

  .slide-child {
    max-width: 75%;
  }

  .slide-child-placeholder {
    width: 70vw;
  }

  #timerEnd {
    font-size: 24px;
  }

  #timer {
    font-size: 48px;
  }

  #spotifyPlayer {
    width: 100%;
    max-width: 375px;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .image-placeholder {
    height: 310px;
    width: 100%;
  }

  .slide-child {
    max-width: 60%;
  }

  .slide-child-placeholder {
    width: 310px;
  }

  #timerEnd {
    font-size: 26px;
  }

  #timer {
    font-size: 52px;
  }

  #spotifyPlayer {
    width: 100%;
    max-width: 525px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .image-placeholder {
    height: 292px;
    width: 100%;
  }

  #utensils {
    margin-top: 119px;
  }

  #timerEnd {
    font-size: 32px;
  }

  #timer {
    font-size: 64px;
  }

  #spotifyPlayer {
    width: 100%;
    max-width: 575px;
  }

}

@media (min-width: 992px) and (max-width: 1199px) {
  .image-placeholder {
    height: 280px;
    width: 100%;
  }

  #utensils {
    margin-top: 70px;
  }

  #timerEnd {
    font-size: 48px;
  }

  #timer {
    font-size: 96px;
  }

  #spotifyPlayer {
    width: 100%;
    max-width: 600px;
  }

}

@media (min-width: 1200px) {
  .image-placeholder {
    height: 288px;
    width: 100%;
  }

  #utensils {
    margin-top: 70px;
  }

  #timerEnd {
    font-size: 48px;
  }

  #timer {
    font-size: 96px;
  }

  #spotifyPlayer {
    width: 100%;
    max-width: 600px;
  }

}

@keyframes shine {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }

  100% {
    opacity: 1;
  }
}

#minimizeButton,
#minimizeButton:hover,
#minimizeButton:focus,
#pinButton,
#pinButton:hover,
#pinButton:focus,
#timerButton,
#timerButton:hover,
#timerButton:focus,
#timerTextButton,
#timerTextButton:hover,
#timerTextButton:focus,
#ingredientsButton,
#ingredientsButton:hover,
#ingredientsButton:focus,
#ingredientsTextButton,
#ingredientsTextButton:hover,
#ingredientsTextButton:focus {
  outline: none;
  box-shadow: none;
}

#minimizeIcon.active,
#minimizeIcon:hover.active,
#minimizeIcon:focus.active,
#pinIcon.active,
#pinIcon:hover.active,
#pinIcon:focus.active {
  color: red !important;
}

#offcanvasTimer{
  height: fit-content;
}

.form-select {
  width: fit-content;
}

.offcanvas-backdrop {
background-color: transparent !important;
}

#playerSong:hover,
.spotify-link:hover {
  text-decoration: underline !important;
  cursor: pointer;
}