/* body {
  display: flex;
  flex-direction: column;
  background: #E5E5E5;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
} */

.neon-container{
  width: 25% !important;
  margin: 0 auto;
}

.neon_button_popup {
  position: relative;
  padding: 10px 20px !important;
  color: #ffffff;
  text-decoration: none;
  font-size: 20px;
  /* text-transform: uppercase; */
  transition: 0.5s;
  background-color: #21252983;
  /* font-size: 12px; */
  border: none;
}


@media (max-width: 576px) {
  .neon_button_popup {
      padding: 5px 10px !important;
      color: #ffffff;
      font-size: 14px !important;
  }
}

.neon_button_text {
  margin-top: 6px;
}

.neon_button_popup::before {
  content: " ";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 10px;
  height: 10px;
  border-top: 2px solid #ffc800;
  border-left: 2px solid #ffc800;
  transition: 0.5s;
  transition-delay: 0.5s;
}

.neon_button_popup::after {
  content: " ";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #ffc800;
  border-right: 2px solid #ffc800;
  transition: 0.5s;
  transition-delay: 0.5s;
}

.neon_button_popup:hover::before,
.neon_button_popup:hover::after {
  width: 100%;
  height: 100%;
  transition-delay: 0s;
}

.neon_button_popup:hover {
  background: #21252983;
  color: white;
  box-shadow: 0 0 30px #ffc800;
  transition-delay: 0.5s;
}

/* ================================================= */
.back-to-top {
  position: fixed !important;
  right: 30px;
  bottom: 30px;
  z-index: 99;
}

/*** Button ***/
.btn-popup {
  font-weight: 500;
  transition: 0.5s;
}

.btn-popup.btn-primary,
.btn-popup.btn-outline-primary:hover {
  color: #ffffff;
}

.btn-popup.btn-primary:hover {
  color: var(--primary);
  background: transparent;
}

.btn-popup.btn-green1,
.btn-popup.btn-outline-green1:hover {
  color: #ffffff;
}

.btn-popup.btn-green1:hover {
  color: var(--green1);
  background: transparent;
}

.btn-green1 {
  color: #000;
  background-color: #21252983;
  border-color: none;
}

.btn-square {
  width: 38px;
  height: 38px;
}

.btn-sm-square {
  width: 32px;
  height: 32px;
}

.btn-lg-square {
  width: auto;
  height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: normal;
}

/* Tengahh ==================================? */

body .kepala-popup {
  display: flex;
  justify-content: flex-end;
}
body .kepala-popup button#navbutton {
  z-index: 2;
  position: relative;
  width: 6rem;
  height: 4rem;
  margin: 0.5rem;
  border: none;
  border-radius: 1rem;
  background: #323133;
  cursor: pointer;
  transition: 0.5s cubic-bezier(0.5, 0, 0, 1);
}
body .kepala-popup button#navbutton .icon {
  left: 50%;
  height: 0.25rem;
  width: 2.5rem;
  border-radius: 1rem;
  background: white;
  position: absolute;
  transform: translate(-50%, -50%) rotate(0deg);
  transition: 0.5s cubic-bezier(0.5, 0, 0, 1);
}
body .kepala-popup button#navbutton .icon.top {
  top: 25%;
}
body .kepala-popup button#navbutton .icon.bottom {
  top: 75%;
}
body .kepala-popup button#navbutton.pressed {
  background: #434a54;
}
body .kepala-popup button#navbutton.pressed .icon {
  background: #aab2bd;
}
body .kepala-popup button#navbutton.close .icon.top,
body .kepala-popup button#navbutton.close .icon.bottom {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}
body .kepala-popup button#navbutton.close .icon.middle {
  transform: translate(-50%, -50%) rotate(45deg);
}
body .kepala-popup #navigationpart {
  --page-rotation: 10deg;
  --hand-rotation: 10deg;
  --nav-size: 45vmin;
  --nav-size-width: 75vmin;
  /* --nav-size: 45vmin; */
  --hand-position: 1;
  --page-position: 0;
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  perspective: 50rem;
  transition: 0.5s cubic-bezier(0.5, 0, 0, 1);
}
body .kepala-popup #navigationpart:not(.active) {
  pointer-events: none;
}
body .kepala-popup #navigationpart #navwrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(var(--hand-rotation))
    translateY(100vh);
  transition: 1s cubic-bezier(0.5, 0, 0, 1) 0.5s;
}

@media (max-width: 576px) {
  body .kepala-popup #navigationpart #navwrapper {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(var(--hand-rotation))
      translateY(100vh);
    transition: 1s cubic-bezier(0.5, 0, 0, 1) 0.5s;
  } 

  body .kepala-popup #navigationpart nav {
    margin-top: 8rem;
  }
}



body .kepala-popup #navigationpart nav {
  position: relative;
  left: 100vw;
  z-index: 3;
  width: calc(var(--nav-size-width));
  height: 100%;
  border-radius: 0.5vmin;
  background: #ffffff;
  /* font-family: "Indie Flower", cursive; */
  transform: rotate(calc(var(--page-rotation) - var(--hand-rotation)))
    translateZ(0rem) rotateX(0deg) rotateY(0deg);
  box-shadow: 0px 8px 14px 1px rgba(0, 0, 0, 0.4);
}

@media (min-width: 577px) {
  body .kepala-popup #navigationpart nav {
    margin-top: 5rem;
  }
}

body .kepala-popup #navigationpart nav svg {
  position: absolute;
  top: 90%;
  left: 80%;
  width: 25%;
  transform-origin: 2rem 0.5rem;
  transform: rotate(calc(var(--hand-rotation) - var(--page-rotation)))
    translateY(0vh);
  transition: 0.5s cubic-bezier(0.5, 0, 0, 1);
}
body .kepala-popup #navigationpart nav h2 {
  padding: 2rem 2rem 0 2rem;
  font-size: 6vmin;
  margin: 0;
}
body .kepala-popup #navigationpart nav ul {
  list-style: none;
  padding: 1.5rem 2rem 0 2rem;
  margin: 0;
  font-size: 5vmin;
}
body .kepala-popup #navigationpart nav ul li {
  margin-bottom: 0.75rem;
}
body .kepala-popup #navigationpart nav ul li a {
  color: inherit;
}
body .kepala-popup #navigationpart nav ul li a:not(:hover) {
  text-decoration: none;
}
body .kepala-popup #navigationpart nav button#quitnavigation {
  position: absolute;
  top: .1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  border: none;
  cursor: pointer;
  font-size: 6vmin;
  line-height: 0rem;
  background: none;
  outline: none;
}
body .kepala-popup #navigationpart nav button#quitnavigation:before {
  content: "x";
}
body .kepala-popup #navigationpart nav button#quitnavigation:hover {
  color: #d8334a;
}
body .kepala-popup #navigationpart:not(.active) nav {
  transition-delay: 1s;
}
body .kepala-popup #navigationpart.active #navwrapper {
  transform: translate(-50%, -50%) rotate(var(--hand-rotation)) translateY(0vh);
  transition-duration: 0s;
  transition-delay: 0s;
}
body .kepala-popup #navigationpart.active nav {
  left: 0vw;
  animation: naventer 1.5s ease;
}
@keyframes naventer {
  0%,
  90% {
    box-shadow: 0 0 2rem -1rem rgba(0, 0, 0, 0.1);
  }
  0% {
    left: 100vw;
    transform: rotate(calc(var(--page-rotation) - var(--hand-rotation)))
      translateZ(5rem) rotateX(10deg) rotateY(-10deg);
  }
  40% {
    transform: rotate(calc(var(--page-rotation) - var(--hand-rotation)))
      translateZ(15rem) rotateX(5deg) rotateY(-5deg);
    box-shadow: 0 0 4rem -1rem rgba(0, 0, 0, 0.1);
  }
  90% {
    transform: rotate(calc(var(--page-rotation) - var(--hand-rotation)))
      translateZ(0rem) rotateX(0deg) rotateY(0deg);
  }
  100% {
    left: 0vw;
  }
}
body .kepala-popup #navigationpart.active nav svg {
  transform: rotate(calc(var(--hand-rotation) - var(--page-rotation)))
    translateY(50vh);
  transition-duration: 0s;
  transition-delay: 0s;
}


.scroll{
  display:block;
  border: 1px solid red;
  padding:5px;
  margin-top:5px;
  width:300px;
  height:50px;
  overflow:scroll;
}
.auto{
  display:block;
  border: 1px solid red;
  padding:5px;
  margin-top:5px;
  width: 290px;
  height: 80%;
  overflow:auto;
}




/* =============================================================================================== */

.container40{
  /* width: 330px; */
  width: 40%;
  margin: auto;
  margin-top: 5%;
  padding: 5px;
  backdrop-filter: blur(17px) saturate(200%);
  -webkit-backdrop-filter: blur(17px) saturate(200%);
  background-color: rgba(190, 190, 190, 0.44);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.125);
  border-radius: 10px;
  margin: 5% auto;
}

@media (max-width: 576px) {
  .container40{
    width: 95%;
  }
}

.container90{
  /* width: 330px; */
  width: 90%;
  margin: auto;
  margin-top: 5%;
  padding: 5px;
  backdrop-filter: blur(17px) saturate(200%);
  -webkit-backdrop-filter: blur(17px) saturate(200%);
  background-color: rgba(190, 190, 190, 0.44);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.125);
  border-radius: 10px;
  margin: 5% auto;
  box-shadow: -3px 5px 15px rgba(0, 0, 0, .4);
  color: white;
}

.container70{
  /* width: 330px; */
  width: 70%;
  margin: auto;
  margin-top: 5%;
  padding: 5px;
  backdrop-filter: blur(17px) saturate(200%);
  -webkit-backdrop-filter: blur(17px) saturate(200%);
  background-color: rgba(190, 190, 190, 0.44);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.125);
  border-radius: 10px;
  margin: 5% auto;
}

@media (max-width: 576px) {
  .container70{
    width: 95%;
  }
}

.container2{
    /* width: 330px; */
    width: 60%;
    margin: auto;
    margin-top: 5%;
    padding: 5px;
    backdrop-filter: blur(17px) saturate(200%);
    -webkit-backdrop-filter: blur(17px) saturate(200%);
    background-color: rgba(190, 190, 190, 0.44);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.125);
    border-radius: 10px;
    margin: 5% auto;
}

@media (max-width: 576px) {
  .container2{
    width: 95%;
  }
}