:root {
	--font-size: 16px;
	--root-size: 1.2rem;
	--black: #111111;
	--white: #EEEEEE;
	--shadow: #2a272382;
	--light-blue: #3a68c48a;
	--blue: #3a68c4;
	--pink: #f6b3c2;
	--yellow: #fdc006;
	--font-family: "Pixelify Sans", sans-serif;
	--bolded: 900;
	--margin: 1.5rem;
	--padding: 1rem;
	--border-radius: 1rem;
	--gap: 1rem;
}

/* header {
	display: flex;
	justify-content: space-between;
	position: sticky;
	padding-top: calc(var(--padding)/1.4);
	padding-bottom: calc(var(--padding)/1.4);
	margin-bottom: var(--margin);
	padding-left: var(--padding);
	border: var(--black) 2px solid;
	background-color: var(--white);
	top: 0;
	z-index: 100;
}

/* LOGO */
.logo > img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	padding-top: calc(var(--padding)/2.4);
}

.logo {
	height: 100%;
} */


/* NAV */
ul {
	list-style: none;
}

li > a {
	cursor: pointer;
}

.nav {
	width: 100%;
	position: absolute;
	background-color: var(--black);
	overflow: hidden;
	max-height: 0;
	transition: max-height .5s ease-out;
	top: 100%;
	left: 0;
	z-index: 10;
}

.menu a {
	display: block;
	padding: 30px;
	color: var(--white);
}

.menu a:hover {
	background-color: var(--black);
}

/* MENU ICON */
.hamb {
	cursor: pointer;
	float: right;
	padding: var(--padding);
	margin-right: 0.2rem;
}

.hamb-line {
	background: #e51933;
	display: block;
	height: 2px;
	position: relative;
	width: 20px;
}

.hamb-line::before{
	background: #e51933;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	transition: all .2s ease-out;
	width: 100%;
	top: 5px;
}

.hamb-line::after {
	top: -5px;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	transition: all .2s ease-out;
	width: 100%;
	background: #e51933;
}

.side-menu {
	display: none;
}

/* TOGGLE MENU ICON */
.side-menu:checked ~ nav {
	max-height: 1000%;
}

.side-menu:checked ~ .hamb .hamb-line {
	background: transparent;
}

.side-menu:checked ~ .hamb .hamb-line::before {
	transform: rotate(-45deg);
	top: 0;
}

.side-menu:checked ~ .hamb .hamb-line::after {
	transform: rotate(45deg);
	top: 0;
}

/* NAVBAR SWIPE */
.navbar {
	left: 0;
	top: 0;
	width: 100%;
	background: var(--white);
	transition: transform 0.3s ease-in-out;
}


.logo {
	width: 1.5rem;

	img {
		object-fit: cover;
		width: 100%;
	}
}

footer {
	padding: var(--padding);
	/* background-color: var(--white);
	border: var(--black) 2px solid; */
	font-weight: var(--bolded);
	margin-top: var(--margin);
}

.footer-info {
	text-align: right;
	color: var(--white);
}


.float {
	animation: float 1.5s ease-in-out infinite;
}

/* BUTTON FLOAT ANIMATION - modified from https://www.geeksforgeeks.org/css-floating-animation/ */
@keyframes float {
	0% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-10px);
	}

	100% {
		transform: translateY(0);
	}
}


/* 1290PX */
@media (min-width: 1290px) {
	.footer-info {
		font-size: calc(var(--font-size)*1.2);
	}
}