body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
  font-family: Arial, sans-serif;
}

.container {
  position: relative;
  width: 400px;
  height: 400px;
}

.python-logo {
  width: 120px;
  height: 120px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
  filter: brightness(1);
  cursor: pointer;
}

.skill {
  position: absolute;
  opacity: 0;
  color: white;
  font-size: 16px;
  padding: 10px 20px;
  background: #306998;
  border-radius: 30px;
  transition: all 0.4s ease;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
}

/* Hover Effects */
.container:hover .python-logo {
  transform: translate(-50%, -50%) scale(1.3);
  filter: drop-shadow(0 0 20px #ffd43b);
}

.container:hover .skill {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  filter: drop-shadow(0 0 5px #ffd43b);
}

/* Clock-style Positions */
.django   { left: 50%; top: 0%;   }   /* 12 o'clock */
.rest     { left: 80%; top: 20%;  }   /* 2 o'clock */
.database { left: 80%; top: 80%;  }   /* 4 o'clock */
.apis     { left: 50%; top: 100%; }   /* 6 o'clock */
.backend  { left: 20%; top: 80%;  }   /* 8 o'clock */
.python   { left: 20%; top: 20%;  }   /* 10 o'clock */