:root {
  color-scheme: light dark;

  --rainbow: linear-gradient(
    45deg,
    #ff00aa 0%,
    #00ccff 25%,
    #00ff00 50%,
    #ffbb00 75%,
    #ff0000 100%
  );

  --rainbow-animate: linear-gradient(
    30deg,
    #ff00aa 0%,
    #00ccff 12.5%,
    #00ff00 25%,
    #ffbb00 37.5%,
    #ff0000 50%,
    #ffbb00 62.5%,
    #00ff00 75%,
    #00ccff 77.5%,
    #ff00aa 100%
  );
}

html {
  font-family: arial, sans-serif;
  background-color: light-dark(#fff, #333);
}

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

body, input, button {
  color: light-dark(#1f1f1f, #e8e8e8);
  font-family: Arial, sans-serif;
}

footer {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  width: auto;
  background: light-dark(#f2f2f2, #171717);
}

a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  cursor: pointer;
  text-decoration: underline;
}

button,
input[type="submit"],
input[type="button"] {
  cursor: pointer;
  background: inherit;
  border: inherit;
  font-size: inherit;
}

/* =================================== Header =================================== */

header {
  margin-top: 10px;
  margin-right: 10px;
  display: flex;
  gap: 25px;
  align-items: center;
  justify-content: flex-end;
}

.apps-icon {
  width: 20px;
  filter: brightness(40%);
}

.profile-icon {
  margin-inline: -10%;
  height: 50px;
  width: 50px;
  clip-path: circle(40% at center);
}

/* =================================== Form =================================== */

form {
  margin-inline: auto;
  margin-top: 100px;
  width: 100%;
  text-align: center;
  vertical-align: middle;
}

#keyboard-cat {
  height: auto;
  max-width: 500px;
  width: 70vw;
}

#search-container {
  background-color: light-dark(#fff, #4d5156);
  box-shadow: 0 0 5px light-dark(grey, #ddd);
  border-radius: 30px;
  height: 45px;
  margin: 20px auto 0 auto;
  max-width: 550px;
  width: 80vw;
  position: relative;

  /* Vertical center */
  display: flex;
  align-items: center;

  &:focus-within::after, &:hover:not(:focus-within)::after {
    content: "";
    position: absolute;
    right: -5px;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    border-radius: 30px;
    z-index: -1;
    filter: blur(5px);
  }

  &:focus-within {
    box-shadow: none;

    &::after {
      background: var(--rainbow-animate);
      background-size: 400%;
      animation-name: search-container-animation;
      animation-duration: 30s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
  }

  &:hover:not(:focus-within)::after {
    background: var(--rainbow);
  }
}

@keyframes search-container-animation {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 400% 0;
  }
}

input[type="text"]:focus::placeholder {
  color: transparent !important;
}

#search-input {
  margin-inline: 10px;
  width: 100%;
  font-size: 1.2em;
  background-color: inherit;
  border: none;
  outline: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-background-clip: text !important;
}

.search-icon {
  height: 50%;
  margin-left: 10px;
}

#clear-search-icon {
  height: 50%;
  margin-right: 10px;
}

.search-buttons-container {
  margin-top: 30px;
  display: flex;
  gap: 20px;
  justify-content: center;
}

.search-button {
  --border-radius: 8px;

  padding: 0.6em 1em;
  background: light-dark(#f8f9fa, #303134);
  box-shadow: 0 0 5px grey;
  border-radius: var(--border-radius);

  &:hover {
    position: relative;
    box-shadow: none;

    &::after {
      content: "";
      position: absolute;
      border-radius: var(--border-radius);
      top: -3px;
      left: -3px;
      width: calc(100% + 6px);
      height: calc(100% + 6px);
      background: var(--rainbow);
      z-index: -1;
      filter: blur(3px);
    }
  }

  input {
    background: transparent;
    font-size: 16px;
    border: none;
    outline: none;
  }
}


/* =================================== Footer =================================== */

#cat-parade {
  position: relative;
  font-size: 0;
}

.footer-info {
  display: flex;
  padding: 10px 20px;
  align-items: center;
  justify-content: space-between;
}

.localization-info {
  display: flex;
  gap: 0.5em;
  align-items: center;
}

#change-localization-icon {
  height: 1em;
  padding: 2px;
  border-radius: 50%;
  filter: brightness(40%);

  &:hover {
    box-shadow: 0 0 4px grey;
  }
}

#love-message {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  border-radius: 8px;

  &:hover {
    box-shadow: 0 0 5px grey;
  }
}

.emoji {
  font-family: "Segoe UI Emoji";
}

/* =================================== Others =================================== */

#search-container,
#keyboard-cat,
.search-button,
.search-clear-input,
#change-localization-icon {
  cursor: pointer;
}

@media (prefers-color-scheme: dark) {
  input[type="text"]::placeholder {
    color: rgb(190, 190, 190);
  }

  .apps-icon, #change-localization-icon {
    filter: brightness(90%);
  }
}

@media screen and (max-width: 475px) {
  .footer-info {
    flex-direction: column;
    gap: 10px;
  }
}