@charset "UTF-8";

.divtop{
	width:70%; /* div takes up 80% of the screen */
	margin: 0 auto;
	margin-top:15px;
	margin-bottom:20px;
}


@keyframes fadeInUp { /*Creates a animation where the element flies up from the bottom and fades in */
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

.centered{ 
	text-align: center; /*centers the element*/
}

.text_background{
	background-color: lightgray; /* makes the background a light gray */
}

.bold{
	font-weight: bold; /* makes the text bold */
}

.text_color{ /* color of text */
	color: #1D1D1F;
}

/* This shadow was made with the help of https://www.w3schools.com/ */
.curvedshadowborder{
	border-radius:30px; /*rounded edge */
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* dimensions and size of shadow */
	padding:10px;
}

/* was made with the help of https://stackoverflow.com/questions/40733290/left-half-rounded-border */
.leftcurvedborder{ /* makes the left border of the element rounded */
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px; 
}

.rightcurvedborder{ /* makes the right border of the element rounded */
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

.divnav{
	margin-top: 10px;
	z-index: 1000;
	position: fixed;  /* keeps it stuck to the top */
	top: 0; 
	width: 100%;
	justify-content: center;
	display: flex;
}

/* Makes the navigation bar at the top of the website */
ul{
	list-style-type: none; /* removes the default bullet */
	margin:0px;
	padding:0px;
	overflow: auto; /* scroll bar only if needed */
}
ul li{
	float: left;
}
ul li a{
	color: black; /* text color */
	text-decoration: none; /* no underline */
	font-family: DynaPuff; /* font */
	padding: 14px 16px;
	display: block;
	animation: 1s fadeInUp /* animation */
}
ul li a:hover{ /* changes color when the user hovers over it */
	background-color: darkgray;
}
.active{ /* changes color based on whether the user is on the page or not */
	background-color: gray;
}


body{
	background-color: #bc8e86; /* color of the background */
	padding-top: 70px;
}

p{ /* defines the styling for the paragraphs */
	font-family: delius; /* font */
	font-size: 2em; /* text size */
	padding:10px 40px;
	animation: 1.5s fadeInUp; /* animation */
}

/* the fonts */
@font-face{
	font-family: StoryScript;
	src: url(Fonts/StoryScript-Regular.ttf);
}
@font-face{
	font-family: Delius;
	src: url(Fonts/Delius-Regular.ttf);
}
@font-face{
	font-family: DynaPuff;
	src: url(Fonts/DynaPuff-Regular.ttf);
}