:root {
  --primary: #303030;
  --secondary: #9a0c16;
}

body {
  font-family: "Be Vietnam Pro", sans-serif;
  color: var(--primary);
  font-size: 16px;
}

.bg-secondary {
  background-color: var(--secondary);
}

.preview-noupload {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
}

.animate-wobble {
  animation: wobble 1s;
}

.remove-file {
  background-color: var(--secondary);
  color: #fff;
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 5px 15px;
  border-radius: 5px;
}

@keyframes wobble {
  0% {
    transform: translateX(0%);
  }
  15% {
    transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    transform: translateX(20%) rotate(3deg);
  }
  45% {
    transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    transform: translateX(10%) rotate(2deg);
  }
  75% {
    transform: translateX(-5%) rotate(-1deg);
  }
  100% {
    transform: translateX(0%);
  }
}