body {
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    font-family: arial; 
}
/*.button{
    max-width: 500px; 
    height: 50px; 
    border: none; 
    border-radius: 30px; 
    width: 60vw; 
    margin: auto; 
    font-size: 20px;
    color: white;  
    background: linear-gradient(45deg, rgba(238,188,196,1) 0%, rgba(255,0,106,1) 100%); 
    box-shadow: 1px 4px black; 
    text-shadow: 2px 1px black; 
}*/



.button {background-image: linear-gradient(to right, #FF512F 0%, #DD2476  51%, #FF512F  100%)}
.button {
   margin: 10px;
   max-width: 70vh;
   padding: 15px 45px;
   align-self: center;
   width: 40vw;
   height: 8vh;
   min-height: auto;
   text-align: center;
   text-transform: uppercase;
   transition: 0.5s;
   background-size: 200% auto;
   color: white;            
   box-shadow: 0 0 20px #eee;
   border-radius: 10px;
   display: block;
 }

 .button:hover {
   background-position: right center; /* change the direction of the change here */
   color: #fff;
   text-decoration: none;
 }


.word-container{
    width: 70vw; 
    max-width: 700px; 
    margin: 20px auto; 
    background-color: black; 
    border-radius: 30px; 
    box-shadow: 1px 4px #ff512f; 
}
h1, p {
    text-align: center;  
    text-transform: uppercase; 
    color: white; 
    padding: 5px; 
    margin: 2px 5px; 
}
.title{
    color: black; 
    text-transform: none; 
    font-size: 40px; 
    padding-top: 30px; 
    padding-bottom: 100px; 
    text-shadow: 1px 4px #ff512f; 
}
.CTA{
    padding-bottom: 10px; 
    font-weight: bolder;
    color: black; 
}
.display-none{
    display: none; 
}
.error{
    color: red; 
    font-weight: bolder; 
    text-decoration: line-through; 
}