:root {
	--topBarHeight: 10%;
}

@font-face {
	font-family: hacked;
	src: url(/fonts/Hacked-KerX.ttf);
}
@font-face {
	font-family: smooth;
	src: url(/fonts/SmoothElegantRegular-ZLv3.ttf);
}
@font-face {
	font-family: liga;
	src: url(/fonts/LigaJetBrainsMonoNerdFont-Regular.ttf);
}
@font-face {
	font-family: big;
	src: url(/fonts/Big500-8MLOM.ttf);
}

@font-face {
	font-family: monoton;
	src: url(/fonts/Monoton.ttf);
}

@font-face {
	font-family: rocksalt;
	src: url(/fonts/RockSalt-Regular.ttf);
}

@font-face {
font-family: audiowide;
src: url(/fonts/audiowide.ttf);
}
/* page setup ============================================= */

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	font-family: liga;
	text-shadow: 0px 0px 1px black;
	transition: all 0.3s;
}

body {
	top: 0;
	left: 0;
	transition: background 1s ease-in-out;
}

body::-webkit-scrollbar {
display: none;
}

/* animation ============================================== */

@keyframes slideInTop {
from {
	transform: translateY(-300px);
}
to {
	transform: translateY(0);
}
}

@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
	transform: translateY(0px);
}
40% {
	transform: translateY(30px);
}
80% {
	transform: translateY(-15px);
}
}

@keyframes zoomIn {
0% {
	transform: scale(0.01);
}
85% {
	transform: scale(1.1);
}
100% {
	transform: scale(1);
}
}

@keyframes zoomOut {
0% {
	transform: scale(1);
}
100% {
	transform: scale(0.01);
}
}

@keyframes reveal {
0% {
	-webkit-filter: blur(32px);
	-moz-filter: blur(32px);
	-o-filter: blur(32px);
	-ms-filter: blur(32px);
	filter: blur(32px);
	-webkit-backdrop-filter: blur(32px);
	backdrop-filter: blur(32px);
	transform: scale(2);
}

}

@keyframes shake {
	0% { transform: rotate(0deg); }
	25% { transform: rotate(.5deg); }
	50% { transform: rotate(0eg); }
	75% { transform: rotate(-.5deg); }
	100% { transform: rotate(0deg); }
}

@keyframes background-pan {
	from {
		background-position: 0% center;
	}
	to {
		background-position: -200% center;
	}
}
/* animation: name duration timing-function delay iteration-count direction fill-mode; */


/* animate class */
.animate {
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.animate.animate--infinite {
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

.animate.animation--delay-1s {
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}
.animate.animation--delay-p5s {
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	animation-delay: 0.5s;
}

.animate.animation--delay-p3s {
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
	animation-delay: 0.3s;
}

.animate.animation--fast {
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
}

.animate.animation--slow {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
}

/* real utility classes */

.animate.slideInTop {
	animation-name: slideInTop;
	-webkit-transition-timing-function: ease-in;
	transition-timing-function: ease-in;
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in;
}

.animate.bounce {
	-webkit-animation-name: bounce;
	animation-name: bounce;
}

.animate.zoomIn {
	-webkit-transition-timing-function: linear;
	transition-timing-function: linear;
	-webkit-animation-name: reveal;
	animation-name: zoomIn;
	animation-name: zoomIn;
}

.animate.zoomOut {
	-webkit-transition-timing-function: linear;
	transition-timing-function: linear;
	-webkit-animation-name: zoomOut;
	animation-name: zoomOut;
}

.animate.reveal {
	-webkit-transition-timing-function: linear;
	transition-timing-function: linear;
	-webkit-animation-name: reveal;
	animation-name: reveal;
}

.animate.shake {
	-webkit-animation-name: shake;
	animation-name: shake;
}

/* transition */
* {
	-webkit-transition: all 0.3s;
	transition: all 0.3s; 
}


.js-tilt-glare {
	border-radius: 18px;
	overflow: hidden;
}

/* topbar styles ========================================== */

header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3em;
	justify-content: space-between;
	align-items:center;
	/* background: color(0, 0, 0, .1); */
	z-index: 1000;
	background: rgba(128, 128, 128, 0.2)
}

.navBar a {
	position: relative;
	height: 100%;
	font-size: 5mm;
	text-transform: capitalize;
	text-align: center;
	text-decoration: none;
	margin-left: 5mm;
	margin-right: 5mm;
	padding-top: 3mm;
	padding-bottom: 3mm;
	border-radius: 8px;
	color: #F4E8C1;
}

.navBar .hleft a {float: left;}
.navBar .hright a {float: right;}

.navBar a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1mm;
	background: rgba(128, 128, 128, 0.2);
	border-radius: 1mm;
	transform: scaleX(0);
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.navBar a:hover::after {
	transform: scaleX(1.1);
}

.navBar a:hover {
	/* background: rgba(255, 255, 255, 0.2); */
	/* outline: ridge rgba(128, 128, 128, .6); */
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	-webkit-transition: all 1s;
	transition: all 1s
}

.navBar a.active::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1mm;
	background: rgba(128, 128, 128, .9);
	border-radius: 1mm;
	transform: scaleX(1);
}

.navBar:active,
.navBar:hover,
header:active,
header:hover,
#navBarHeader:hover,
#navBarHeader:active
{
	transform: scale(1.005);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: all 0.5s
}

.navBar,
header,
#navBarHeader {
	-webkit-backdrop-filter: blur(2.5px);
	backdrop-filter: blur(2.5px);
}

/* other ================================================== */

.contents {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

section {
	position: relative;
}

.wrapper {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
perspective: 10px;
}

a:hover {
	font-weight: bold;
	text-decoration: underline;
	text-decoration-thickness: 3px;
	-webkit-text-decoration-line: underline;
	text-decoration-line: underline;
	cursor: pointer;
	transition-timing-function: cubic-bezier(.4,0,.2,1);
	transition-duration: .15s;
	text-underline-offset: 1px;
	position: relative;
	height: 100%;
	font-size: 5mm;
	text-transform: capitalize;
	text-align: center;
	margin-left: 5mm;
	margin-right: 5mm;
	padding-top: 3mm;
	padding-bottom: 3mm;
	font-weight: bold;
	-webkit-transition: all .5s;
	transition: all .5s;
	/* border-radius: 8px; */
	/* color: #F4E8C1; */
}

/* TODO: Check dest if it compatible all browser */