* {
  margin: 0;
  box-sizing: border-box;
}
:root {
  --background-page: #f2f2f2;
  --background-article: #bbc3db;
  --color-title: black;
  --color-paragraph: black;

  --toggle-color: #6f172b;
  --fill-icons: white;
  --sun-icon: none;
  --dark-icon: block;
}

:root:has(.switch-element:checked) {
  --background-page: #161b1d;
  --background-article: #283548;
  --color-title: white;
  --color-paragraph: white;

  --toggle-color: #2aa5e9;
  --fill-icons: white;
  --sun-icon: none;
  --dark-icon: block;
}

.switch-element {
  display: none;
}
body {
  font-family: "Plus Jakarta Sans", sans-serif;
  margin: 90px;
  background-color: var(--background-page);
  transition: 0.3s background-color;
}

.card {
  width: 350px;
  background-color: var(--background-article);
  padding: 1rem;
  border-radius: 10px;
}

.cards-container {
  display: flex;
  gap: 50px; 
  flex-wrap: wrap;
}

.card_img {
  width: 100%;
  display: block;
  border-radius: 10px;
}

.card_text {
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
}
.card_title {
  font-size: 1.4rem;
  color: var(--color-title);
}

.card__paragraph {
  color: var(--color-paragraph);
}

.toggle-mode {
  background-color: var(--toggle-color);
  border: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  grid-template-areas: "mode";
  position: fixed;
  top: 50px;
  right: 50px;
  animation: infinite scale alternate 3s;
  cursor: pointer;
}
@keyframes scale {
  100% {
    transform: scale(1.1);
  }
}

.img-mode {
  pointer-events: none;
  grid-area: mode;
  fill: var(-fill-icons);
}

.light {
  display: var(--sun-icon);
}

.dark {
  display: var(--dark-icon);
}

.switch-element {
  width: 100px;
  height: 100px;
}