#circle-container {
    position: relative;
    width: 400px;
    height: 400px;
    margin: 0;
}



#outer-circle {
  position: relative;
  background-color: brown;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 15px solid rosybrown;

  display: flex;
  justify-content: center;
  align-items: center;
}

#inner-circle {
  background-color: rosybrown;
  width: 180px;
  height: 180px;
  border-radius: 50%;
}

#top-tri {
  position: absolute;
  left: 115px;
  top: 0px;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 40px solid rosyBrown;
  cursor: pointer;
}

#left-tri {
  position: absolute;
  left: 0px;
  top: 115px;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 40px solid rosyBrown;
  cursor: pointer;
}

#bottom-tri {
  position: absolute;
  left: 115px;
  bottom: 0px;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 40px solid rosyBrown;
  cursor: pointer;
}

#right-tri {
  position: absolute;
  top: 115px;
  right: 0px;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 40px solid rosyBrown;
  cursor: pointer;
}

.slide-left {
  transform: translate(-50px, 0px);
}

.slide-right {
  transform: translate(50px, 0px)
}

.slide-top {
  transform: translate(0px, -50px)
}

.slide-bottom {
  transform: translate(0px, 50px)
}

.shake {
  animation: shake 1s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

#directional_padlock {
    position: relative;
    width: 400px;
    height: 600px;
    left: 0;
    top: 0;
}


#directional_padlock img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#circle-container {
    position: absolute;
    top: 253px;      /* Adjust until it lines up */
    left: 50px;     /* Adjust until it lines up */
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;     /* Above the image */
}