/* -------------------------------
           GENERAL STYLES 
-------------------------------- */

:root {
	font-size: 16px;
	--link-translate-x: 3rem;
	--transition-speed: 0;
	--transition-step: 0;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-weight: normal;
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	scrollbar-width: none !important; /* For Firefox */
	overflow: hidden !important;
}
*::-webkit-scrollbar {
	display: none;
}

a,
a:hover,
a:active,
a:focus,
a:visited,
button,
button:hover,
button:active,
button:focus,
button:visited {
	text-decoration: none;
	background: transparent;
}

ol, /*ol= ordered lists, ul=unordered lists*/
ul {
	list-style: none;
}

body {
	font-family: Review Regular;
	position: absolute;
	width: 100%;
	height: 100%;
}

/* -------------------------------
         LOGO & TITLE
------------------------------- */

.logo {
	position: fixed;
	top: 1rem;
	left: 1rem;
	font-size: calc(0.5rem + 4vmin);
	line-height: calc(0.5rem + 4.5vmin);
	z-index: 9999;
	mix-blend-mode: soft-light;
}

/* -------------------------------
        	QR-CODE
------------------------------- */

.qr-code {
	position: absolute;
	top: 1rem;
	right: 1rem;
	mix-blend-mode: soft-light;
	z-index: 9999;
	width: 15vw;
}

.qr-code img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.qr-code p {
	text-align: center;
	margin-top: 5px;
}

/* ------------------------------
        FACE RECOGNITION
--------------------------------*/

video {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 1px solid lime;
}

#emotion {
	font-family: Review Regular;
	position: absolute;
	width: 100%;
	height: 100%;
	/* border: 1px solid cyan; */
	z-index: 10000;
	mix-blend-mode: soft-light;
}

.meow {
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
}

/* ------------------------------
           	  ABOUT 
--------------------------------*/

.about {
	position: absolute;
	bottom: 1rem;
	right: 1rem;
	width: 30vw;
	z-index: 10000;
	font-size: calc(0.5rem + 1.2vmin);
	line-height: calc(0.5rem + 1.5vmin);
	mix-blend-mode: soft-light;
}

/* ------------------------------
          MEDIA QUERY'S
--------------------------------*/
/* SMALLER THAN */

@media (max-width: 1100px) {
	.about {
		width: 40vw;
	}
}

/* SMALLER THAN */
@media (max-width: 750px) {
	.about {
		width: 90vw;
		font-size: calc(0.5rem + 1.5vmin);
		line-height: calc(0.5rem + 1.8vmin);
	}
	.qr-code {
		width: 30vw;
	}
}

/* ------------------------------
           FONT EMBEDS 
--------------------------------*/

@font-face {
	font-family: Review Ultra;
	src: url("../fonts/ReviewMono-Ultracondensed.woff2");
}

@font-face {
	font-family: Review Regular;
	src: url("../fonts/ReviewMonoRegular.woff2");
}

@font-face {
	font-family: Review Cursive;
	src: url("../fonts/ReviewMonoCursive.woff2");
}