@font-face {
  font-family: classyvouge;
  src: url(Classyvogueregular.ttf);
}

#Date {
text-align: right;

}

* {
align-items: center;  
}

@keyframes AutumnColorChange {
  0% {color: #D56C6C;}
  50% {color: #D59A6C;}
  75% {color: #D5BB6C;}
  100% {color: #D56C6C;}
}

/* this is unused, but will be implemented later */
@keyframes leafDrop { 

  0% {transform: rotate(0deg); 
     }
 100% {transform: rotate(360deg);
      }
}


b {
  animation: AutumnColorChange 3s infinite;
  font-family: classyvouge;
}


i {
  
  font-family: classyvouge;
}


#autumnWord {
animation: AutumnColorChange 3s infinite;
}

p {
  font-family: classyvouge;
}

button {
  font-family: classyvouge;
  border: 1px solid black;
  padding: 12px;
  font-size: 12px;
  color: black;
  background-color: white;
  border-radius: 8px;
}

h2 {
font-family: classyvouge;
}

marquee {
 font-family: classyvouge;
width: 60%;
}

footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
display: flex;
justify-content: space-between; 
align-items: center;  
background-color: white;
}



footer p {
  margin: 0;      
  display: inline; 
}

#leafRed {
animation: leafDrop 5s ease-in forwards infinite;
}

#thanksPage {
text-align: center;
font-size: 7;
}


.Definition {
background-color: white;
border: 1px solid black;
border-radius: 8px;
box-shadow: 2px 5px 5px gray;
padding: 5px;
gap: 0px;
width: 60%;
overflow: scroll;
}


#Def {
display: flex;
  align-items: center;   
  gap: 5px;   
}
h1 {
font-size: 30px;
}

#invisText {
color: white;
}

.firstTextBox {
width: 60%;
}