*{
	font-family: 'Quicksand', sans-serif;
	/*overflow: hidden;*/
	color: var(--ctext);
	word-break: break-word;
}

body{
	overflow-x: hidden;
}


:root{
	--primary: #b3d1ff;
	--accent: lightgray;
	--ctext: black;
	--bg: white;
	--bgtone: #efefef;
}

a{ 
	text-decoration: none;
}

#main-header-container{
	width: 100vw;
	padding: 60px;
	height: 20vh;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	font-size: 40px;
	animation: onLoadAnim both 1s 0.3s;
	background: white;
}


.section{
	height: auto;
	font-size: 20px;
	padding: 20px 40px !important;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	animation: onLoadAnim both 1s 0.5s;
}


.profile{animation-delay: 0.7s;}
.about{animation-delay: 0.9s;}
.contact{animation-delay: 1.1s;}
.address{animation-delay: 1.3s;}
.map-con{animation-delay: 1.5s;}

.section-header{
	font-size: 35px;
}

#profile{
	object-fit: clip;
	height: 30vh;
	width: 30vh;
	border-radius: 50%;
}

#map{
	width: 35vw;
	height: 40vh;
	object-fit: cover;
	filter: brightness(1.1);
	transition: ease 0.3s filter;
}

.profile img{
	align-items: center;
	justify-content: center;
	margin-bottom: 50px;
}
.about{
	padding: 0px 40px;
	overflow-y: scroll;
	font-size: 18px;
}

.contact{}
.address{}
.map-con{
	padding: 0px;
	max-height: 40vh;
	overflow: hidden;
}

.material-symbols-rounded{
	font-size: 20px;
	color: var(--accent);
	margin-right: 10px;
	vertical-align: middle;
}

.overlay-text{
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 20%;
	transition: ease 0.3s opacity 0.3s;
	user-select: none;
}

.map-con:hover #map{
	filter: brightness(0.3);
}
.map-con:hover .overlay-text{
	opacity: 1.0;
	color: white;
}

button{
	border: 1px solid black;
}

button:hover{
	background-color: white;
}

@keyframes onLoadAnim {
    from {
        transform: translateX(50px);
        opacity: 0;
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (min-width: 768px) and (max-width: 1500px){
    .section{padding: 10px 20px; font-size: 16px;}
    .profile{font-size: 14px;}
    .section-header{font-size: 24px;}
    #main-header-container{font-size: 32px;}
    .material-symbols-rounded{font-size: 16px; margin-right: 5px;}
}


@media screen and (max-width:765px){
	.map-con: {padding: 0px; margin: 0px;}
	#main-header-container{
		font-size: 25px;
		height: auto;
		padding: 20px;
	}
	.section-header{
		font-size: 24px;
	}
	.section{
		height: auto;
		width: 100vw;
		font-size: 16px;
		border-bottom: 1px solid var(--bgtone);
		justify-content: flex-start;
	}
	/*.material-symbols-rounded{font-size:16px;}*/
	.map-con: {padding: 0px; margin: 0px;}
	#map{
		width: 100%;
		filter: brightness(1);
	}
	.profile{ justify-content: center; }
}