:root {
  --text: #000;
  --background: #fff;
  --border: #90EE90;
  --green: green;
}

:root[theme=dark] {
  --text: #fff;
  --background: #222831;
  --border: none;
  --green: #90EE90;
  --dark-mode-toggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='feather feather-moon' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root[theme=system] {
    --text: #fff;
    --background: #222831;
    --border: none;
    --green: #90EE90;
    --dark-mode-toggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' id='Icons' x='0' y='0' style='enable-background:new 0 0 32 32' version='1.1' viewBox='0 0 32 32'%3E%3Cstyle%3E.st0%7Bfill:none;stroke:%23000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10%7D%3C/style%3E%3Cpath d='M16 23c-3.87 0-7-3.13-7-7s3.13-7 7-7M6.81 6.81l2.12 2.12M3 16h3M6.81 25.19l2.12-2.12' class='st0' style='stroke:orange'/%3E%3Cpath d='M16 12.55A6.992 6.992 0 0 1 22.09 9c.16 0 .31.01.47.02a5.25 5.25 0 0 0 2.45 9.89c1.6 0 3.03-.72 3.99-1.85-.52 3.37-3.41 5.94-6.91 5.94-2.61 0-4.89-1.43-6.09-3.55M16 3v26' class='st0' style='stroke:%23fff'/%3E%3C/svg%3E");
  }
}
:root[theme=light] {
  --dark-mode-toggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='orange' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='feather feather-sun' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: light) {
  :root[theme=system] {
    --dark-mode-toggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' id='Icons' x='0' y='0' style='enable-background:new 0 0 32 32' version='1.1' viewBox='0 0 32 32'%3E%3Cstyle%3E.st0%7Bfill:none;stroke:%23000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10%7D%3C/style%3E%3Cpath d='M16 23c-3.87 0-7-3.13-7-7s3.13-7 7-7M6.81 6.81l2.12 2.12M3 16h3M6.81 25.19l2.12-2.12' class='st0' style='stroke:orange'/%3E%3Cpath d='M16 12.55A6.992 6.992 0 0 1 22.09 9c.16 0 .31.01.47.02a5.25 5.25 0 0 0 2.45 9.89c1.6 0 3.03-.72 3.99-1.85-.52 3.37-3.41 5.94-6.91 5.94-2.61 0-4.89-1.43-6.09-3.55M16 3v26' class='st0' style='stroke:black'/%3E%3C/svg%3E");
  }
}
.darkmode__button-toggle {
  border: none;
  box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.1);
  margin: 0;
  padding: 0;
  cursor: pointer;
  position: fixed;
  top: 10px;
  right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 50px;
  border-radius: 25px;
  background-color: var(--background);
}
.darkmode__button-toggle:after {
  height: 32px;
  width: 32px;
  margin: 8px;
  content: "";
  border-radius: 25px;
  background-image: var(--dark-mode-toggle);
}
@media (max-width: 768px) {
  .darkmode__button-toggle {
    top: 20px;
    right: 20px;
    height: 40px;
    width: 40px;
  }
  .darkmode__button-toggle:after {
    height: 24px;
    width: 24px;
    margin: 6px;
  }
}

body {
  background-color: var(--background);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}
@media (max-width: 768px) {
  body {
    padding: 20px;
  }
}

.search-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.search-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 3px solid #90EE90;
}

.search-icon img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

h1 {
  margin-bottom: 10px;
}

p {
  margin-bottom: 50px;
}
@media (max-width: 768px) {
  p {
    margin-bottom: 20px; /* Adjust the margin for smaller screens */
  }
}

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

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

.button-container {
  display: flex;
  gap: 20px;
}

.skip-button {
  background-color: rgb(43, 42, 42);
  padding: 10px 0;
  width: 140px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  justify-content: center;
}

.log {
  background-color: transparent;
  border: 2px solid #90EE90;
  color: var(--text);
}

form {
  height: 520px;
  width: 400px;
  background-color: rgba(255, 255, 255, 0.13);
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  border-radius: 10px;
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);
  padding: 50px 35px;
}
@media (max-width: 768px) {
  form {
    /* Adjust styles for smaller screens */
    width: 80%; /* Example adjustment, modify as needed */
    padding: 30px;
  }
}

/*# sourceMappingURL=styles.css.map */