@charset "UTF-8";

/* This animation was made with the help of: https://dev.to/tiaeastwood/super-simple-css-animation-for-fade-in-on-page-load-2p8m  */
@keyframes fadeInUp {   /*Creates an 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;
}

 h1{ /* defines the styling for the heading */
	font-size:3em; /* size */
	border-radius: 15px; /* rounded */
	font-family: StoryScript; /* Font */
	animation: 1.5s fadeInUp /* Animation */
}

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

/* 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 */
	display: inline-block;
}
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;
}


.imghome{ /* defines styling for the image on the home page */
	display:block;
	margin-left:auto;
	margin-right:auto;
	margin-top:auto;
	margin-bottom:auto;
}

.divhome{ /* defines styling for the div on the home page */
	width:80%; /* div takes up 80% of the screen */
	margin: 0 auto;
	margin-top:10px;
	margin-bottom:20px;
}
.divhomeimg{ /* defines styling for the div that surrounds the image */
	display:block;
	padding: 20px 10px;
	margin: 0 auto;
	width: 40%; /* takes up 50% of the screen */
	min-width:500px;
}

.bodyhome{ /* background page for the home screen */
	background-image: url("Images/Capadocia.jpeg");
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
}

/* These fonts were embedded with the help of https://www.w3schools.com/ */
@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);
}