:root {
  --main-weather-bg-start: rgba(255, 255, 255, 1);
  --main-weather-bg-end: rgba(255, 255, 255, 0.6);

  --main-weather-dark-bg-start: rgba(50, 50, 50, 1);
  --main-weather-dark-bg-end: rgba(50, 50, 50, 0.5);

  --hours-weather-bg-start: rgba(97, 166, 250, 1);
  --hours-weather-bg-end: rgba(97, 166, 250, 0.7);

  --hours-weather-bg-dark-start: rgba(11, 15, 77, 1);
  --hours-weather-bg-dark-end: rgba(11, 15, 77, 0.5);

  --days-weather-bg-start: rgba(79, 79, 79, 1);
  --days-weather-bg-end: rgba(79, 79, 79, 0.9);

  --days-weather-bg-dark-start: rgb(24, 24, 27);

  --days-weather-bg-dark-end: rgba(24, 24, 27, 0.5);

  --bg-circle: #f9fba9;
  --button-color: #e5e5e5;

  --main-radius: 24px;
  --small-radius: 10px;

  --border-width: 3px;

  --button-background-light: rgba(205, 205, 205, 0.6);
  --button-background-dark: rgba(205, 205, 205, 0.2);

  --big-padding: 40px;
  --main-padding: 20px;
  --small-padding: 8px;

  --big-gap: 40px;
  --main-gap: 20px;
  --small-gap: 10px;
  --very-small-gap: 5px;
}

*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
}

.container-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
}

.background-color-light {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-image: radial-gradient(
    circle 500px at 50% 200px,
    var(--bg-circle),
    transparent
  );
}

.background-color-dark {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background-image: radial-gradient(
    ellipse 80% 80% at 50% -20%,
    rgba(120, 119, 198, 0.3),
    hsla(0, 0%, 100%, 0)
  );
}

body {
  min-height: 100vh;
  line-height: 1.5;
  font-family: "Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

body.dark {
  background-color: #0e0e0e;
}

img,
picture,
svg,
canvas,
video {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

header {
  display: flex;
  justify-content: end;
  gap: var(--small-gap);
  padding: var(--main-padding);
}

main {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--main-gap);
  padding-left: var(--big-padding);
  padding-right: var(--big-padding);
  padding-bottom: var(--big-padding);
  overflow: hidden;
}

.mode-button,
.github-button {
  padding: 0px;
  width: 35px;
  height: 35px;
  border: none;
  border-radius: var(--main-radius);
  background-color: transparent;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

body.dark .background-color-light,
.mode-button.dark .moon,
.mode-button .sun {
  display: none;
}

.mode-button.dark .sun {
  display: block;
}

.mode-button:hover,
.github-button:hover {
  background-color: var(--button-background-light);
}

body.dark .mode-button:hover,
body.dark .github-button:hover {
  background-color: var(--button-background-dark);
}

.mode-button .moon,
.github-button .github,
.mode-button .sun {
  transition: transform 0.4s;
}

.mode-button:hover .moon,
.github-button:hover .github,
.mode-button:hover .sun {
  transform: scale(1.1);
}

body.dark .subtitle,
body.dark .sun,
body.dark .github {
  color: var(--button-color);
}

body.dark .subtitle > span {
  color: gray;
}

.title-container {
  text-align: center;
}

.title-page {
  font-size: 3rem;
}

.bold {
  font-weight: bold;
}

.search-part {
  display: flex;
  flex-direction: column;
  gap: var(--big-gap);
  align-items: center;
}

.search-input-div {
  position: relative;
}

.glass-icon {
  position: absolute;
  top: 11px;
  left: 11px;
  z-index: 1;
}

.glass-icon svg {
  color: gray;
}

.search-input {
  box-shadow: none;
  border: 1px solid gray;
  padding-top: var(--small-padding);
  font-size: 1.1rem;
  font-weight: bold;
  padding-bottom: var(--small-padding);
  padding-left: var(--big-padding);
  border-radius: var(--small-radius);
  transition: border-color 0.5s, box-shadow 0.5s;
  width: 350px;
}

.search-input:hover {
  border-color: var(--main-weather-dark-bg-start);
}

.search-input.error {
  box-shadow: 0px 0px 0px 2px #ff9292;
  border-color: #d00000;
}

.search-input.error:focus {
  box-shadow: 0px 0px 0px 2px #ff9292;
  border-color: #d00000;
}

.search-input:focus {
  box-shadow: 0px 0px 0px 2px #c5c5c5;
  border-color: gray;
  outline: none;
}
body.dark .search-input {
  background-color: #0e0e0e;
  color: white;
}

body.dark .search-input:focus {
  box-shadow: 0px 0px 0px 2px white;
  border-color: gray;
  outline: none;
}

.searched-place {
  color: black;
  box-shadow: rgba(0, 0, 0, 0.169) 0px 10px 30px 0px;
  background: radial-gradient(
    70% 93% at 48% 0%,
    rgb(231, 231, 231) 0%,
    rgb(247, 247, 247) 96%
  );
  border: var(--border-width) solid white;
  text-align: center;
  padding: 10px 50px;
  border-radius: 100px;
  font-weight: bold;
}

body.dark .searched-place {
  background: black;
  border: var(--border-width) solid #212121e7;
  background-color: black;
  color: white;
  background: radial-gradient(
    70% 93% at 48% 0%,
    rgb(33, 33, 33) 0%,
    rgb(5, 5, 5) 96%
  );
}

.typing-div {
  position: absolute;
  top: 8px;
  left: 40px;
  pointer-events: none;
}

.typing {
  overflow: hidden;
  display: inline-block;
  font-size: 1.1rem;
  white-space: nowrap;
  font-weight: bold;
  border-right: 3px solid black;
  animation: blinking 1s steps(1, end) infinite,
    typing 1s steps(8, end) 1s backwards, erase 1s steps(8, end) 4s forwards;
}

body.dark .typing {
  animation: blinking-light 1s steps(1, end) infinite,
    typing 1s steps(8, end) 1s backwards, erase 1s steps(8, end) 4s forwards;
}

.show-place-part {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(370px, 500px);
  justify-content: center;
  gap: var(--main-gap);
}

.main-weather {
  border-radius: var(--main-radius);
  box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 30px 0px;
  background: linear-gradient(
    0deg,
    var(--main-weather-bg-start) 0%,
    var(--main-weather-bg-end) 100%
  );
  padding: var(--main-padding);
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: var(--main-gap);
  flex: 1 1 auto;
  border: var(--border-width) solid var(--main-weather-bg-start);
}

body.dark .main-weather {
  background: linear-gradient(
    0deg,
    var(--main-weather-dark-bg-start) 0%,
    var(--main-weather-dark-bg-end) 100%
  );

  color: white;
  border: var(--border-width) solid var(--main-weather-dark-bg-start);
}

.icon {
  width: 70px;
  height: 70px;
}

.icon-div {
  display: flex;
  align-items: center;
}

.conditions {
  display: flex;
  font-size: 1.3rem;
  align-items: center;
  gap: var(--small-gap);
  margin-top: -15px;
}

.temp {
  font-size: 5rem;
  font-weight: 500;
}

.degree {
  font-size: 2rem;
  font-weight: 300;
  vertical-align: text-top;
}

.degree-small {
  font-size: 1.3rem;
  vertical-align: top;
  font-weight: 300;
}

.datetime {
  display: flex;
  justify-content: space-between;
}

.separator {
  border: 1px solid black;
}

body.dark .separator {
  border: 1px solid white;
}
.separator-white {
  border: 1px solid white;
}

/* .line-details {
  display: flex;
  flex-direction: column;
} */

.details-value {
  font-size: 2rem;
  font-weight: 200;
}

.weather-details {
  display: flex;
  justify-content: space-between;
}

.extra-info {
  color: white;
  display: grid;
  gap: var(--small-gap);
  grid-template-columns: inherit;
}

.weather-byhours {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--small-padding);
  box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 30px 0px;
  background: linear-gradient(
    0deg,
    var(--hours-weather-bg-start) 0%,
    var(--hours-weather-bg-end) 100%
  );
  border: var(--border-width) solid var(--hours-weather-bg-start);
  border-radius: var(--main-radius);
  gap: var(--small-gap);

  overflow: auto;
  scrollbar-width: none;
}

body.dark .weather-byhours {
  background: linear-gradient(
    0deg,
    var(--hours-weather-bg-dark-start) 0%,
    var(--hours-weather-bg-dark-end) 100%
  );
  border: var(--border-width) solid var(--hours-weather-bg-dark-start);
}

.weather-bydays {
  background: linear-gradient(
    0deg,
    var(--days-weather-bg-start) 0%,
    var(--days-weather-bg-end) 100%
  );
  border: var(--border-width) solid var(--days-weather-bg-start);
  /* display: flex;
  flex-direction: column;
  justify-content: space-between; */

  /* display: grid; */
  /* grid-template-columns: */
  /* grid-template-rows: 500px 500px 500px 500px; */
  padding: var(--small-padding);
  box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 30px 0px;
  border-radius: var(--main-radius);
  height: 100%;
}

body.dark .weather-bydays {
  background: linear-gradient(
    0deg,
    var(--days-weather-bg-dark-start) 0%,
    var(--days-weather-bg-dark-end) 100%
  );
  border: var(--border-width) solid var(--days-weather-bg-dark-start);
}

.hours-weather {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: var(--small-gap);

  min-width: 60px;
  min-height: 131px;
}

.icon-hour {
  width: 40px;
  height: 40px;
}

.icon-day {
  width: 25px;
  height: 25px;
}

.droplet {
  width: 8px;
  height: 15px;
}

.hour {
  font-weight: 600;
}

.day-condition {
  width: 150px;
}

.hour-precip,
.day-precip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--very-small-gap);
  font-size: 0.8rem;
  min-width: 50px;
}

.day-precip {
  justify-content: end;
}

.day {
  padding: var(--small-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--very-small-gap);
  min-height: 90px;
}

.day-week {
  font-size: 1.2rem;
  font-weight: 600;
}

.day-month {
  font-size: 0.8rem;
  font-weight: 200;
}

.day-weather {
  display: flex;
  justify-content: center;
  gap: var(--very-small-gap);
  width: 135px;
}

.day-weather-svg {
  width: 50px;
  height: 50px;
}

.day-daytime {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40px;
}

.condition {
  font-size: 1rem;
  font-weight: 600;
}

.description {
  font-size: 0.8rem;
  /* font-weight: 300; */
  color: #c1c1c1;
}

.day-temp {
  display: flex;
}

.day-temp-max {
  font-size: 1.5rem;
  font-weight: 600;
}

.day-temp-min {
  font-size: 0.9rem;
  font-weight: 200;
  align-self: flex-end;
  color: #c1c1c1;
}

.moon,
.github {
  color: black;
}

body.dark .typing,
body.dark .title-page,
body.dark .made-by,
body.dark .author {
  color: white;
}

footer {
  display: flex;
  justify-content: center;
  padding: var(--main-padding);
}

.author {
  text-decoration: none;
  color: black;
  cursor: pointer;
  font-weight: bold;
}

.author:hover {
  text-decoration: underline;
}

.error-message {
  font-weight: bold;
  color: red;
}

.error-card {
  position: fixed;
  top: 20px;
  left: -300px;
  display: flex;
  border: var(--border-width) solid red;
  border-radius: var(--small-radius);
  align-items: center;
  gap: var(--small-gap);
  padding: var(--small-padding);
  transform: rotate(-10deg);
  background: #ff9292;
  color: black;
  transition: left 0.8s;
}

.error-card-show {
  left: 30px;
}

.error-card-icon {
  width: 30px;
  color: red;
  border-radius: var(--small-radius);
  padding: 5px;
  border: none;
  background-color: white;
}

@keyframes blinking {
  0% {
    border-color: transparent;
  }
  50% {
    border-color: black;
  }
}

@keyframes blinking-light {
  0% {
    border-color: transparent;
  }
  50% {
    border-color: white;
  }
}

@keyframes typing {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

@keyframes erase {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

@media only screen and (min-width: 640px) {
  .weather-bydays {
    padding: 10px 15px;
  }
  .icon-day {
    width: 35px;
    height: 35px;
  }
  .day-condition {
    width: 200px;
  }
}

@media only screen and (min-width: 900px) {
  .day-condition {
    width: 200px;
  }
  .day-temp-max {
    font-size: 2rem;
  }
  .day-temp-min {
    font-size: 1.3rem;
  }

  .extra-info {
    grid-template-columns: none;
  }

  .searched-place {
    padding: 15px 60px;
  }

  .show-place-part {
    grid-template-columns: minmax(300px, 400px) minmax(550px, 600px);
  }

  .icon-hour {
    width: 50px;
    height: 50px;
  }

  .weather-byhours {
    padding: var(--main-padding);
    gap: var(--main-gap);
  }

  .weather-bydays {
    padding: var(--main-padding);
  }

  .title-page {
    font-size: 5rem;
  }

  .droplet {
    width: 10px;
    height: 24px;
  }

  .hour-precip,
  .day-precip {
    font-size: 1rem;
  }

  .icon-day {
    width: 50px;
    height: 50px;
  }
  .day {
    padding: var(--small-padding);
  }

  footer {
    padding: var(--big-padding);
  }

  .error-card-icon {
    width: 30px;
  }
  .error-card-show {
    left: 30px;
  }

  .error-card {
    top: 50px;
  }
}