body {
    margin: 0;
    overflow: hidden;
    color: white;
    font-family: Arial, sans-serif;
    position: relative;
    background-color: black;
}

body::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgb(32,245,55);
  background: -moz-radial-gradient(circle, rgba(32,245,55,1) 0%, rgba(0,0,0,1) 63%);
  background: -webkit-radial-gradient(circle, rgba(32,245,55,1) 0%, rgba(0,0,0,1) 63%);
  background: radial-gradient(circle, rgba(32,245,55,1) 0%, rgba(0,0,0,1) 63%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#20f537",endColorstr="#000000",GradientType=1); 
  opacity: 0;
  transition: opacity 2s ease-in-out;
  z-index: 0;
}

.bg-visible::before {
  opacity: 1;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  z-index: 100;
  animation: fadeOut 2s ease-in-out forwards;
  animation-delay: 1s;
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

.content {
  position: relative;
  z-index: 1;
  opacity: 0;
  filter: blur(8px);
  transition: opacity 0.5s ease-in-out, filter 2s ease-in-out;
  padding: 2rem;
}

.visible {
  opacity: 1;
  filter: blur(0);
}


@keyframes dizzyMove {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-5px, 2px); }
  50%  { transform: translate(3px, -3px); }
  75%  { transform: translate(-2px, 4px); }
  100% { transform: translate(0, 0); }
}
  
body.dizzy::before {
  animation: dizzyMove 3s ease-in-out infinite;
}