@import "vendor/ia-dark.css";

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url(/assets/fonts/Inter-regular/inter-v13-latin-regular.woff2) format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url(/assets/fonts/Inter-regular/inter-v13-latin-regular.ttf) format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* inter-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url(/assets/fonts/Inter-600/inter-v13-latin-600.woff2) format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url(/assets/fonts/Inter-600/inter-v13-latin-600.ttf) format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

:root {
	--main: #FAE480;
	--heading: #171B19;
	--text: rgba(23, 27, 25, 0.72);
	--console: #CCCCCC;
	--card: rgba(23, 27, 25, 0.04);
	--icon-wrapper: #FFFFFF;
	--icon: #171B19;
	--console-height: 180px;
	touch-action: none;
}

:root.green-theme {
	--main: #36855F;
	--heading: #FFFFFF;
	--text: rgba(255, 255, 255, 0.72);
	--heading-dark: #171B19;
	--text-dark: rgba(23, 27, 25, 0.72);
	--card: rgba(23, 27, 25, 0.08);
}

:root.dark-theme {
	--main: #40484E;
	--heading: #FFFFFF;
	--text: rgba(255, 255, 255, 0.72);
	--heading-dark: #171B19;
	--text-dark: rgba(23, 27, 25, 0.72);
	--card: rgba(255, 255, 255, 0.08);
}

:root.purple-theme {
	--main: #733667;
	--heading: #FFFFFF;
	--text: rgba(255, 255, 255, 0.72);
	--heading-dark: #171B19;
	--text-dark: rgba(23, 27, 25, 0.72);
	--card: rgba(255, 255, 255, 0.08);
}

* {
	box-sizing: border-box;
}

body {
	font-family: 'Inter', sans-serif;
	margin: 0;
	font-size: 16px;
	display: flex;
	background-color: var(--main);
	color: var(--text)
}

a {
	color: var(--heading);
	text-underline-position: under;
}

.bio-wrapper {
	position: fixed;
	height: calc(100dvh - var(--console-height));
	max-width: 100vw;
	width: 100%;
	text-align: left;
	padding: 0 20px;
	overflow: auto;
	overflow-y: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.bio-wrapper::-webkit-scrollbar {
	display: none;
}

.bio {
	height: 100%;
	width: 100%;
	padding-top: 32px;
}

.shout {
	color: var(--heading);
	font-size: 48px;
	font-weight: 400;
  margin: 0;
}

.emphasize {
	font-size: 16px;
	font-weight: 600;
}

.say {
	font-size: 16px;
	font-weight: 400;
}

.projects {
	display: flex;
	flex-direction: column;
	margin: 32px 0 0;
	padding: 0;
	list-style-type: none;
}

.project {
	width: 100%;
	margin-bottom: 24px;
	background: var(--card);
	border-radius: 12px;
}

.project:last-child {
	margin-bottom: 32px;
}

.project:hover {
	background: white;
}

.project__link {
	display: flex;
	justify-content: space-between;
	color: var(--text);
	padding: 32px;
	text-decoration: none;
}

.project__info {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.project__name {
	font-size: 28px;
	font-weight: 400;
	margin: 0;
	color: var(--heading);
}

:root.green-theme .project:hover .project__name,
:root.dark-theme .project:hover .project__name,
:root.purple-theme .project:hover .project__name {
	color: var(--heading-dark);
}

.project__description {
	margin-top: 16px;
	margin-bottom: 0;
}

:root.green-theme .project:hover .project__description,
:root.dark-theme .project:hover .project__description,
:root.purple-theme .project:hover .project__description {
	color: var(--text-dark);
}

.project__icon-wrapper {
	min-width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	margin-left: 32px;
	background: var(--icon-wrapper);
	border-radius: 50%;
}

.project:hover .project__icon-wrapper {
	background: var(--icon);
}

.project__icon {
	width: 24px;
	height: 24px;
	fill: var(--icon);
}

.project:hover .project__icon {
	fill: var(--icon-wrapper);
}

.js-console-transition {
	transition: height 0.4s ease-out;
}

.js-console-wrapper {
	position: fixed;
	bottom: 0;
	order: 2;
	min-height: var(--console-height);
	height: var(--console-height);
	width: 100vw;
}

.js-console {
	height: var(--console-height);
	width: 100%;
	display: flex;
	flex-direction: column;
	font-size: 16px;
	line-height: 20px;
	padding: 0;
	overflow: hidden;
	border-radius: 20px 20px 0 0;
}

.js-console-drag {
	width: 100%;
	display: flex;
	justify-content: center;
	margin: 8px 0;
	cursor: pointer;
	/* Prevents element highligting when holder tap */
	-webkit-tap-highlight-color: transparent;
}

.js-console-drag::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 32px;
	top: -8px;
}

.js-console-drag-divider {
	border-top: 4px solid var(--main);
	border-radius: 16px;
	width: 64px;
}

.js-console__commands {
	list-style: none;
	padding: 24px 24px 0;
	margin: 0;
	flex-grow: 1;
	overflow-y: scroll;
	scrollbar-width: none;
}

.js-console__commands::-webkit-scrollbar {
	width: 0px;
	background: transparent;
}

.js-console__input-wrapper {
	display: flex;
	margin: 24px;
	padding: 8px;
	height: 40px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.08);
}

.js-console__input-gt {
	display: inline-flex;
	align-self: center;
	padding-right: 8px;
	height: 24px;
	font-size: 16px;
	color: var(--console);
	opacity: 0.64;
}

.js-console__input {
	display: inline-flex;
	flex-grow: 1;
	background: transparent;
	border: none;
	outline: 0;
	font-size: 16px;
	caret-color: var(--console);
	color: var(--console);
	scroll-behavior: smooth;
}

.js-console pre {
	margin: 0;
}

.js-console pre code {
	word-break: break-word;
  white-space: normal;
	padding: 8px 0;
}

@media only screen and (min-width: 1024px) {
	.bio-wrapper {
		position: relative;
		height: 100dvh;
		display: flex;
		justify-content: center;
		padding: 0;
    max-width: calc(100vw - 516px);
	}

	.bio {
		max-width: 800px;
		width: calc(100% - 40px);
		padding-top: 64px;
	}

	.projects {
		margin-top: 48px;
	}

	.project:last-child {
		margin-bottom: 48px;
	}

	.project__icon-wrapper {
		margin-left: 64px;
	}

	.js-console-wrapper {
		right: 0;
		min-height: 100dvh;
		height: 100dvh;
		min-width: 500px;
		max-width: 500px;
		padding: 16px;
	}

	.js-console-drag {
		display: none;
	}

	.js-console {
		height: 100%;
		border-radius: 20px;
	}
}