body[theme='dark'] {
  background: #000;
  color: #ffffff;
}
body[theme='dark'] a {
  color: #ffffff;
}
body[theme='light'] {
  background: #ffffff;
  color: #000000;
}
body[theme='light'] a {
  color: #000000;
}

#hybrid {
  visibility: hidden;
}

#theme-toggle {
  visibility: hidden;
  padding-top: 90px;
}

#theme-toggle + label {
  content: '';
  display: inline-block;
  cursor: pointer;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
  display: flex;
  align-items: center;
}

#theme-toggle:not(:checked) + label {
  background-color: gold;
}

#theme-toggle:checked + label {
  background-color: transparent;
  box-shadow: inset -8px -6px 1px 1px #fff;
}

.intro-text {
  font-size: 15px;
  font-family: monospace;
}

[class*='text-'] {
  font-size: 1.2em;
  font-weight: 600;
  transition: color 500ms ease-in;
}

body[theme='dark'] {
  .text-sun {
    color: #222;
  }
  .text-moon {
    color: #fff;
  }
}

body[theme='light'] {
  .text-sun {
    color: #000;
  }
  .text-moon {
    color: #ddd;
  }
}

.teksanimasi1 {
  text-align: center;
}

.teksanimasi1 div {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}
.teksanimasi1 div:first-of-type {
  animation: showup 7s infinite;
}

.teksanimasi1 div:last-of-type {
  width: 0px;
  animation: reveal 7s infinite;
}

.teksanimasi1 div:last-of-type span {
  margin-left: -1px;
  animation: slidein 7s infinite;
}

@keyframes showup {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes slidein {
  0% {
    margin-left: -480px;
  }
  20% {
    margin-left: -480px;
  }
  35% {
    margin-left: 0px;
  }
  100% {
    margin-left: 0px;
  }
}

@keyframes reveal {
  0% {
    opacity: 0;
    width: 0px;
  }
  20% {
    opacity: 1;
    width: 0px;
  }
  30% {
    width: 457px;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    width: 457px;
  }
}

@media only screen and (max-width: 600px) {
  /* Contoh aturan CSS untuk ukuran layar smartphone */
  #home-title {
    font-size: 27px;
  }
  #home-center {
    text-align: center;
  }
  .teksanimasi1 {
    font-size: 13px;
  }
  .intro-text {
    font-size: 7px;
  }
  @keyframes showup {
    0% {
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    80% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes slidein {
    0% {
      margin-left: -280px;
    }
    20% {
      margin-left: -280px;
    }
    35% {
      margin-left: 0px;
    }
    100% {
      margin-left: 0px;
    }
  }

  @keyframes reveal {
    0% {
      opacity: 0;
      width: 0px;
    }
    20% {
      opacity: 1;
      width: 0px;
    }
    30% {
      width: 277px;
    }
    80% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      width: 277px;
    }
  }
  #home-social {
    margin-top: 20px;
  }
  .site-nav {
    margin-top: 20px;
    text-align: center;
  }
  .intro-text {
    font-size: 10px;
    text-align: center;
  }
  #home-footer {
    text-align: center;
    margin-top: 20px;
  }
  #theme-toggle:checked + label {
    background-color: transparent;
    box-shadow: inset -4px -3px 0px 0px #fff;
  }
}

.widget {
  text-align: center;
}

.greeting {
  font-size: 1.5em;
  margin: 5px 0;
  color: var(--main);
}

.time {
  margin: 0;
  color: var(--main);
}