:root {
	--footer: 68px;
}
@media only screen and (max-device-width: 480px) {
	:root {
		--footer: 48px;
	}
}
@media only screen and (max-device-height: 480px) {
	:root {
		--footer: 42px;
	}
}

* {
	box-sizing: border-box;
}

html {
	height: 100%;
	overflow: hidden;
}

body {
	height: 100%;
	margin: 0;
	background: var(--bgC);
}

body > div {
	height: 100%;
	overflow: hidden scroll;
	-ms-scroll-snap-type: y mandatory;
	    scroll-snap-type: y mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

body > div::-webkit-scrollbar {
	width: 0;
}

p, h1 {
	color: #fff;
	font-weight: initial;
}

@font-face {
  font-family: 'Galdeano';
  src: url(https://fonts.gstatic.com/s/galdeano/v22/uU9MCBoQ4YOqOW1boAP2-vE.woff2) format('woff2');
}

main {
	min-height: calc(100% - var(--footer));
}

@media only screen and (max-device-width: 480px), only screen and (max-device-height: 480px) {
	body > div {
		-ms-scroll-snap-type: y proximity;
		    scroll-snap-type: y proximity;
	}
}

/***** Nav *****/

#menuBox {
	display: none;
}

#menuNav {
	width: 30px;
	height: 30px;
	position: fixed;
	top: 5vh;
	right: 8vw;
	z-index: 9;
}

#menuNav > div {
	width: 100%;
	height: 0;
	position: relative;
	top: 10%;
	transition-property: top, opacity, transform, -webkit-transform !important;
	transition: 0.2s cubic-bezier(.39,.58,.57,1);
}

#menuNav > div:nth-child(2) {
	top: 50%;
	opacity: 100%;
}

#menuNav > div:nth-child(3) {
	top: 90%;
}

#menuNav > div::after {
	content: "";
	display: block;
	width: 100%;
	position: relative;
	top: -1px;
	left: -1px;
	border: solid 1px #aaa;
	border-radius: 1px;
	box-shadow: 0 0 3px #000;
	transition: border-color 0.2s cubic-bezier(.39,.58,.57,1);
}

#menuNav:hover > div::after {
	border-color: #eee;
}

#menuBox:checked + label > #menuNav > div:nth-child(1) {
	top: 50%;
	-webkit-transform: rotate(45deg);
	        transform: rotate(45deg);
}

#menuBox:checked + label > #menuNav > div:nth-child(2) {
	opacity: 0%;
}

#menuBox:checked + label > #menuNav > div:nth-child(3) {
	top: 50%;
	-webkit-transform: rotate(-45deg);
	        transform: rotate(-45deg);
}

header > label > button {
	width: 100vw;
	height: 0;
	padding: 0;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 8;
	overflow: hidden;
	border: none;
	background-color: #131516;
	box-shadow: 0 0 20px #131516;
	transition: height 0.4s cubic-bezier(.39,.58,.57,1);
}

#menuBox:checked + label > button {
	height: 100%;
}

nav {
	display: flex;
	width: 100%;
	height: 100%;
	padding: 0;
	flex-direction: column;
	justify-content: space-evenly;
	overflow: hidden;
	transition: padding 0.4s cubic-bezier(.39,.58,.57,1);
}

#menuBox:checked + label > button > nav {
	padding: calc(5vh + var(--footer)) 5vw;
}

nav > a, nav > a:visited {
	margin: auto;
	padding: 10px;
	flex-shrink: 1;
	color: #ffde6c;
	text-decoration: none;
	pointer-events: initial;
}

nav > a:active {
	color: #e6b963 !important;
}

nav > a > svg {
	height: 20vh;
}

nav > a > p {
	margin: 0;
	font-size: calc(1vh + 1vw);
	color: inherit;
}

/***** Footer *****/

footer {
	position: relative;
	width: 100vw;
	height: var(--footer);
	background: #3d528f;
	box-shadow: 0 -3px 3px #000a;
}

footer .sn {
	display: flex;
	max-width: 400px;
	margin: auto;
	padding: 16px 0;
	flex-wrap: wrap;
	justify-content: space-around;
}

footer .sn > a {
	display: block;
	width: 34px;
	height: 34px;
	padding: 6px;
	border: 2px solid #000;
	border-radius: 100%;
	color: #000;
}

footer .sn > a:hover, footer .sn > a:active {
	border: none;
	box-shadow: 0 0 5px #2e3d6b;
	color: #fff;
}

footer .sn > a:nth-child(1):hover, footer .sn > a:nth-child(1):active {
	background: #3b5998;
}

footer .sn > a:nth-child(2):hover, footer .sn > a:nth-child(2):active {
	background-image: linear-gradient(30deg, #fcaf45 10%, #c13584 55%, #002aff);
}

footer .sn svg {
	width: 100%;
	height: 100%;
}

footer .c {
	position: absolute;
	top: 0;
	right: 0;
	padding: 6px 28px 0;
	line-height: 12px;
	font-size: 12px;
	text-align: right;
}

footer .c a {
	text-decoration: none;
}

footer .c p {
	color: #99b;
}

@media only screen and (max-device-width: 480px) {
	footer .sn {
		max-width: 200px;
		margin: 0;
		padding: 9px 6px;
	}

	footer .sn > a {
		width: 30px;
		height: 30px;
		padding: 4px;
		border: 1px solid #000;
	}

	footer .c {
		padding: 3px 6px 0;
		line-height: 9px;
		font-size: 9px;
	}
}

@media only screen and (max-device-height: 480px) {
	footer .sn {
		max-width: 400px;
		margin: 0;
		padding: 7px 6px;
	}

	footer .sn > a {
		width: 28px;
		height: 28px;
		padding: 4px;
		border: 1px solid #000;
	}

	footer .c {
		padding: 2px 6px 0;
		line-height: 5px;
		font-size: 10px;
	}
}