body {
    background-color: rgb(84, 71, 92);
  }
  
  .background {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 0;
  }
  
  .custom-border{
    box-shadow: 0px 0px 13px 7px black;
    display: inline-block;
    width: 23vw;
    height: 60vh;
    background-color: rgb(64,53,79);
    border: 25px solid;
    padding: 15px;
   
    animation: colorchange 15s infinite; /* animation-name followed by duration in s infiniteeconds*/
        /* you could also use milliseconds (ms) or something like 2.5s */
    -webkit-animation: colorchange 15s infinite; /* Chrome and Safari */
  }
      @keyframes colorchange
      {
         0%{border-color: #622569}
        10%{border-color: #7D3EBC}
        20%{border-color: #4288fd}
        30%{border-color: #BC3EBC}
        40%{border-color: #BC3E7D}
        50%{border-color: #d66c41}
        60%{border-color: #feb236}
        70%{border-color: #BC3E3E}
        80%{border-color: #d64186}
        90%{border-color: #c83349}
        100%{border-color: #84034f} 
      }
  
      @-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
      {
         0%{border-color: #622569}
        10%{border-color: #7D3EBC}
        20%{border-color: #BC3EBC}
        30%{border-color: #BC3E7D}
        40%{border-color: #BC3E7D}
        50%{border-color: #d66c41}
        60%{border-color: #feb236}
        70%{border-color: #BC3E3E}
        80%{border-color: #d64186}
        90%{border-color: #c83349}
        100%{border-color: #84034f} 
      }
  
      .parent {
          display: flex;
          flex-direction: column;
          text-align: center;
          margin-top: 1%;
      }

.greet { 
  font-family: 'Quicksand', sans-serif;
  color: 	#f8f4ff;
  font-size: 35px;
  margin-top: .5em;
  margin-bottom: .5em;
}

.info { 
  font-family: 'Quicksand', sans-serif;
  color: #f8f4ff;
  font-size: 25px;
  margin-top: .5em;
  margin-bottom: 0;
}