:root{
  --nature-score: 0;
  --party-score : 0;
  --food-score : 0;
  --culture-score : 0;
  --history-score : 0;
}

.scrollWatcher {
  height: 10px;
  position: fixed;
  top: 0;
  z-index: 1000;
  background-color: lime;
  width: 100%;
  scale: 0 1;
  transform-origin: left;

  animation: scrollWater linear;
  animation-timeline: scroll(y);
}

@keyframes scrollWatcher {
  to {scale: 1 1; }
}

.main{
  width: 100%;
  height: 100vh; 
  position: relative;
  overflow: auto;
  background: white;
}

.question{
  width: 100%;
  height: 10vh;
  position: relative;
  overflow: hidden;
  background: color(rgb(0, 0, 0));
}

.answers{
  width: 100%;
  height: 30vh;
  position: relative;
  overflow: hidden;
  background: color(rgb(255, 253, 253));
}

.container {
  height: 150px;
  position: relative;
}

.centerButtons {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.centerText {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.btn {
  border: 2px solid black;
  background-color: white;
  display: inline-block;
  text-decoration: none;
  padding: 8px 15px;
  color: black;
  font-size: 13px;
  border-radius: 45px;
  transition: 0.2s;
  cursor: pointer;
  font-weight: bold;
  height: auto;
  width: auto;
}

.btn:hover{
  font-size: 25px;
}

.btn.btn:click {
  background-color: green;
}

.buttonCenter {
  margin: 0;
  top: 50%;
  left: 43%;
  -ms-transform: translate(-50%, -50%);
}