@charset "UTF-8";

body {
	margin: 0;
	padding: 0;
	background-size: 100% 100%;
	opacity: 1;
	min-height: 100vh;
	/*vh means viewport height - found by w3schools https://www.w3schools.com/cssref/css_units.php*/
	width: 100%;
}

.planebackground {
	background-image: url("images/Planebackground.jpg");
	/*Found at Vectorstock -> 	https://www.vectorstock.com/royalty-free-vector/plane-taking-off-sunset-background-vector-38692847*/
}

.acabackground {
	background-image: url("images/acabackground.jpg")
		/*found at unblast.com -> https://unblast.com/10-free-space-background-images-jpg/*/
}

.subjectsbackground {
	background-image: url("images/subbackground.jpg")
		/*found at Charles Design Build -> https://www.clarisdesignbuild.com/5-reasons-why-large-commercial-construction-projects-often-go-over-budget/*/
}

.campingbackground {
	background-image: url("images/campingbackground.jpg")
		/*found at pngtree.com -> ba https://pngtree.com/freebackground/a-dark-forest-with-tall-trees-and-glowing-fireflies-path-leading-through-the-woods_16518888.html*/
}

h1 {
	text-align: center;
	background-color: rgb(34, 200, 103);
	font-size: 2em;
	/*em means the current font of device https://www.w3schools.com/cssref/css_units.php*/
	font-family: 'Carter One';
	/*From google fonts https://fonts.google.com/*/
}

.blackborder { /*Made with the help of Mrs. Taricco*/
	border-style: solid;
	border-width: 3px;
	border-color: black;
	border-radius: 20px;
	padding: 0px;
	margin: 25px;
}

.imgw2 {
	width: 20%
}

.imgw3 {
	width: 30%
}

.imgw4 {
	width: 40%;
	margin: 30px 30px;
}

.imgw5 {
	width: 50%;
	margin: 30px 30px;
}

.imgw6 {
	width: 60%
}

.imgw7 {
	width: 70%
}

.imgw8 {
	width: 80%
}

.imgw9 {
	width: 25%
}

.imgh {
	height: 40%
}

.clearfix {
	overflow: auto;
}

.automargin {
	margin: auto;
	margin: 2%
}

.centerdiv {/*Some elements created with the help of my dad*/
	width: 60%;
	margin: auto;
	margin-top: 50px;
	margin-bottom: 50px;
	background: #EAE9E6;
	padding: 20px;
	text-align: center;
	display: block;
	align-items: center; /* vertical alignment */
	justify-content: center; /* optional: center them horizontally */
	gap: 15px; /* spacing between items */
}

.soon {
	width: 600px;
	background: #444444;
	color: white;
	margin: auto;
	padding: 20px;
}

.Kanit {
	font-family: "Kanit", sans-serif;
	/*Font from Google fonts https://fonts.google.com/*/
}

img {
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	border-style: solid;
	border-width: 3px;
	border-color: black;
	border-radius: 20px;
}

.imgzero {
	border-style: none;
	border-radius: 0;
}

h2 {
	text-align: center;
	margin-right: 40px;
	width: 100%;
	display: block;
	font-size: 2.5em;
}

p {
	font-size: 1.5em;
	margin: 10px;
}

.floatright {
	float: right;
}

.floatleft {
	float: left
}

ul {
	list-style-type: none; /*Removes bullet*/
	/*For margin command one number for a margin is all four sides, two is top/bottom 
then left/right, and four is top then left then bottom then right*/
	margin: 0;
	padding: 0; /*removes default margin/padding*/
	overflow: hidden; /*keeps elements inside the unordered list*/
	background-color: #06402B;
	border-style: solid;
	border-width: 3px;
	border-color: black;
}

/*Navigation bar made with the help of w3schools https://www.w3schools.com/css/css_navbar.asp and Mrs. Taricco*/
ul li {
	float: left;
}

ul li a {
	display: block; /*Makes the list item anchor block instead of inline*/
	color: #F1F1F1; /*Changes text color*/
	padding: 10px 36px;
	text-decoration: none; /*Removes the underline*/
	font-size: 1em;
}

ul li a:hover {
	background-color: #111111;
}

/*Dropdown on the academics part of the navigation bar made with the help of https://www.w3schools.com/css/css_dropdowns.asp*/
.dropdowncontent {
	display: none; /*Hides boxes by default*/
	position: absolute;
	background-color: #06402B;
	min-width: 160px; /*sets default width of dropdown*/
}

.dropdowncontent a { /*Styles dropdown content*/
	color: white;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: center;
}

.dropdowncontent a:hover {
	background-color: #03201A;
}

.dropdown:hover .dropdowncontent {
	display: block;
}

/*Done with the help of Mrs. Taricco*/
/* Carosel wrapper */
.carousel {
	width: 100%; /*full width of parent*/
	max-width: 400px; /*Optional max width */
	overflow: hidden; /*hide overflowing slide*/
	float: left;
	margin: 0px 15px 15px 0px; /*carousel margin is established*/
}

/*Slides container - row of images */
.slides {
	display: flex;
	transition: transform 0.5s ease;
	/*smooth sliding animation for transition*/
}

.slides img {
	width: 100%;
	margin: auto; /*maintain aspect ratio*/
	flex-shrink: 0; /*keeps image from potentially shrinking*/
}