@import url("https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&family=Boldonse&family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Rubik:ital,wght@0,300..900;1,300..900&family=Unbounded:wght@200..900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Noto Sans";
}

:root {
  --neutral-900: hsl(227, 75%, 14%);
  --neutral-800: hsl(226, 25%, 17%);
  --neutral-700: hsl(225, 23%, 24%);
  --neutral-600: hsl(226, 11%, 37%);
  --neutral-300: hsl(0, 0%, 78%);
  --neutral-200: hsl(217, 61%, 90%);
  --neutral-100: hsl(0, 0%, 93%);
  --neutral-0: hsl(200, 60%, 99%);
  --red-400: hsl(3, 86%, 64%);
  --red-500: hsl(3, 71%, 56%);
  --red-700: hsl(3, 77%, 44%);
  --light-gradient: linear-gradient(180deg, #ebf2fc 0%, #eef8f9 100%);
  --dark-gradient: linear-gradient(180deg, #040918 0%, #091540 100%);
  --paragraph: 16px;
}

.flex {
  display: flex;
}

.jc-btw {
  justify-content: space-between;
}
.flex-column {
  flex-direction: column;
}

.aln-cent {
  align-items: center;
}

.jc-cent {
  justify-content: center;
}

.wdt-100 {
  width: 100%;
}
body {
  background: var(--dark-gradient);

  padding: 0px 100px;
}

.extensions-title {
  background-color: var(--neutral-800);
  font-weight: 800;
  font-size: 18px;
  padding: 15px 30px;
  border-radius: 30px;
  width: 100%;
}

.console,
.sun {
  margin-top: 6px;
}

.sun {
  background-color: var(--neutral-700);
  padding: 10px 10px;
  border-radius: 10px;
}

.sun:hover {
  cursor: pointer;
}

.container {
  gap: 4rem;
  padding-block: 100px;
}

.divider p {
  font-size: 28px;
  color: var(--neutral-0);
  font-weight: 800;
}

.btn-actions {
  gap: 1rem;
}

.btn-actions button {
  background-color: var(--neutral-700);
  border-style: none;
  font-size: 16px;
  color: var(--neutral-0);
  border-radius: 50px;
  padding: 10px 20px;
  border: solid 1px var(--neutral-600);
}

.btn-actions button:hover {
  background-color: var(--red-500);
  color: #091540;
}

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--neutral-600);
  transition: 0.4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #e74c3c;
}

input:checked + .slider:before {
  transform: translateX(20px);
}

.title-card {
  font-size: 18px;
  color: var(--neutral-0);
  font-weight: 700;
}

.desc-card {
  color: var(--neutral-300);
  font-size: 14px;
}

.cards-title {
  gap: 1rem;
}

.cards {
  padding: 20px;
  background-color: var(--neutral-800);
  border-radius: 20px;
  border: solid 1px var(--neutral-600);
  display: flex;
  flex-direction: column;
  gap: 3rem;
  width: 428px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
}

.cards-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cards-actions button {
  background-color: transparent;
  color: var(--neutral-0);
  border: solid 1px var(--neutral-600);
  padding: 8px 15px;
  border-radius: 50px;
  cursor: pointer;
}

.cards-actions button:hover {
  background-color: var(--red-500);
  color: #091540;
}

.cards-container {
  max-width: 100%;
  gap: 1rem;
  flex-wrap: wrap;
}

body.light-mode {
  --dark-gradient: var(--light-gradient);
  --neutral-900: hsl(0, 0%, 100%);
  --neutral-800: hsl(0, 0%, 97%);
  --neutral-700: hsl(0, 0%, 90%);
  --neutral-600: hsl(0, 0%, 70%);
  --neutral-300: hsl(0, 0%, 40%);
  --neutral-200: hsl(0, 0%, 30%);
  --neutral-100: hsl(0, 0%, 20%);
  --neutral-0: hsl(0, 0%, 10%);
}

body.light-mode .btn-actions button:hover,
body.light-mode .cards-actions button:hover {
  background-color: var(--red-400);
  color: white;
}

body.light-mode .desc-card {
  color: var(--neutral-700);
}

.sun,
.moon {
  transition: opacity 0.3s ease;
  cursor: pointer;
}

body:not(.light-mode) .moon {
  display: none;
}

body.light-mode .sun {
  display: none;
}

.moon {
  background-color: var(--neutral-700);
  padding: 10px 10px;
  border-radius: 10px;
}

body.light-mode .console .tincho {
  fill: #091540 !important;
}

body.light-mode .extensions-title {
  border: solid 1px #091540;
}

body.light-mode .divider p {
  color: #091540;
}

body.light-mode .btn-actions button {
  background-color: #eef8f9;
  color: #091540;
}

body.light-mode .title-card {
  color: #091540;
}

body.light-mode .desc-card {
  color: var(--neutral-100);
}

body.light-mode .remove-btn {
  color: #091540;
  border: solid 1px #091540;
}

body.light-mode .remove-btn:hover {
  border: solid 1px #e74c3c;
}

@media (max-width: 600px) {
  body {
    padding: 0px 30px;
  }

  .divider {
    flex-direction: column;
    gap: 1rem;
  }
}

@media (max-width: 1080px) {
  .cards {
    max-width: 350px;
  }
  .cards-container {
    justify-content: center;
  }
}