/* ///////////////////////////////////// config */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
}

::placeholder {
  color: var(--color-text-secondary);
  opacity: 0.2;
}

:root[color-mode="light"] {
  --color-bg: white;
  --color-text-primary: white;
  --color-text-secondary: #4a4a4a;
  --color-main: #479658;
}

:root[color-mode="dark"] {
  --color-bg: #4a4a4a;
  --color-text-primary: #4a4a4a;
  --color-text-secondary: white;
  --color-main: #479658;
}

/* ///////////////////////////////////// buttons */

.buttons-main {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.color-mode__btn {
  background-color: var(--color-bg);
  border: solid 2px var(--color-main);
  padding: 0.3rem 1rem;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.color-mode__btn:hover {
  cursor: pointer;
  opacity: 0.6;
}

.input-color {
  color: var(--color-text-secondary);
  background-color: transparent;
  border: none;
}

.input-color:hover {
  cursor: pointer;
  opacity: 0.6;
}

.input-color:focus {
  outline: none;
}

input:focus {
  outline: none;
}

.input-color::-webkit-color-swatch {
  border-radius: 5px;
  padding: 0.5rem 1rem;
}

input[type="color" i] {
  height: inherit;
  width: inherit;
}

.svg-theme {
  fill: var(--color-text-secondary);
  width: 1rem;
}

.svg-sun {
  stroke: var(--color-text-secondary);
  stroke-width: 3;
}

.colorpick-eyedropper-input-trigger {
  display: none;
}

/* ///////////////////////////////////// main page */

body {
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
}

.hidden {
  opacity: 0;
  transition: all 1s ease-in-out;
}

.main-container {
  height: 100vh;
  letter-spacing: -0.1rem;
  color: var(--color-text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  overflow-y: hidden;
}

.logo {
  fill: var(--color-main);
  width: 20rem;
}

.title {
  font-size: 2rem;
}

.main-title {
  margin-bottom: -1rem;
}

.userInput {
  color: var(--color-text-secondary);
  background-color: transparent;
  border: none;
  border-bottom: 2px solid var(--color-main);
}

.btn-search {
  filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.284));
  padding: 0.5rem 2rem;
  border: none;
  border-radius: 5px;
  background-color: var(--color-main);
}

.btn-search:hover {
  cursor: pointer;
  opacity: 0.6;
}

.user-page-link {
  text-decoration: none;
  color: white;
}

.user-page-link:active,
.user-page-link:visited {
  color: var(--color-text-primary);
}

.buttons-sections-main {
  display: none;
}

/* ///////////////////////////////////// animation main page */

.main-container {
  animation: appearPage 1s ease-in-out;
}

@keyframes appearPage {
  0% {
    opacity: 0;
    transform: translateY(-100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@media screen and (max-width: 768px) {
  .main-container {
    margin-top: 3rem;
    height: unset;
  }
}