:root{
	font-size: 16px;
	--pk-main-bg-color: #FFF; 
	--pk-medium-blue: #0035A1; 
	--pk-hamburger-menu-button: #97ff83;
	--pk-hamburger-menu-bg: #83D5FF;
	--pk-hamburger-menu-width: 22.5rem;
	--pk-text-hamburger: #1e1e1e;
	--pk-hamburger-menu-button-close: #FF394D;
}

@font-face{
	font-family: 'Berlin Sans FB';
	src: local('Berlin Sans FB'), url('./fonts/BRLNSR.TTF') format('truetype');
}

html{
	scroll-behavior: smooth;
	overflow-x: hidden;
}
    
@media screen and (prefers-reduced-motion: reduce){
    html{
        scroll-behavior: auto;
    }
}

body{
	font-family: Berlin Sans FB;
	margin: 0;
	justify-content: center;
	align-items: center;
	background-color: var(--pk-main-bg-color);
	height: 100vh;
	max-width: 100%;
}

a{
	color: rgb(114, 254, 124);
	
	&:visited{
		color: rgb(108, 184, 240 );
	}
}

.p-heading1{
	font-size: 2rem;
	padding: 2rem;
	text-align: center;
}

.p-heading2{
	font-size: 1.5rem;
	padding: 2rem;
	text-align: center;
}

.center-class{
	text-align: center;
}

.p-body:not(.p-gallery){
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	transition: margin-left .5s;
	align-items: center;
	max-width: 98%;
	width: 100%;
	padding: 2rem;
	/*margin-right: 2rem;*/
}

.p-gallery{
	display: flex;
	gap: 1rem;
	justify-content: center;
	align-items: flex-start;
	align-content: center;
	flex-flow: row wrap;
	width: 95%;
	padding: 2rem;
}

.p-main{
	background-color: var(--pk-main-bg-color);
	display: flex;
	transition: margin-left .5s;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
	margin-bottom: 0.1vh;
	height: 90vh;
}

.p-header{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	background-color: var(--pk-medium-blue);
	padding-top: 2rem;
	padding-bottom: 2rem;
	width: 100%;
	max-width: 100%;
	
	img{ 
		transition: margin-left .5s;
		/*align-self: center;*/
		/*margin-right: 2rem;*/
	}
}

.p-menu-wrapper{
	position: -webkit-sticky; 
	position: sticky;
	transition: all 0.3s ease 0s;
}

.p-menu{
	height: 100vh;
	width: 0;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: var(--pk-hamburger-menu-bg);
	overflow-x: hidden;
	transition: 0.5s;
	padding-top: 3.75rem;
	white-space: nowrap;
	
	a{
		padding: 0.5rem 0.5rem 0.5rem 2rem;
		text-decoration: none;
		font-size: 1.5625rem;
		color: #FFF;
		display: block;
		transition: 0.3s;
		
		&:hover{
			color: #f1f1f1;
			text-decoration: underline;
		}
	}
}

.p-menu-button-wrapper{
	position: fixed;
	z-index: 2;
	top: 1rem;
	left: 1rem;
	width: 1.875rem;
	height: 1.875rem;
	border: none;
	background: none;
	cursor: pointer;
	transition: left .5s;
	
	button{
		border: none;
		background: none;
		cursor: pointer;
		width: 1.875rem;
		height: 1.875rem;
		padding: 0;
		margin: 0;
	}
}

#p-menu-hamburger{
	width: 1.875rem;
	height: 1.875rem;
}

.p-menu-hamburger-bar{
	transition-property: transform;
	transition-duration: 0.3s;
	transform-origin: center;
	stroke: var(--pk-hamburger-menu-button);
	stroke-width: 15%;
}

.p-menu-hamburger-bar--top{
	transform: translateY(-40%);
}

.p-menu-hamburger-bar--bot{
	transform: translateY(40%);
}

.is-opened .p-menu-hamburger-bar--top{
	transform: rotate(45deg);
}

.is-opened .p-menu-hamburger-bar--mid{
	transform: scaleX(0.15);
}

.is-opened .p-menu-hamburger-bar--bot{
	transform: rotate(-45deg);
}

@media screen and (max-height: 28.125rem){
  .p-menu {padding-top: 0.9375rem;}
  .p-menu > a {font-size: 1.125rem;}
}

@media only screen and (max-width: 1000px){
	/*.p-heading1{
		font-size: 2vw;
	}*/
}