@media screen and (max-width:400px) {
  .ornaments .ornament{
    font-size: 1rem;
  }
}
.ornaments{
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
    z-index:9;
    overflow:hidden;
}
.ornaments .ornament{
    position: absolute;
    font-size: 2rem;
    opacity: .5;
}
.o1 {
  top: 10%;
  left: 5%;
  animation: float1 7s infinite;
}

.o2 {
  top: 20%;
  right: 10%;
  animation: float2 7s infinite
}

.o3 {
  top: 60%;
  left: 8%;
  animation: float3 5s infinite;
}

.o4 {
  top: 85%;
  right: 8%;
  animation: float4 6s infinite;
}

.o5 {
  top: 7%;
  left: 50%;
  animation: float1 6s infinite;
}

.o6 {
  top: 30%;
  left: 10%;
  animation:float7 7s infinite
}

.o7 {
  top: 90%;
  left: 30%;
  animation: float8 10s infinite;
}

.o8 {
  top: 40%;
  right: 5%;
  animation: float10 8s infinite;
}
@keyframes float1 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(10px, -15px) rotate(5deg);
  }
}

@keyframes float2 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-8px, -20px) scale(1.1);
  }
}

@keyframes float3 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(15px, -10px) rotate(-3deg);
  }
}

@keyframes float4 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(-12px, -18px) rotate(8deg);
  }
}

@keyframes float5 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(5px, -25px) rotate(-5deg);
  }
}

@keyframes float6 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(-10px, -12px) rotate(10deg);
  }
}

@keyframes float7 {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform:scale(1.05) rotate(180deg);
  }
}

@keyframes float8 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(15px, -10px) rotate(5deg);
  }
  50% {
    transform: translate(-10px, -20px) rotate(-3deg);
  }
  75% {
    transform: translate(20px, -5px) rotate(8deg);
  }
}

@keyframes float9 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  50% {
    transform: translate(-8px, -15px) rotate(45deg) scale(1.2);
  }
}

@keyframes float10 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(-15px, -20px) rotate(15deg);
  }
}