* {box-sizing: border-box; margin: 0; padding: 0;}

body { background-image: url('starring.png'), repeating-linear-gradient(to left, rgba(205,0,0,0.4), rgba(205,0,0,0.4) 50%, rgba(0,0,205,0.4) 30px, rgba(0,0,205,0.4) 100%);
background-color: rgba(0,0,0); }

.container {
  display: flex; flex-direction: column;
}

h1, h2, h3, h4, h5, h6, p { font-family: 'Gloria Hallelujah', cursive; }

input {
  padding: 10px 20px; outline: none; border: 3px solid #666;
}

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.fade-in-enter-active { animation: fade-in 0.5s reverse; }
.fade-in-leave-active { animation: fade-in 0.5s; }

@keyframes fade-in {
    from { opacity: 1; }
    to   { opacity: 0; }
}

.wonModal {
  background-color:rgba(155, 155, 155, 0.9); width: 100%; height: 100%; position: fixed; bottom: 0; display: flex; justify-content: center;
  align-items: center;
}

.innerModal {
  background-color: white; height: 75%; width: 50%; padding: 10px; border-radius: 10px; overflow-y: scroll; overflow-x: hidden;
  display: flex; flex-direction: column; justify-content: space-evenly; align-items: center;
}

button {
  padding: 15px 30px;
  border-radius: 5px;
  border: 2px solid black;
  margin: 10px 15px;
  cursor: pointer;
}