img, p, h1, h2, h3, #divider  {
	width: 100%;
	max-width: 640px;
    margin-left: auto;
	margin-right: auto;
}

img {
	display: block;
	padding: 15px 0px;
}

p {
	font-size: 20px;
	line-height: 1.4;
    font-family: "Crimson Text";
}

h1, h2, h3 {
    font-family: "Futura";
}

h1 {
    font-size: 36px
}

h3 {
    font-style: italic;
}

#divider {
    height: 5px;
    background-color: #5a4978;
    margin-top: 10px;  
    margin-bottom: 10px;
}

#animation {
     width: 100%;
     height: auto;
}

a {
  color: #5a4978;
}

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

.fade-element {
  opacity: 0;
  animation: fade-in linear forwards;
  animation-timeline: view();
  animation-range: entry 70% entry 100%;
}


#spacer{
    height: 5vh;
    color: white
}

.container {
  display: flex;
  gap: 1.5rem;
  align-items: center; 
  opacity: 0;
  animation: fade-in linear forwards;
  animation-timeline: view();
  animation-range: entry 70% entry 100%; 
  width: 100%;
	max-width: 640px;
    margin-left: auto;
	margin-right: auto;
}

.container img {
  width: 100px;      
  flex-shrink: 0;    
  object-fit: cover; 
  transition: opacity 0.8s ease;
}

.container .text {
  flex: 1;          
}

#image {
    width: 100%;
	max-width: 1000px;
    margin-left: auto;
	margin-right: auto;
}

#image2 {
    width: 100%;
	max-width: 900px;
    margin-left: auto;
	margin-right: auto;
}