.draggable {
  position: absolute;
  margin: 0.1em;
  width: 25%;
  border-radius: 0.75em;
  padding: 0%;
  /* transition: all 0.3s; */


  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: none;

  
  -webkit-transition: width 0.5s;
  -moz-transition: width 0.5s;
  -o-transition: width 0.5s;
  transition: width 0.5s;
}

/* .ngetap {
  transition: all 0.3s;

} */

.random-gambar {
  position: absolute;
  top: calc(var(--random-top) * 100%);
  left: calc(var(--random-left) * 100%);
}

.zoomed {
  transform: scale(2); /* You can adjust the scale factor as needed */
  /* transition: transform 0.3s ease; Add a smooth transition for zooming */
  
}

/* .draggable.switch-bg {
  transform: scale(1.25);
} */

.draggable img {
  /*buat resize img (keknya) */
  width: 100%;
  height: auto;
  -webkit-transition: width 0.5s;
  -moz-transition: width 0.5s;
  -o-transition: width 0.5s;
  transition: width 0.5s;
}

.draggable.large img {
  transform: scale(1.25);
  
  /* using transition */
  /* transition: all 0.3s; */

}



.draggable video {
  /*buat resize vid (keknya) */
  width: 100%;
  height: auto;

  -webkit-transition: width 0.5s;
  -moz-transition: width 0.5s;
  -o-transition: width 0.5s;
  transition: width 0.5s;
}

.draggable.large video {
  /*zoom in or outz vid*/
  transform: scale(1.1);
  -webkit-transition: width 0.5s;
  -moz-transition: width 0.5s;
  -o-transition: width 0.5s;
  transition: width 0.5s;
}

.draggable div {
  /*text inside image*/
  display: none;
  background-color: #212121d1;
  text-align: left;
  width: 120%;
  padding: 4%;
  left: 200px;
  top: 20px;
  font-size: x-small;
  color: #c3c3c3;
  margin: left;
  transition: all 0.3s;

  
}

.draggable.switch-bg div {
  display: block;
  
}

#dragging {
  left: 38%;
  top: 28%;
}

#wg {
  left: 45%;
  top: 38%;
}

#ibuk {
  left: 2%;
  top: 75%;
}

#ayaka {
  left: 30%;
  top: 0.5%;
  display: block;
}

#blue {
  left: 2%;
  top: 75%;
}

#ical {
  left: 65%;
  top: 5%;
}

#ppt {
  left: 9%;
  top: 45%;
}

#scan {
  left: 45%;
  top: 75%;
}

#ical01 {
  left: 20%;
  top: 85%;
}

#tat {
  left: 69.9%;
  top: 55%;
}

#v {
  left: 73%;
  top: 80%;
}

#agenta {
  left: 55.9%;
  top: 15%;
}

#kawah {
  left: 3.9%;
  top: -15%;
}

#weak {
  left: 31.9%;
  top: 44%;
}

sukatani{
  left: 40.9%;
  top: 60%;
}

#masuke {
  left: 75%;
  top: 70%;
}

#container {
  max-height: 2550px;
  /*border: 2px solid red;*/
}

.fadein {
  /* everything under this class will fade in on load */
  animation: fadein 2s;
  -moz-animation: fadein 2s; /* Firefox */
  -webkit-animation: fadein 2s; /* Safari and Chrome */
  -o-animation: fadein 2s; /* Opera */
}

#container {
  max-height: 2550px;
  /*border: 2px solid red;*/
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-moz-keyframes fadein {
  /* Firefox */
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadein {
  /* Safari and Chrome */
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-o-keyframes fadein {
  /* Opera */
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#footer {
  text-align: center;
  margin: auto;
  position: fixed;
  width: 100%;
  height: auto;
  left: 0px;
  bottom: 0px;
  background-color: #000000;
  font-size: small;
  font-style: italic;
  color: white;
  font-family: "Helvetica", "Rubik", "Segoe UI", sans-serif;
}

.whitemid {
  text-align: center;
  color: white;
  text-decoration: none;
}

.none {
  text-decoration: none;
  color: #737373;
}

.footermain {
  text-decoration: none;
  color: #737373;
}

.none1 {
  text-decoration: none;
  color: yellow;
}

.centerandmiddle {
  text-align: center;
}

.container {
  color: whitesmoke;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 600px;
}

.centered-element {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Center the text horizontally and vertically */
.centered-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-size: 43px;
  color: white;
  /* Adjust as needed */
}

.centered-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-size: 43px;
  color: white;
  /* Adjust as needed */
}

/* Style for the typing cursor */
.typed-cursor {
  display: inline-block;
  animation: blink 0.7s infinite;
}

.centered-w {
  margin: 1;
  position: absolute;
  font-size: 16px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}

a:hover {
  color: white;
}

#header {
  width: 33%;
  margin: auto;
  top: 10px;
  text-align: center;
  background-color: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.disabled {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: none;
}

#earthblast {
  font-size: x-large;
}

.emojihidden {
  display: none;
}

.headertext {
  color: #fff;
  font-weight: bold;
}

#spotify {
  text-align: center;
  margin: auto;
  width: 35%;
  height: 50%;
  left: 0px;
  top: 15px;
}

#mh {
  left: 55px;
}


.random-gambar {
  position: absolute;
  top: calc(var(--random-top) * 100%);
  left: calc(var(--random-left) * 100%);
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;

}

#lock
{
  /* overflow: hidden; */
}
/* 
.tap-target {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 16em;
  height: 16em;
  padding: 1em;
  margin: 1rem auto;
  box-sizing: border-box;

  border-radius: 100%;

  font-size: 1.125em;
  text-align: center;
  color: #fff;
  background-color: #29e;

  cursor: pointer;
  touch-action: none;
  user-select: none;

  transition: all 0.3s;
} */

/* .tap-target.switch-bg {
  background-color: #f40;
} */

/* .tap-target.large {
  transform: scale(1.25);
  
} */

.rotate {
  transform: rotate(180deg);
}