html {
  height: 100%;
}
body {
  margin: 0px 0px;
  background-color: rgb(215, 224, 238);
  font-family: "Outfit", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  transition: background 0.4s linear;
}
#tag {
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 20px;
  color: hsl(218, 44%, 22%);
  transition: color 0.3s linear;
}
#para {
  margin-top: 0px;
  font-weight: 400;
  font-size: 15px;
  color: hsl(220, 15%, 55%);
  padding: 0 25px;
  transition: color 0.3s linear;
}
#code {
  width: 285px;
  border-radius: 15px;
  box-shadow: 0px 0px 5px #626262;
  transition: background-image 0.4s linear;
}
.border_help {
  border: 2px solid red;
}
.code-wrap {
  background-color: hsl(0, 0%, 100%);
  display: flex;
  width: min-content;
  height: fit-content;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 15px 15px 20px 15px;
  border: none;
  border-radius: 20px;
  box-shadow: 1px 1px 20px #626262;
  transition: background 0.4s linear;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  height: 100%;
  padding: 20px;
}
.footer {
  font-size: 12px;
  font-weight: 700;
  width: fit-content;
  color: hsl(218, 44%, 22%);
  padding: 1px 10px;
  box-shadow: 0px 0px 10px hsl(218, 44%, 22%);
  border-radius: 40px;
  transition: background 0.4s linear;
}
.foot_container {
  display: flex;
}
.toggle {
  display: block;
  position: relative;
  width: 70px;
  margin-left: 20px;
  height: 41px;
  cursor: pointer;
  /* border: 2px solid hsl(218, 44%, 22%); */
  border-radius: 3rem;
  background-color: hsl(218, 44%, 22%);
  box-shadow: 0px 0px 10px #d7e0ee;
}
.toggle::after {
  content: "";
  position: absolute;
  height: 32px;
  width: 32px;
  margin-top: 4.5px;
  border: none;
  border-radius: 50%;
  left: 34px;
  box-shadow: 0px 0px 5px hsl(218, 44%, 22%);
  background-color: #d7e0ee;
}

.theme-toggle {
  margin-left: 20px;
  width: fit-content;
}
.label {
  display: flex;
  position: relative;
  width: 70px;
  height: 41px;
  border-radius: 3rem;
  background-color: hsl(218, 44%, 22%);
  color: #d7e0ee;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0px 0px 10px hsl(218, 44%, 22%);
}
.fa-moon {
  margin-left: 5px;
  color: #f1c40f;
}
.fa-sun {
  margin-left: 20px;
  color: #fb8500;
}
.label::after {
  cursor: pointer;
  content: "";
  position: absolute;
  height: 32px;
  width: 32px;
  border: none;
  border-radius: 50%;
  left: 34px;
  box-shadow: 0px 0px 5px hsl(218, 44%, 22%);
  background-color: #d7e0ee;
  transition: transform 0.25s linear;
}
.checkbox {
  position: absolute;
  opacity: 0%;
}
.checkbox:checked + .label::after {
  background-color: #d7e0ee;
  box-shadow: 0px 0px 5px hsl(218, 44%, 22%);
  transform: translateX(-30px);
  color: hsl(218, 44%, 22%);
}
.checkbox:checked + .label::after {
  background-color: hsl(218, 44%, 22%);
  box-shadow: 0px 0px 5px #d7e0ee;
}
.checkbox:checked + .label {
  background-color: #d7e0ee;
  box-shadow: 0px 0px 3px #d7e0ee;
}

/* DARK MODE CLASSES */

body.dark {
  background-color: #1f3151;
  margin: 0px 0px;
  font-family: "Outfit", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

body.dark div.footer {
  font-size: 12px;
  font-weight: 700;
  width: fit-content;
  color: #1f3151;
  padding: 1px 10px;
  background-color: #d7e0ee;
  box-shadow: 0px 0px 3px #d7e0ee;
  border-radius: 3rem;
}

body.dark div.code-wrap {
  background-color: #3e5b91;
  display: flex;
  width: min-content;
  height: fit-content;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 15px 15px 20px 15px;
  border: none;
  border-radius: 20px;
  box-shadow: 0px 0px 7px #ade8f4;
}

body.dark #tag {
  color: #d7e0ee;
}

body.dark #para {
  color: #b8bec9;
}

body.dark #code {
  box-shadow: 0px 0px 7px #023e8a;
}