@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

body{
	font-family: 'Lato', sans-serif;
}

h1, h2, h3{
	font-family: 'Comfortaa', serif;
}

h1{
	font-weight: 700;
	text-align: center;
}
h2{
	font-weight: 400;
}

header{
	background: #7ac943;
}

nav ul{
	display: flex;
	list-style: none;
	font-weight: bold;
	justify-content: space-evenly;
	margin: 0 auto;
	padding: 10px;
	max-width: 800px;
}

nav ul a{
	text-decoration: none;
	color: white;
}
nav ul a:hover{
	color: #ff7bac;
}

.container{
	max-width: 1200px;
	margin: 0 auto;
}

.bullet-list li{
	list-style-image: url(../images/yellowstarsmall.png);
}

.out-list ol{
	list-style: upper-roman;
}

.out-list ol ol{
	list-style: lower-latin;
}

.buttons-list li{
	line-height: 4em;
}
.buttons-list a{
	text-decoration: none;
	font-weight: bold;
}

.body-link a{
	color: #3fa9f5;
	font-weight: normal;
}
.body-link a:hover{
	color: #a552b2;
}

.fill-butt a{
	background: #ff7bac;
	padding: 10px;
	border: 2px solid #ff2689;
	border-radius: 4px;
	color: white;
}
.fill-butt a:hover{
	color: #ff2689;
}

.modern-butt a{
	padding: 10px;
	border: 2px solid #ff2689;
	border-radius: 4px;
	color: #ff2689;
}
.modern-butt a:hover{
	box-shadow: inset 1px -1px 5px  #ff2689;
}

.choice1 a{
	color: black;
	text-decoration: underline 2px dotted #3f93f5;
}
.choice1 a:hover{
	text-decoration: none;
	border:4px dashed #7ac943;
}

.choice2 a{
	padding: 10px;
	background: linear-gradient(to right, #a552b2, #3f93f5);
	color: white;
}
.choice2 a:hover{
	background: -webkit-linear-gradient(to right #a552b2, #3f93f5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}