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

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

* {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	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;
}

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;
}

img {
	width: 100%;
}

body::-webkit-scrollbar-track {
	border-radius: 10px;
	border-left: 1px solid #fff;
	background-color: #394039;
}

body::-webkit-scrollbar {
	width: 8px;
	border-left: 1px solid #fff;
	background-color: #394039;
}

body::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background-color: #fff;
}

body {
	position: relative;
	opacity: 1;
	background-color: #394039;
	color: #6f7af2;
	height: 100vh;
	width: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
}

/* ------------------------------
            ABOUT
--------------------------------*/
.nav::-webkit-scrollbar {
	display: none;
}
.nav {
	background-color: transparent;
	position: fixed;
	overflow-y: scroll;
	overflow-x: hidden;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	transition: transform 0.7s, opacity 0.4s, background-color 0.7s;
	/* transform: translateX(-100%); */
	opacity: 0;
	z-index: -1;
	-ms-overflow-style: none; /* for Internet Explorer, Edge */
	scrollbar-width: none; /* for Firefox */
	overflow-y: scroll;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
}
@media (min-width: 800px) {
}
@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 800px), (min-resolution: 192dpi) and (min-width: 800px) {
}

.nav.show {
	background-color: transparent;
	opacity: 1;
	/* transform: translate(0%); */
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	z-index: 8888;
}

.hamburger {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 9999;
	border: 1px solid #6f7af2;
	border-radius: 50%;
	background-color: #394039 !important;
	color: #6f7af2;
	text-shadow: 0 0 3px #6f7af2;
	width: 3.2rem;
	height: 3.2rem;
	font-size: calc(0.5rem + 3vmin);
	line-height: calc(0.5rem + 3.5vmin);
	font-family: Review Regular;
	transition: box-shadow 0.6s ease-out;
	animation: gradient-paragraph-anchor 2s linear infinite;
}

.hamburger:hover {
	-webkit-box-shadow: inset 0px 0px 5px 0.5px #6f7af2;
	-moz-box-shadow: inset 0px 0px 5px 0.5px #6f7af2;
	box-shadow: inset 0px 0px 5px 0.5px #6f7af2;
}

@keyframes gradient-paragraph-anchor {
	0% {
		background-position: 50% 50%;
		transform: rotate(0deg);
	}
	50% {
	}
	100% {
		background-position: 50% 50%;
		transform: rotate(360deg);
	}
}

.project-about-wrapper {
	position: absolute;
	top: 15rem;
	padding-bottom: 3rem;
	left: 3rem;
	font-family: Review Regular;
	width: 90ch;
	max-width: 80vw;
	color: #fff;
}

.project-about-title {
	font-size: calc(0.5rem + 1.2vmin);
	line-height: calc(0.5rem + 4vmin);
	text-shadow: 0 0 3px #6f7af2;
}

.project-about-text {
	font-size: calc(0.5rem + 2vmin);
	line-height: calc(0.5rem + 2.6vmin);
	padding-bottom: 2rem;
	text-shadow: 0 0 3px #6f7af2;
}

.project-inprint {
	font-size: calc(0.5rem + 1.2vmin);
	line-height: calc(0.5rem + 1.9vmin);
	text-shadow: 0 0 3px #6f7af2;
	width: 64ch;
	max-width: 80vw;
}

.project-inprint a {
	color: #fff;
	font-family: Review cursive;
}

/* ------------------------------
      PROJECT SWITCH BUTTON
--------------------------------*/

.project-switch {
	position: fixed;
	right: 1rem;
	top: 1rem;
	z-index: 3000;
	border: 1px solid #6f7af2;
	border-radius: 10px;
	background-color: #394039 !important;
	padding: 0.7em 0.7em 0.5em 0.7em;
	width: auto;
	text-align: center;
	height: auto;
	font-size: calc(0.5rem + 2vmin);
	line-height: calc(0.5rem + 2vmin);
	color: #6f7af2;
	text-shadow: 0 0 3px #6f7af2;
	font-family: Review cursive;
	transition: box-shadow 0.6s ease-out;
}

.project-switch:hover {
	-webkit-box-shadow: inset 0px 0px 5px 0.5px #6f7af2;
	-moz-box-shadow: inset 0px 0px 5px 0.5px #6f7af2;
	box-shadow: inset 0px 0px 5px 0.5px #6f7af2;
}

/* ------------------------------
        PROJECT TABLE
--------------------------------*/

.table-info {
	opacity: 0;
	position: relative;
	left: 0;
	top: 30vh;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	font-size: calc(0.5rem + 2.5vmin);
	line-height: calc(0.5rem + 2.5vmin);
	font-family: Review Regular;
	color: #fff;
	padding: 1rem;
	border-top: 0.5px solid #6f7af2;
	border-bottom: 0.5px solid #6f7af2;
	transition: opacity 1s ease-out;
}

.table-info.table-show {
	opacity: 1;
	transition: opacity 0.3s ease-out;
}

.table-info.table-show span {
	transform: scaleX(100%);
	transition: transform 1s ease-out;
}

.table-info span {
	transform: scaleX(50%);
	transition: transform 1s ease-out;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.table-info span:first-child,
.table-info span:nth-child(2) {
	align-items: flex-start;
}
.table-info span:last-child {
	align-items: flex-end;
}

.project-wrapper.project-wrapper-alt {
	position: relative;
	display: flex;
	flex-direction: column;
}

.project.project-alt {
	min-height: auto;
}

.project-image.project-image-alt {
	display: none;
}

.project-info.project-info-alt {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	justify-content: center;
	align-items: center;
	align-content: center;
	bottom: 0;
	left: 0;
	max-width: 100%;
	background: none;
	animation: none;
	-webkit-text-fill-color: #fff;
	text-shadow: none;
	filter: blur(0px);
	transition: filter 1s ease-in-out;
}

.project-info.project-info-alt > .project-number,
.project-info.project-info-alt > .project-keys,
.project-info.project-info-alt > .project-title,
.project-info.project-info-alt > .project-status {
	padding: 2rem 0;
	font-size: calc(0.5rem + 1vmin);
	width: auto;
	transition: width 1s ease-in-out, font-size 1s ease-in-out;
}
.project-info.project-info-alt > .project-number {
	padding-left: 1rem;
}

.project-info.project-info-alt > .project-keys {
	text-align: center;
}

.project-status {
	display: none;
}

.project-info.project-info-alt > .project-status {
	display: block;
	text-align: right;
	padding-right: 1rem;
}

/* ------------------------------
        PROJECT TILES
--------------------------------*/

.project-wrapper {
	position: relative;
	left: 0;
	top: 30vh;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	transition: all 1s ease-out;
}

.project {
	min-height: 55vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	-webkit-box-shadow: inset 0px 0px 0px 0.5px #6f7af2;
	-moz-box-shadow: inset 0px 0px 0px 0.5px #6f7af2;
	box-shadow: inset 0px 0px 0px 0.5px #6f7af2;
	transition: box-shadow 0.3s ease-out;
}

.project:not(.blur).touch-button > .project-info {
	filter: blur(0px);
	background: none;
	animation: none;
	-webkit-text-fill-color: #fff;
	text-shadow: none;
	transition: filter 0.3s ease-out;
}

.project:not(.blur).touch-button > .project-image {
	filter: blur(5px);
	transition: filter 0.3s ease-out;
}

.project:not(.blur).touch-button {
	-webkit-box-shadow: inset 0px 0px 10px 0.5px #6f7af2;
	-moz-box-shadow: inset 0px 0px 10px 0.5px #6f7af2;
	box-shadow: inset 0px 0px 10px 0.5px #6f7af2;
	transition: box-shadow 0.3s ease-out;
}

.project:not(.blur):hover {
	-webkit-box-shadow: inset 0px 0px 10px 0.5px #6f7af2;
	-moz-box-shadow: inset 0px 0px 10px 0.5px #6f7af2;
	box-shadow: inset 0px 0px 10px 0.5px #6f7af2;
	transition: box-shadow 0.3s ease-out;
}

.project:not(.blur):hover > .project-image {
	filter: blur(5px);
	transition: filter 0.3s ease-out;
}

.project:not(.blur):hover > .project-info {
	filter: blur(0px);
	background: none;
	animation: none;
	-webkit-text-fill-color: #fff;
	text-shadow: none;
	transition: filter 0.3s ease-out;
}

.blur {
	filter: blur(5px);
}

.blur .project-info,
.project-info {
	background: repeating-linear-gradient(to right, #394039, #fff, #394039);
	animation: gradient-paragraph 2s linear infinite;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-size: 9% 10%;
	text-shadow: 0 0 3px #fff;
	transition: all 1s ease-out;
}

.project-image {
	padding: 2.5rem;
	filter: blur(0px);
	transition: filter 0.3s ease-out;
}

.project-info {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	position: absolute;
	z-index: 100;
	bottom: 1rem;
	left: 0;
	color: #fff;
	font-family: Review Regular;
	filter: blur(5px);
	transition: filter 0.1s ease-out, bottom 1s ease-out, position 1s ease-out;
}

.project-title {
	font-size: calc(0.5rem + 1.5vmin);
	transition: font-size 1s ease-out;
}

.project-keys {
	font-family: Review cursive !important;
	transition: all 1s ease-out;
}

.project-number,
.project-title,
.project-keys {
	padding-bottom: 2rem;
	padding-left: 2rem;
	padding-right: 2rem;
}

.project-title {
	align-self: center;
}

/* ------------------------------
          TEXT STYLES
--------------------------------*/

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

.logo {
	font-family: Review Regular;
	position: fixed;
	z-index: 9999;
	top: 1rem;
	left: 1rem;
	font-size: calc(0.5rem + 4vmin);
	line-height: calc(0.5rem + 4.5vmin);
	background: repeating-linear-gradient(to right, #394039, #6f7af2, #394039);
	animation: gradient-paragraph 2s linear infinite;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-size: 9% 10%;
	color: #6f7af2;
	text-shadow: 0 0 3px #6f7af2;
}

@keyframes gradient-paragraph {
	0% {
		background-position: 0% 50%;
	}
	100% {
		background-position: 100% 50%;
	}
}
/* ------------------------------
          MEDIA QUERY'S
--------------------------------*/
/* SMALLER THAN */

@media (max-width: 1100px) {
	.project-wrapper {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* SMALLER THAN */
@media (max-width: 750px) {
	.project-wrapper {
		grid-template-columns: repeat(1, 1fr);
	}
}

/* ------------------------------
           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");
}