body {
  background-color: #0a0604;
}
.container {
  position: fixed;
  top: 0;
}

#beginVideo {
  position: fixed;
  width: 100%;
}

.content {
  position: relative;
  padding-bottom: 50px;
}

input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
}

.flex {
  margin-top: 8%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.cb {
  color: rgba(223, 255, 198, 0.747);
  background: linear-gradient(to left, rgba(87, 137, 50, 0.5), rgba(109, 220, 30, 0.5), rgba(87, 137, 50, 0.5));
  animation: bg 50s linear infinite;
  font-size: large;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  text-align: center;
  margin-left: 3%;
  margin-bottom: 30px;
}
.cb:hover{
  color: rgb(234, 248, 225);
  background: linear-gradient(to left, rgb(144, 221, 89, 0.5), rgb(109, 220, 30, 0.5), rgb(144, 221, 89, 0.5));
}

.bf{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0%;
}

button{
  position: relative;
  bottom:0;
  font-size: x-large;
  font-weight: 700;
  padding: 10px 20px;
  color: transparent;
  background: linear-gradient(to left, #c8dc18, #dae02c, #6fcd2c, #d8eb2d, #5fd619, #a1e715);
  background-size: 1000px 100%;
  animation: bg 15s linear infinite;
  background-clip: text;
  -webkit-background-clip: text;
}

@keyframes bg {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 10000px;
  }
}

button:hover{
  cursor: pointer;
  background: #faea84;
  color: #2b2727;
  border-radius: 20px;
  box-shadow: 0 0 5px #ddd659,
              0 0 25px #ddd659,
              0 0 50px #ddd659,
              0 0 100px #ddd659;
}


.cb_checked{
  cursor: pointer;
  color: rgb(234, 248, 225);
  border-radius: 20px;
  box-shadow: 0 0 5px rgb(144, 221, 89, 0.5),
              0 0 25px rgb(144, 221, 89, 0.5),
              0 0 50px rgb(144, 221, 89, 0.5),
              0 0 100px #ddd659;
}