@font-face {
  font-family: 'Inter';
  src: url('../assets/inter.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}

html,
body {
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  background-image: url('../assets/bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.kotak-blur {
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  background-color: rgba(255, 255, 255, 0.5);
}

.icon-sabi {
  color: #776759;
}

.icon-sabi2 {
  color: #ce925e;
  text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff;
}

.bayangan-sabi {
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
}

.switch-container {
  width: 51px;
  height: 31px;
  position: relative;
  margin: 10px;
  display: inline-block;
}

.checkbox {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.switch {
  width: 100%;
  height: 100%;
  display: block;
  background-color: #79736e;
  border-radius: 16px;
  cursor: pointer;
}

.slider {
  width: 27px;
  height: 27px;
  position: absolute;
  left: calc(50% - 27px / 2 - 10px);
  top: calc(50% - 27px / 2);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.15), 0px 3px 1px rgba(0, 0, 0, 0.06);
  cursor: pointer;
}

.checkbox:checked+.switch {
  background-color: rgb(112, 95, 77);
}

.checkbox:checked+.switch .slider {
  left: calc(50% - 27px / 2 + 10px);
  top: calc(50% - 27px / 2);
}