body {
	background-color: #ad2f56;
}
h1 {
	color: rgb(0,0,0);
  font-family: "Roboto Slab", serif;
  text-shadow: 5px 5px 5px #E75480;
}
h2 {
	font-family: "Roboto Slab", serif;
  text-shadow: 5px 5px 5px #E75480;
}

#main {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 183, 197) 50%);
	background-color: #FFB7C5;
}

#main h1:before,
#main h1:after {
	content: "🌸";
}

#government {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 183, 197) 50%);
	background-color: #FFB7C5;
}
#government h2:before,
#government h2:after {
	content: "🏯";
}

#cities {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 183, 197) 50%);
	background-color: #FFB7C5;
}
#cities h2:before,
#cities h2:after {
	content: "🏙️";
}

#economy {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 183, 197) 50%);
	background-color: #FFB7C5;
}
#economy h2:before,
#economy h2:after {
	content: "📈";
}

#culture {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 183, 197) 50%);
	background-color: #FFB7C5;
}
#culture h2:before,
#culture h2:after {
	content: "👹";
}

#information {
  background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(255, 183, 197) 30%);
  background-color: #FFB7C5;
}

.box {
  padding: 15px;
  margin-bottom: 20px;
  border: 4px solid black;
  text-align: center;
  box-shadow: 0 8px 16px rgb(255, 255, 255)
}

ol {
	display: inline-block;
}

p {
  font-family: "Roboto Slab", serif;
}

ol {
  font-family: "Roboto Slab", serif;
}

ul {
  font-family: "Roboto Slab", serif;
}

/*
Pseudoclass Selectors
selector:pseduoclass-name

:link
:visited
:hover
:active

:before
:after
:focus
*/

a:link {
	color: #0000FF;
}
a:visited {
	color: #0000FF;
}
a:hover {
	color: #00008B;
}

a:active {
  color: #8B0000;
}

#main img,
#culture img {
  border-radius: 30%;
}

#circle {
	width: 100px;
  height: 100px;
  background-color: #a30a0a;
  position: relative;
  animation-name: color-change;
  animation-duration: 7s; 
  animation-iteration-count: infinite;
  border-radius: 50%;
}

@keyframes color-change {
  0% {background-color: #a30a0a; left: 0; top: 0;}
  25% {background-color: white; left: 600px; top: 0;}
  50% {background-color: black; left: 600px; top:0;}
  100% {background-color: #a30a0a; left: 0; top: 0;
  }
}