html {
  scroll-behavior: smooth;
}

h1 {
  font-family: 'Playfair Display', serif; 
}
h2, h3 {
  font-family: 'Playfair Display';
  font-style: italic;
}
span {
  font-family: 'Great Vibes', sans-serif;
}
p, strong, input, label {
  font-family: 'Lora', serif;
}
.color-circle:hover {
  transform: scale(1.1);
  transition: transform 0.5s ease;
}

button:hover {
  transform: scale(1.02);
  transition: transform 0.5s ease;
}

hr {
	margin: 20px 0;
	padding: 0;
	height: 10px;
	border: none;
	box-sizing: border-box;
	background-position: 50%;
	color: #69A86A;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="3px" height="3px" viewBox="0 0 3 3" fill="green"><polygon points="0,0.5 0,1.5 1.5,3 2.5,3"></polygon><polygon points="2.5,0 1.5,0 3,1.5 3,0.5"></polygon></svg>');
	background-size: 6px 6px;
}