@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');
		*{
			margin:0;
			padding: 0;
			border: 0;
			box-sizing: border-box;
			font-family: 'PT Sans', sans-serif !important;
		}
		:root{
			--black: #000000;
			--white: #ffffff;
			--hover: #878787;
			--width: 800px;
			--transition-property: all;
			--transition-duration: .3s;
			--transition-timing-function: cubic-bezier();
		}
		html{
			scroll-behavior: smooth;
		}
		body{
			width: 100%;
			cursor: default;
			background-color: var(--white);
		} 
		h1,h2,h3,p,a{
			color: var(--black);
		}
		a{
			text-decoration: none;
		}

		/*CLASSES*/
		main .flexCenterColumn{
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}
		main .flexCenterRow{
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: row;
		}
		main .wrap{
			flex-wrap: wrap;
		}
		main .wrapreverse{
			flex-wrap: wrap-reverse;
		}
		main .transparent{
			-webkit-tap-highlight-color: transparent;
			-moz-tap-highlight-color: transparent;
			-ms-tap-highlight-color: transparent;
			-o-tap-highlight-color: transparent;
		}
		main .unselectable{
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none; 
			-o-user-select: none;
			user-select: none; 
		}
		main .hidden{
			filter: blur(3px);
			transition: all 2s;
			transition-delay: 1s;
		}
		main .show{
			filter: blur(0);
		}

		/*HEADER*/	
		header{
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-direction: row;

			padding: 5px;
			margin: 0 auto;
			width: 100%;
			max-width: 850px;	
		}
		header a.title{
			margin: 5px 10px;
			font-size: 28px;
			font-weight: bold;
			color: var(--black);
		}
		header .page{
			margin: 5px 12.5px;

			font-size: 20px;
			color: var(--black);

			-webkit-tap-highlight-color: transparent;
			-webkit-user-select: none;
			-ms-user-select: none; 
			user-select: none; 
		}
		header .page:hover{
			color: var(--hover)
		}
		header .mobile{
			display: none;
		}
		@media(max-width: 850px){
			header .desktop{display: none;}
			header .mobile{display: block;}
		}
  		.wrapper{
			position: fixed;
			top: 0;
			right: -100%;
			height: 100%;
			width: 100%;
			background: var(--black);
			transition: all 0.6s ease-in-out;
			z-index: 2;
		}
		#active:checked ~ .wrapper{
		  	right:0;
		}
		.menu-btn{
			position: absolute;
			z-index: 3;
			right: 0px;
			top: 0px;
			height: 55px;
			width: 55px;
			text-align: center;
			line-height: 50px;
			border-radius: 50%;
			font-size: 20px;
			cursor: pointer;
			transition: all 0.3s ease-in-out;
			-webkit-tap-highlight-color: transparent;
			-webkit-user-select: none;
			-ms-user-select: none; 
			user-select: none; 
		}
		.menu-btn span,
		.menu-btn:before,
		.menu-btn:after{
			content: "";
			position: absolute;
			top: calc(50% - 1px);
			left: 30%;
			width: 40%;
			border-bottom: 2px solid var(--black);
			transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
		}
		.menu-btn:before{
		  transform: translateY(-8px);
		}
		.menu-btn:after{
		  transform: translateY(8px);
		}
		.close {
			z-index: 1;
			width: 100%;
			height: 100%;
			pointer-events: none;
			transition: background .6s;
		}
		/* closing animation */
		#active:checked + .menu-btn span {
			transform: scaleX(0);
		}
		#active:checked + .menu-btn:before {
			transform: rotate(45deg);
		 	 border-color: var(--white);
		}
		#active:checked + .menu-btn:after {
			transform: rotate(-45deg);
		  	border-color: var(--white);
		}
		.wrapper ul{
			position: absolute;
			top: 60%;
			left: 50%;
			height: 90%;
			transform: translate(-50%, -50%);
			list-style: none;
			text-align: center;
		}
		.wrapper ul li{
			height: 10%;
			margin: 15px 0;
		}
		.wrapper ul li a{
			text-decoration: none;
			font-size: 30px;
			font-weight: bold;
			color: var(--white);
			position: absolute;
			line-height: 50px;
			opacity: 0;
			transition: all 0.3s ease;
			transition: transform .2s cubic-bezier(0.215, 0.61, 0.355, 1);
			-webkit-tap-highlight-color: transparent;
		  	-webkit-user-select: none;
			-ms-user-select: none; 
			user-select: none; 
		}
		.wrapper ul li a:after{
			position: absolute;
			content: "";
			background: var(--white);
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			border-radius: 50px;
			transform: scaleY(0);
			z-index: -1;
			transition: transform 0.3s ease;
		}
		/**/
		.wrapper ul li a:hover{
		  	color: var(--hover);
		}
		/**/
		input[type="checkbox"]{
		 	 display: none;
		}
		#active:checked ~ .wrapper ul li a{
		 	 opacity: 1;
		}
		.wrapper ul li a{
		  	transition: opacity 1.2s, transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
		  	transform: translateX(100px);
		}
		#active:checked ~ .wrapper ul li a{
			transform: none;
			transition-timing-function: ease, cubic-bezier(.1,1.3,.3,1); 
		   	transition-delay: .6s;
		  	transform: translateX(-100px);
		}

		/*FOOTER*/
		footer{
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			margin: 30px auto 0 auto;
			padding: 10px;
	
			width: 100%;
			max-width: var(--width);
		}
		footer a.title{
			font-size: 40px;
			font-weight: bold;
		}
		footer div.socials{
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: row;
			margin: 30px 0;
		}
		footer div.socials a{
			margin: 10px;
		}
		footer div.socials a img{
			width: 30px;
			height: 30px;
		}
		footer a.returntop{
			font-size: 17px;
		}
		footer p.wording{
			margin: 10px 0;	
			font-size: 16px;
 		}