/* ----------------------------- root variables ----------------------------- */
:root {
  /* button colors and stylings */
  --delete-btn: #ee6e73;
  --byzantine: #b5179e;
  /* cards color settings */
  --card-color: 37, 36, 34, 0.5;
  --card-border-radius: 25px;
  /* UV Index Color Indicators */
  --low-uv: #9dc600;
  --moderate-uv: #fdba00;
  --high-uv: #f35023;
}

/* ---------------------------- general stylings ---------------------------- */

body {
  font-family: "Libre Franklin", sans-serif;
  font-weight: 400;
  line-height: 1.75;
  color: #fffcf2;
  background-image: url(../imgs/bg-img-noaa-unsplash.jpg);
}

p {
  margin-bottom: 1rem;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: "Libre Franklin", sans-serif;
  line-height: 1.3;
}

h1 {
  margin-top: 0;
  font-size: 3.052rem;
  font-weight: 700;
}

h2 {
  font-size: 2.441rem;
  font-weight: 600;
}

h3 {
  font-size: 1.953rem;
  font-weight: 500;
}

h4 {
  font-size: 1.563rem;
}

h5 {
  font-size: 1.25rem;
}

small,
.text_small {
  font-size: 0.8rem;
}

::placeholder {
  color: #ccc5b9;
}

/* ----------------------- general materialize resets ----------------------- */

.container {
  width: 100%;
}

button {
  background-color: var(--byzantine) !important;
  font-weight: 600;
  border-radius: var(--card-border-radius) !important;
}

.card {
  border-radius: var(--card-border-radius);
}

.general-cards {
  background: rgba(var(--card-color)) !important;
}

.collection {
  border-radius: var(--card-border-radius);
}

/* ----------------------------- title settings ----------------------------- */

.app-title-container {
  display: flex;
  justify-content: center;
}

.cumulo-title {
  width: fit-content;
  margin-top: 1rem;
  padding: 1rem 1rem;
  border-radius: 50px;
  text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.1),
    1px 1px 1px rgba(0, 0, 0, 0.5);
  /* Animated Background */
  background: linear-gradient(
    270deg,
    rgba(255, 196, 0, 0.5),
    rgba(255, 109, 0, 0.5),
    rgba(247, 37, 133, 0.5),
    rgba(181, 23, 158, 0.5),
    rgba(114, 9, 183, 0.5),
    rgba(86, 11, 173, 0.5),
    rgba(72, 12, 168, 0.5)
  );
  background-size: 400% 400%;
  -webkit-animation: TitleBackgroundAnimation 30s ease infinite;
  -moz-animation: TitleBackgroundAnimation 30s ease infinite;
  -o-animation: TitleBackgroundAnimation 30s ease infinite;
  animation: TitleBackgroundAnimation 30s ease infinite;
}

/* Keyframes for animated title background */
@-webkit-keyframes TitleBackgroundAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-moz-keyframes TitleBackgroundAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-o-keyframes TitleBackgroundAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes TitleBackgroundAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* -------------------------------------------------------------------------- */
/*                                   modals                                   */
/* -------------------------------------------------------------------------- */

.modal-content {
  color: #252422;
}

/* -------------------------------------------------------------------------- */
/*                          search parameters card                            */
/* -------------------------------------------------------------------------- */

input[type="text"]:not(.browser-default) {
  color: #ccc5b9;
  border-bottom-color: #ccc5b9;
  transition: all 0.5s;
}

input[type="text"]:focus {
  border-bottom: 1px solid var(--byzantine) !important;
  box-shadow: 0 1px 0 0 var(--byzantine) !important;
}

/* --------------------------- search city button --------------------------- */

.search-city-btn {
  transition: all 0.5s;
}

.search-city-btn:hover,
.search-city-btn:focus {
  font-size: 1.25rem;
}

.search-city-icon {
  transition: all 0.5s;
}

.search-city-btn:hover .search-city-icon,
.search-city-btn:focus .search-city-icon {
  font-size: 2rem;
}

/* -------------------------------------------------------------------------- */
/*                           search history section                           */
/* -------------------------------------------------------------------------- */

/* space out the city btns and delete btn */
.collection-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* --------------------------- search city buttons -------------------------- */

.search-city-specific-btn {
  transition: all 0.5s;
}

.search-city-specific-btn:hover,
.search-city-specific-btn:focus {
  font-size: 1rem;
}

/* ------------------------- delete button stylings ------------------------- */
.delete-city-btn {
  background-color: var(--delete-btn) !important;
  transition: all 0.5s;
}

.delete-city-btn .delete-icon {
  transition: all 0.5s;
}

.delete-city-btn:hover .delete-icon,
.delete-city-btn:focus .delete-icon {
  font-size: 2rem;
}

/* -------------------------------------------------------------------------- */
/*                              forecast section                              */
/* -------------------------------------------------------------------------- */

/* todays forecast width */
.today-forecast-card {
  width: fit-content !important;
  padding: 0 4rem !important;
  margin: auto 0 !important;
}

/* today forecast container */
.today-forecast-container {
  display: flex;
  justify-content: center !important;
}

/* ------------------------ UV Index Severity classes ----------------------- */
.todays-uv-index {
  transition: all 0.5s;
}

.uv-index-high {
  padding: 0.5rem 0.5rem;
  background-color: var(--high-uv);
  border-radius: 50px;
  transition: all 0.5s;
}

.uv-index-moderate {
  padding: 0.5rem 0.5rem;
  background-color: var(--moderate-uv);
  border-radius: 50px;
  transition: all 0.5s;
}

.uv-index-low {
  padding: 0.5rem 0.5rem;
  background-color: var(--low-uv);
  border-radius: 50px;
  transition: all 0.5s;
}

/* five day forecast title */
.five-forecast-title {
  width: fit-content;
  padding: 1rem;
}

/* ------------------------ five day forecast section ----------------------- */

.five-title-container {
  display: flex;
  justify-content: center;
}

.future-forecasts-cards-container {
  display: flex;
  justify-content: center;
}

.future-forecast-container {
  width: 20% !important;
}

/* -------------------------------------------------------------------------- */
/*                                media queries                               */
/* -------------------------------------------------------------------------- */

/* ----------------------- tablets and smaller screens ---------------------- */

@media only screen and (max-width: 1220px) {
  .app-container {
    display: flex;
    flex-direction: column;
    align-items: center !important;
  }

  .city-selector-container {
    margin: 0 !important;
    width: 50% !important;
  }

  .forecast-container {
    margin: 0 !important;
    width: 100% !important;
  }
}

/* ------------------- Mobile devices and smaller tablets ------------------- */

@media only screen and (max-width: 776px) {
  .city-selector-container {
    width: 90% !important;
  }

  .future-forecasts-cards-container {
    margin: 0;
    flex-direction: column !important;
    align-items: center !important;
  }

  .future-forecast-container {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .future-forecast-card {
    margin-left: 0;
  }
}