@import url('https://fonts.googleapis.com/css2?family=Freckle+Face&family=Monda:wght@400..700&family=Short+Stack&display=swap');

/*******************************************************/

body{
	margin: 0;
	padding: 0;
	background-color: #457b9d;
}

button:hover {
	cursor: pointer;
}

.bottom {
	align-self: center;
	margin-top: 10%;
	display: flex;
}

.bottom p {
	margin-right: auto;
	margin-left: auto;
	font-family: "Monda";
}

.centercontent {
	display: flex;
	justify-content: center;
	align-content: center;
	font-family: "Monda";
	color: #023047;
}

.centercontent * {
	margin: 0 1%;
}

.centercontent i {
	align-content: center;
}

.logo {
	max-width: 10vh;
}

.logo:hover{
	cursor: pointer;
}

.piccenter {
	display: flex;
}

.me {
	max-width: 40vh;
	border: solid 2px #f1faee;
	border-radius: 50%;
	margin-top: 10%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 4%;
}

.nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1% 2%;
	font-family: "Freckle Face";
	/*box-shadow: 5px 5px lightblue;*/
}

.nav li {
	align-content: flex-end;
	list-style-type: none;
	display: inline-block;
	padding-left: 20px;
	color: #f1faee;
}

.nav a{
	text-decoration: none;
	color: #f1faee;
}

.pbutton {
	border-radius: 15px;
	padding: 5px 20px;
	background-color: #003566;
	color: #f1faee;
	font-family: "Freckle Face";
	font-size: 15px;
}

.pbutton:active {
	background-color: #1a759f;
	box-shadow: 0 5px #666;
	transform: translateY(4px);
}

.socials {
	margin-top: 20%;
	display: flex;
	justify-content: space-evenly;
	margin-bottom: 2%;
}

.socials a {
	color: #f1faee;
}

.titles {
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 10%;
}

.titles li {
	display: inline-block;
	margin-right: 2%;
	list-style-type: none;
}

@media (max-width: 1200px){
	.me {
		max-width: 50vw;
	}
}

@media (max-width: 540px) {
	.nav {
		flex-direction: column;
	}
}