@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Diplomata+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

/*fonts imported from googlefonts to use in css*/

#css-zen-garden{
	background: url(https://images.unsplash.com/photo-1608114759160-ad0b1bac35b2?q=80&w=736&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
}
/*used copyright-free image for background*/

h1{
	font-family: "Playfair Display", serif;
	font-size: 74px;
	letter-spacing: 3px;
	color: darkslategrey;
	text-align: center;
}
/*styled title and subtitle 
using fonts, font colors, size, style, etc
aligned in designated area*/
h2{
	text-align: left;
	margin-left: 220px;
	font-family: "Playfair Display", serif;
	font-style: italic;
	font-size: 30px;
	color: darkslategrey;
}

h3{
	font-size: 24px;
	color: darkslategrey;
	margin-left: 32px;
}


p{

	font-size: 20px;
	color: darkslategrey;
	margin-left: 78px;
	margin-right: 60px;
}


p::first-letter{
	font-size: 28px;
	font-style: italic;
	letter-spacing: 3px;
	text-shadow: 2px 3px 1px rgba(0, 0, 0, 0.4);
}

/*used pseudo-elements to highlight
first letter of each paragraph*/

a{
	font-weight: bold;
	color: teal;
}
/*link is highlighted in different style and color*/

.summary, .preamble, .participation, .benefits, .requirements {
	border-radius: 40px;
	width: 60vw;
	background: #8FBC8F80;
	padding: 20px;
	margin: 80px;
	animation-name: appear;
	animation-duration: 2s;
}

/*rounded edges of box, made box slightly opaque
added appearing animation -- elements are completely hidden at first and gradually appears*/

@keyframes appear {
	0% {opacity: 0.0;}
	100% {opacity: 1.0;}
}

.summary:hover, .preamble:hover, .participation:hover, 
.benefits:hover, .requirements:hover {
	background: radial-gradient(circle, cadetblue, transparent);
}

/*when hovered, gradient effect appears
made it not too bold to avoid distracting text inside*/

.main.supporting > div {
	border-radius: 40px;
    width: 60vw;
    background: #8FBC8F80;
    padding: 20px;
    margin: 80px;

}

.main.supporting > div:hover{
	background: radial-gradient(circle, cadetblue, transparent);
}


.sidebar{
    position: fixed;      
    top: 0;           
    right: 0;
    bottom: 0;             
    width: 20vw;         
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    background: #8FBC8F80;
}

/*sidebar and footer designed in similar style,
but wanted it to stay in place without fancy effects -- sidebar is pinned in rightside, no animations */

footer{
	border-radius: 40px;
	width: 60vw;
	background: #8FBC8F80;
	padding: 20px;
	margin: 80px;
}