@charset "UTF-8";
/* CSS Document */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

body {
	background-color: #302d8a;
	color: #302d8a;
	font-family: "Nunito", sans-serif;
	line-height: 1.4;
}

header {
	position: fixed;
	top: 0;
	left: 0;
	background-color: #302d8a;
	width: 100%;
	height: 10vh;
}


main {
	background-color: #fff0d8;
}

#topimg {
	display: flex;
	justify-content: center;
}

#top {
	background-image: linear-gradient(#c3d0f5, #fff0d8);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	padding: 0;
}

h1 {
	font-family: "Unbounded", sans-serif;
	margin-top: 15vh;
	text-align: center;
	font-size: 4em;
	font-weight: 900;
}

h2 {
	font-size: 2em;
	font-weight: 700;
	text-transform: lowercase;
	margin-bottom: 2vh;
}

#introtext {
	background-color: #f7cbba;
	padding: 5vh 20vw;
}

section {
	padding: 5vh 10vw;
}
#about {
	padding: 5vh 10vw;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#abtext {
	width:45vw;
}

#abbox {
	width:30vw;
}

.catbox {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.catboxears {
	display:flex;
	justify-content: space-between;
	width: 75%;
}

.ear {
	width: 7vw;
	margin-bottom: -1vh;
}

.catboxbody {
	background-color: #c3d0f5;
	padding: 5vh;
	border-radius: 10px;
}

#purpose {
	background-color: #FFE497;
	padding: 5vh 10vw;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#purposestart {
	display: flex;
	margin-bottom: 10px;
	align-items: flex-start;
}

#time {
	background-color: #302d8a;
	color: #ffe497;
	padding: 5vh 20vw;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#applying {
	background-color: #f7cbba;
}

footer {
	background-color: #302d8a;
	color: #c3d0f5;
	width: 100%;
	height: 25vh;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#rightfooter {
	margin: 5vh 5vw;
	text-align: right;
}

#rightfooter a {
	color: #c3d0f5;
}

#rightfooter h3 {
	font-weight: 500;
}

#leftfooter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 5vh 5vw;
	width: 30vw;
}

#socials {
	display:flex;
	justify-content: space-between;
	width: 10vw;
}

.socmed {
	background-color: #c3d0f5;
	color: #302d8a;
	padding: 5px;
	border: none;
	border-radius: 5px;
	font-size: 1em;
}

main img {
	width: 50%;
	margin: 0 auto;
}

 @media only screen and (max-width: 600px) {
	 body{
		 text-align: center;
	 }
	 
	 header {
		 height: 12vh;
	 }
	 
	 h1 {
		 font-size: 2em;
	 }
	 
	 #abtext,
	 #abbox {
		 width: 100%;
	 }
	 
	 #about {
		 flex-direction: column;
	 }
	 
	 footer {
		 flex-direction: column;
		 height: auto;
	 }
	 
	 #time {
		 flex-direction: column-reverse;
	 }
	 
	 #leftfooter {
		 flex-direction: column;
	 }
	 
	 #rightfooter {
		 text-align: center;
		 margin: 0;
		 line-height: 1.6;
	 }
	 
	 #purposestart {
		 flex-direction: column-reverse;
	 }
	 
	 .ear {
		 width: 20vw;
	 }
	 
	 #socials {
		 width: auto;
	 }
	 
	 #burger {
		 color: #FFE497;
		 font-size: 2.5em;
	 }
	 
	 #primarynav {
		 display: none;
	 }
}