a {
  color: #fff;
}

.main-home-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  height: 93vh;
}

.main-card-container {
  background: #fff1;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 50px;
  width: 40vw;
  height: 30vh;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
}

.main-card-container button,
.main-card-container a {
  width: 70%;
  height: 50px;
  background: transparent;
  border: 2px solid #fff;
  border-radius: 5px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: clamp(0.7rem, 1vw, 1vw);
}

.main-card-container a {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.main-card-container button:hover,
.main-card-container a:hover {
  background-color: #412279;
  transition: 0.5s all ease-in-out;
  border: 2px solid #673ab7;
}

.extra-links-container {
  display: grid;
  grid-template-areas:
    "link1 link2"
    "link3 link3";
  font-size: clamp(0.75rem, 1vw, 1vw);
  gap: 10px;
  width: 40vw;
  text-align: center;
}

.extra-links-container a {
  padding: 10px 0;
  border-radius: 5px;
  font-weight: bold;
}

.github-link {
  grid-area: link1;
  background-color: #333;
  color: #fff;
}

.code-video-link {
  grid-area: link2;
  background-color: #b73a3a;
  color: #fff;
}

.coffee-link {
  grid-area: link3;
}

/* Settings modal */

.modal-form {
  display: flex;
  align-items: center;
  margin: 50px;
}

.modal-form label {
  font-weight: bold;
}

.modal-form-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.modal-form-row span {
  font-weight: bold;
}

.knobs,
.layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.accents-checkbox-container {
  position: relative;
  top: 50%;
  width: 90px;
  height: 36px;
  overflow: hidden;
}

.accents-checkbox-container.r,
.accents-checkbox-container.r .layer {
  border-radius: 100px;
}

.checkbox {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

.knobs {
  z-index: 2;
}

.layer {
  width: 100%;
  background-color: #fcebeb;
  transition: 0.3s ease all;
  z-index: 1;
}

#accents-btn .knobs:after,
#accents-btn .knobs:before {
  position: absolute;
  top: -28px;
  left: 4px;
  width: 20px;
  height: 10px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  background-color: #03a9f4;
  border-radius: 50%;
  transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}

#accents-btn .knobs:before {
  content: "Sí";
}

#accents-btn .knobs:after {
  content: "No";
}

#accents-btn .knobs:after {
  top: 4px;
  right: 4px;
  left: auto;
  background-color: #f44336;
}

#accents-btn .checkbox:checked + .knobs:after {
  top: -28px;
}

#accents-btn .checkbox:checked + .knobs:before {
  top: 4px;
}

#accents-btn .checkbox:checked ~ .layer {
  background-color: #ebf7fc;
}

/* responsive design */
@media (max-width: 620px) {
  .extra-links-container {
    display: grid;
    grid-template-areas:
      "link1"
      "link2"
      "link3";
    width: -webkit-fill-available;
  }

  .main-card-container {
    width: -webkit-fill-available;
  }

  #settings-modal {
    width: -webkit-fill-available;
  }

  .modal-form-row {
    flex-direction: column;
    gap: 10px;
  }
}