@charset "UTF-8";

/*NavBar for Home Page*/
body.index {
	background-image: url(images/clashbg.jpg); /*image courtesy of https://www.reddit.com/r/ClashRoyale/comments/5y1wlo/clash_royale_diamond_background_1920x1080/*/
	background-repeat: repeat;
	font-family: "Luckiest Guy", sans-serif;
	text-align: center;
	padding: 0;
	width: 100%;
}

.navhome {
	text-decoration: none;
}

.home {
	font-size: 8em;
	padding-top: 10%;
	color: rgb(23, 52, 99);
	background-color: rgb(0,0,0,0);
}

/*image grid made using help from https://www.w3schools.com/howto/howto_js_image_grid.asp*/
.deck {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
	padding: 20px;
	max-width: 100vw;
}

.card {
	background-color: rgb(0, 55, 130, 0.5);
	color: rgb(136, 155, 170);
	padding: 1.5vw;
	border-radius: 5%;
	box-shadow: inset 0 0 0 4px rgb(204, 243, 252, 0.6); /*made using help from https://www.w3schools.com/cssref/css3_pr_box-shadow.php*/
	transition: transform 0.4s ease, background-color 0.3s;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 3.5vw;
	aspect-ratio: 2/3;
	width: 100%;
	min-width: 100px;
}

.cardpersonal {
	background-image: url(images/iphonebg.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}

.cardpersonal:hover {
	transform: scale(1.1);
}

.cardcs {
	background-image: url(images/comscibg.png); /*image courtesy of https://commons.wikimedia.org/wiki/File:Computer_science_education.png*/
	background-size: cover;
	background-repeat: no-repeat;
}

.cardcs:hover {
	transform: scale(1.1);
}

.cardhum {
	background-image: url(images/walden.jpg); /*image courtesy of https://en.wikipedia.org/wiki/Walden_Pond*/
	background-size: cover;
	background-repeat: no-repeat;
	color: rgb(156, 175, 190);
}

.cardhum:hover {
	transform: scale(1.1);
}

.cardlang {
	background-image: url(images/dora.png); /*image courtesy of https://en.wikipedia.org/wiki/Dora_%28Dora_the_Explorer%29*/
	background-size: cover;
	background-repeat: no-repeat;
}

.cardlang:hover {
	transform: scale(1.1);
}

.cardmath {
	background-image: url(images/math.jpg); /*image courtesy of https://stock.adobe.com/search?k=math+png&asset_id=658323926*/
	background-size: cover;
	background-repeat: no-repeat;
}

.cardmath:hover {
	transform: scale(1.1);
}

.cardphysics {
	background-image: url(images/physics.jpg); /*image courtesy of https://iconscout.com/illustrations/physics-logo*/
	background-size: cover;
	background-repeat: no-repeat;
}

.cardphysics:hover {
	transform: scale(1.1);
}

.cardstemone {
	background-image: url(images/stemone.png); /*image courtesy of https://pngtree.com/free-png-vectors/civil-engineer*/
	background-size: cover;
	background-repeat: no-repeat;
	
}

.cardstemone:hover {
	transform: scale(1.1);
}

.cardstemtwo {
	background-image: url(images/stemtwo.png); /*https://favpng.com/png_view/tecnology-assistive-technology-computer-software-communication-clip-art-png/MshPGrWk*/
	background-size: cover;
	background-repeat: no-repeat;
}

.cardstemtwo:hover {
	transform: scale(1.1);
}


.minheight {
	min-height: 70vh;
}
.kingbox {
	margin-top: auto;
}

.king {
	border-style: none;
	float: left;
	width: 25vw;
	height: auto;
}

/*NavBar for all other pages*/

ul {
	list-style-type: none; /*removes bullet*/
	margin: 0;
	padding: 0; /*top to left to bottom to right*/
	background-color: rgb(3, 32, 89);
	overflow: hidden; /*keeps elements inside the unordered list*/
	display: flex; /*help from https://www.w3schools.com/css/css3_flexbox.asp*/
}

ul li {
	flex: 1; /*all li take equal space*/
}

ul li a {
	color: rgb(186, 205, 220);
	text-decoration: none;
	font-size: 2vw;
	font-family: "Luckiest Guy";
	padding: 20px 0; /*top/bottom and left/right*/
	display: block; /*makes the list item anchor block instead of inline*/
	text-align: center;
}

ul li a:hover {
	background-color: rgb(0, 7, 59);
}

ul li a.active {
	background-color: rgb(0, 55, 130);
	box-shadow: inset 3px 0 0 0 rgb(204, 243, 252), /* left side */ 
   		 inset -3px 0 0 0 rgb(204, 243, 252); /* right side */
}

h1 {
	text-align: center;
	background-color: rgb(3, 32, 89);
	font-size: 3em;
	color: rgb(186, 205, 220);
	font-family: "Luckiest Guy";
	padding-top: 10px;
	margin-top: 10px;
}

h2 {
	text-align: center;
	background-color: rgb(4, 119, 191);
	color: rgb(206, 225, 225);
	font-size: 2.25em;
	font-family: "Luckiest Guy";
	padding-top: 8px;
}

p {
	font-size: 1.5em;
	padding-left: 15px;
	margin-top: 0px;
	padding-bottom: 5px;
	padding-right: 15px;
	font-family: "Yusei Magic";
	color: rgb(36, 55, 80)
}

.hyper {
	color: rgb(56, 75, 125)
}

body {
	background-color: rgb(5, 199, 242, 0.2);
	margin: 0;
}

img {
	border-style: solid;
	border-width: 3px;
	border-radius: 5px;
	border-color: rgb(4, 119, 191);
}

.widthsm {
	width: 30%;
}

.floatright {
	float: right;
}

.floatleft {
	float: left;
}

.topmargin {
	margin-top: 15px;
}

.leftmargin {
	margin-left: 8px;
}

.oflow {
	overflow: auto;
}

.blueborder {
	border-style: solid;
	border-width: 3px;
	border-radius: 5px;
	border-color: rgb(4, 119, 191);
}

.imgsm {
	width: auto;
	height: 40vh;
	max-width: 65vw;
}

.imgmd {
	width: 40%;
	margin-left: 5%;
	margin-right: 5%;
	border-radius: 2%;
	max-height: 100vh;
	display: inline-block;
}

.leftimg {
	margin-right: 15px;
}

.eighty {
	width: 50vw;
	max-height: 100vh;
	margin: auto;
	display: block;
}

/*image grid made using help from https://www.w3schools.com/howto/howto_js_image_grid.asp*/
.washimg {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	grid-gap: 15px;
	padding-left: 8px;
	padding-right: 8px;
}

.washimg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5%;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
	transition: transform 0.3s ease;
}

.washimg img:hover {
	transform: scale(1.1);
}

/*https://fonts.google.com/specimen/Luckiest+Guy*/
.luckiest-guy-regular {
	font-family: "Luckiest Guy", cursive;
	font-weight: 400;
	font-style: normal;
}

/*https://fonts.google.com/specimen/Yusei+Magic*/
.yusei-magic-regular {
	font-family: "Yusei Magic", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.mc {
	display: flex;
	padding-left: 4px;
	padding-right: 4px; 
}

.column {
	flex: 25vw;
	padding-left: 4px;
	padding-right: 4px;
}

.column img {
	margin-top: 8px;
	width: 100%;
	transition: 0.3s ease;
}

.column img:hover {
	transform: scale(1.1);
}

/* image slideshow made using help from https://www.w3schools.com/howto/howto_js_slideshow.asp*/
* {
	box-sizing: border-box
}

/* Carousel wrapper */
.carousel {
	position: relative;
	margin: auto;
}

/* Hide the images by default */
.slides {
	display: none;
	opacity: 0.8
}

/* Next & previous buttons */
.prev, .next {
	cursor: pointer;
	position: absolute;
	top: 45%;
	width: auto;
	margin-left: 18%;
	margin-right: 18%;
	padding: 16px;
	color: rgb(3, 32, 89);
	font-weight: bold;
	font-size: 2em;
	transition: 0.4s ease;
	border-radius: 8%;
}

.center {
	text-align: center;
}

/* Position the "next button" to the right */
.next {
	right: 0;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
	background-color: rgb(3, 32, 89, 0.6);
}

/* Caption text */
.text {
	color: rgb(240, 240, 240);
	font-size: 3vw;
	padding: 8px;
	position: absolute;
	bottom: 2%;
	width: 100%;
	text-align: center;
	font-family: "Yusei Magic"
}

/* Fading animation */
.fade {
	animation-name: fade;
	animation-duration: 1.8s;
}

@keyframes fade {
	from {opacity: 0.6}
	to {opacity: 0.8}
}