.back {
  background: #e2e2e2;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
}

.errorlist {
  color: red;
  list-style: none;
}

.card-center {
  margin: auto;
  width: 50%;
  padding: 10px;
}

.green-bk {
  background-color: #6aa975
}
.red-bk {
  background-color: #ab3830;
}
.nice {
  color:#6aa975
}
.red-text {
  color: #ab3830
}

.btn-green {
  color: #fff;
  background-color: #6aa975;
  border-color: #fff;
}

.btn-green:hover {
  color: #6aa975;
  background-color: #ab3830;
  border-color: #6aa975;
}

.btn-red {
  color: #fff;
  background-color: #ab3830;
  border-color: #fff;
  font-size:30px
}

.btn-red:hover {
  color: #fff;
  background-color: #6aa975;
  border-color: #fff;
}

.div-center {
  width: 200px;
  height: 200px;
  background-color: #fff;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  padding: 1em 2em;
  border-bottom: 2px solid #ccc;
  display: table;
}

div.content {
  display: table-cell;
  vertical-align: middle;
}

.snowflake {
  --size: 1vw;
  width: var(--size);
  height: var(--size);
  background: white;
  border-radius: 50%;
  position: absolute;
  top: -5vh;
}

@keyframes snowfall {
  0% {
    transform: translate3d(var(--left-ini), 0, 0);
  }
  100% {
    transform: translate3d(var(--left-end), 110vh, 0);
  }
}

@for $i from 1 through 50 {
  .snowflake:nth-child(#{$i}) {
    --size: #{random(5) * 0.2}vw;
    --left-ini: #{random(20) - 10}vw;
    --left-end: #{random(20) - 10}vw;
    left: #{random(100)}vw;
    animation: snowfall #{5 + random(10)}s linear infinite;
    animation-delay: -#{random(10)}s;
  }
}

/* added small blur every 6 snowflakes*/
.snowflake:nth-child(6n) {
  filter: blur(1px);
}