/* reset browser styles */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.2;
}
ol { 
	padding-left: 1.4em;
	list-style: decimal;
}
ul {
	padding-left: 1.4em;
	list-style: square;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
} 
/* end reset browser styles */

/* overarching styles */

/* exo-2-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/exo-2-v26-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html {
	background-color: #7E6B8F;
	background-image: url("./images/waveline.svg");
	background-size: cover;
	font-size: 18px;
}

h1 {
	font-family: 'Exo 2', display;
	font-weight: 200;
	font-size: 2.49em;
}

h2 {
	font-family: 'Exo 2', display;
	font-weight: 100;
	font-size: 2.07em;	
}

h3 {
	font-family: 'Exo 2', display;
	font-weight: 100;
	font-size: 1.73em;	
}

p {
	font-family: 'Exo 2', sans-serif;
	font-size: 1em;
}

a {
	font-family: 'Exo 2', sans-serif;
	font-size: 1em;
	text-decoration: none;
	color: #32A287;
	transition: all 2s;
}

a:hover {
	color: #7E6B8F;
}

/* homepage styles */

.homepage h1 {
	text-align: center;
	color: #090C02;
	line-height: 50px;
	display: flex;
	align-items: center;
	width: 400px;
}

.homepage a {
	font-size: 1.73em;
}

.homepage header {
	display: flex;
  	justify-content: center;
 	align-items: center;
	margin: 0;
  	position: fixed;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	background-color: #E8E9EB;
	width: 500px;
	height: 500px;
	margin: auto;
	border-radius: 100%;
	box-shadow: 0 0 10px 2px #E8E9EB;
	transition: all 2s;
}

.homepage header:hover {
	box-shadow: 0 0 30px 2px #E8E9EB;
}

.homepage #random {
	background-color: #E8E9EB;
	width: 300px;
	height: 300px;
	margin: auto;
	border-radius: 100%;
	box-shadow: 0 0 10px 2px #E8E9Eb;
	display: flex;
  	justify-content: center;
 	align-items: center;
  	position: fixed;
  	top: 20%;
  	left: 70%;
  	transform: translate(-50%, -50%);
	transition: all 2s;
}

.homepage #random:hover {
	box-shadow: 0 0 30px 2px #E8E9EB;
	font-size: 1.2em;
}

.homepage #community {
	background-color: #E8E9EB;
	width: 300px;
	height: 300px;
	margin: auto;
	border-radius: 100%;
	box-shadow: 0 0 10px 2px #E8E9Eb;
	display: flex;
  	justify-content: center;
 	align-items: center;
  	position: fixed;
  	top: 45%;
  	left: 15%;
  	transform: translate(-50%, -50%);
	transition: all 2s;
}

.homepage #community:hover {
	box-shadow: 0 0 30px 2px #E8E9EB;
	font-size: 1.2em;
}

.homepage #globe {
	background-color: #E8E9EB;
	width: 300px;
	height: 300px;
	margin: auto;
	border-radius: 100%;
	box-shadow: 0 0 10px 2px #E8E9Eb;
	display: flex;
  	justify-content: center;
 	align-items: center;
  	position: fixed;
  	top: 80%;
  	left: 75%;
  	transform: translate(-50%, -50%);
	transition: all 2s;
}

.homepage #globe:hover {
	box-shadow: 0 0 30px 2px #E8E9EB;
	font-size: 1.2em;
}

/* navigation bar styles */

nav {
	background-color: #E8E9EB;
	width: 60%;
	height: 50px;
	margin: auto;
	margin-top: 2%;
	border-radius: 20px;
	padding-top: 15px;
	padding-bottom: -40px;
	box-shadow: 0 0 10px 2px #E8E9Eb;
	transition: all 2s;
}

nav ul {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 80px;
	list-style: none;
	line-height: 35px;
	font-size: 1.44em;
}

nav ul:hover {
	font-size: 1.56em;
	box-shadow: 0 0 30px 2px #E8E9EB;
}

/* random generator styles */

.random {
	background-color: #E8E9EB;
	width: 60%;
	margin: auto;
	margin-top: 20%;
	border-radius: 20px;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 30px;
	box-shadow: 0 0 10px 2px #E8E9Eb;
	transition: all 2s;
}

.random:hover {
	box-shadow: 0 0 30px 2px #E8E9EB;
	font-size: 1.2em;
}

.random h1 {
	margin-bottom: 20px;
}

.random p {
	width: 60%;
	margin: auto;
	line-height: 25px;
	padding-bottom: 20px;
}

.random a {
	background-color: #32A287;
	color: #E8E9EB;
	padding: 7px;
	border-radius: 5px;
	font-size: 1.44em;
	box-shadow: 0 0 10px 2px #E8E9Eb;
}

.random a:hover {
	font-size: 1.56em;
	background-color: #7E6B8F;
}

/* globe styles */

.globe {
	background-color: #E8E9Eb;
	width: 60%;
	margin: auto;
	margin-top: 100px;
	border-radius: 20px;
	box-shadow: 0 0 10px 2px #E8E9Eb;
	transition: all 2s;
}

.carousel {
	width: 500px;
	overflow-x: auto;
	margin: 3em auto;
	display: flex;
	justify-content: space-between;
	gap: 0;
	scroll-behvaior: smooth;
	anchor-name: --carousel;
	scroll-snap-type: x mandatory;
}

.carousel::-webkit-scrollbar {
	display: none;
}

.carousel::scroll-button(right), .carousel::scroll-button(left) {
	content: '⇨';
	border: none;
	background-color: #E8E9Eb;
	color: #32A287;
	font-size: 3rem;
	height: 60px;
	width: 60px;
	scroll-behavior: smooth;
	position: fixed;
	position-anchor: --carousel;
	position-area: right center;
}

.carousel::scroll-button(left) {
	content: '⇦';
	position-area: left center;
}

.carousel::scroll-button(right):hover, .carousel::scroll-button(left):hover {
	box-shadow: 0 0 10px 2px #32A287;
	cursor: pointer;
}

.side {
	scroll-snap-align: start;
	0 0 20 em;
}

.globe h1 {
	text-align: center;
	padding-top: 30px;
}

.globe #info {
	text-align: center;
	margin-top: -40px;
	padding-bottom: 40px;
}

.globe h2 {
	color: #32A287;
	padding-bottom: 10px;
}

.globe p {
	width: 500px;
	margin: auto;
}

/* community styles */

.community {
	background-color: #E8E9EB;
	width: 60%;
	margin: auto;
	margin-top: 10%;
	border-radius: 20px;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 30px;
	box-shadow: 0 0 10px 2px #E8E9Eb;
	transition: all 2s;
}

.community:hover {
	box-shadow: 0 0 30px 2px #E8E9EB;
	font-size: 1.2em;
}

.community h1 {
	margin-bottom: 20px;
}

.community p {
	width: 60%;
	margin: auto;
	line-height: 25px;
	padding-bottom: 20px;
}

.community a {
	color: #E8E9EB;
	border-radius: 5px;
	font-size: 1.44em;
	box-shadow: 0 0 10px 2px #E8E9Eb;
	transition: all 2s;
}

.random a:hover {
	color: #7E6B8F;
}

#post {
	display: flex;
	flex-direction: columns;
	border: 1px solid #090C02;
	border-radius: 5px;
	text-align: justify;
	width: 80%;
	margin: auto;
	margin-bottom: 40px;
}

#post img {
	width: 100px;
	height: 100px;
	margin-left: 30px;
}

#post p, h3 {
	margin-left: 30px;
}

/* footer styles */

.footer {
	text-align: center;
	background-color: #E8E9EB;
	position: fixed;
	width: 100%;
	bottom: 0px;
	box-shadow: 0 0 10px 2px #E8E9Eb;
	transition: all 2s;
	font-family: 'Exo 2', sans-serif;
}

.footer p {
	font-size: 1.2em;
}

.footer ul {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 50px;
	list-style: none;
	line-height: 35px;
	font-size: 1em;
}

.footer:hover {
	box-shadow: 0 0 30px 2px #E8E9EB;
}