.wrong{
  color: #FFAACF;
}
.right{
  color:#B9F3E4;
}
a{
font-size: 150%;
margin-left: 5%;
margin-right: 5%;
font-family: 'Courier New', Courier, monospace;
color:rgb(194, 200, 206);
}
.star{
font-size: 100%;
color: #2f2d30;
font-family: 'Courier New', Courier, monospace;
font-style: italic;
}
.difContainer{
  display: flex;
  justify-content: space-between;
  margin-left: 5px;
  margin-right: 5px;
}

footer{
align-self: flex-end;
background-color: #06004713;
border-radius: 50px;
align-content: center;
text-align: center;
}
p{
  font-size: 200%;
  text-align: center;
  color: #241b25;
  margin: 5%;
  font-family: 'Courier New', Courier, monospace
}
body{
  background-color: #63515a;
  position: relative;

}
textarea:focus, input:focus{
  outline: none;
}
.score{
  position:relative;
  text-align: left;
  color: rgb(218, 209, 168);
  font-size: 150%;
}
@keyframes example {
  0%   {background-color: rgba(255, 255, 255, 0);color: rgba(0,0,0,0);top:-50px;border-color: transparent;}
  40%  {top:0px}
  100% {background-color: #ffd8ed;color: #060047;top:0px;border-color: black;}
}


.spoiler{
color:transparent;
background-color: black;
}
.spoiler:hover{
background-color: transparent;
color:black;
}
.hoverable {
  position: relative;
}

.hoverable>.hoverable__tooltip {
  display: none;
  z-index: 10;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
}

.hoverable:hover>.hoverable__tooltip {
  display:inline;
  position: absolute;
  text-align: center;
  top:0px;
  left:0px;
  margin:5%;
  background-color: #ffd8ed;
  color: #060047;
  border: 1px solid black;
  border-radius: 30px;
  animation-name: example;
  animation-duration: 0.5s;
}
.next{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 200%;
  text-align: center;
  height: 50px;
  width: 150px;
  color: #3C2C3E;
  margin: 5%;
  font-family: 'Courier New', Courier, monospace;
  border-radius: 5px;
}

.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;  
background: #2d282e;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%; 
background: #361a28;
cursor: pointer;
}

.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #361a28;
cursor: pointer;
}
.cursor{
  color:white;
  animation: blink 1s linear infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
.container {
  display: flex;
  padding:10pt;
  justify-content: space-between;
  margin-left: 20%;
  margin-right: 20%;
  margin-top: 15%;
}
button{
  padding: 5pt;
  margin-left:20pt;
  margin-right:20pt;
  box-shadow: 0 0 30px rgb(184, 184, 184);
  font-size: 20pt;
  border: none;
}
.prepText{
  font-size: 300%;
}
@media (orientation: portrait) {
  .container{
    margin-left: 0%;
    margin-right: 0%;
    margin-top: 65%;
  }
  button{
    font-size: 300%;
  }
  .prepText{
    font-size: 500%;
  }

}