body,html {
  margin:0; padding:0;
  background:#000;
  height:100%;
  font-family:-apple-system,Arial;
}

.container {
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}

.octo {
  width:200px;
  transition:0.4s;
  image-rendering: pixelated;
}

.octo:hover {
  transform:scale(1.15);
}

.octo:active {
  transform:scale(1.25);
}

/* Floating animation */
.octo {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
  100% { transform: translateY(0px); }
}

/* Contact Page */
.contact-bg {
  background:#000;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}

.bubble {
  background:#111;
  color:#fff;
  padding:30px 40px;
  border-radius:20px;
  box-shadow:0 0 25px rgba(255,0,255,0.3);
  border:2px solid #ff00ff;
  text-align:center;
}

.bubble a {
  color:#ff66ff;
  font-weight:700;
  text-decoration:none;
}

.bubble a:hover {
  text-decoration:underline;
}