@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&family=Roboto:ital@0;1&display=swap');

:root{
		--width: 95vw;
		--block-width: 1rem;
		--gap: calc((var(--width) - (var(--blocks) * var(--block-width)))/ var(--blocks));
		--size: calc(var(--gap) + var(--block-width));
		--primary: rgba(127,0,255,.7);
		--white: #eee;
		--black: #222;
		--highlight: rgb(0, 0, 255);
		--light-primary: rgba(227,215,215);
		--background: #eee;
}


@font-face{
	font-family: "dingdong";
	src: url("./fonts/DINdong.otf");
}

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

@font-face{
	font-family: "pir";
	src: url("./fonts/Pirelli-Light.woff2");
}

@font-face{
	font-family: "haskoy";
	src: url("./fonts/Haskoy.ttf");
}

a {
	all: unset;
	cursor: pointer;
	transition: all 300ms;
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	transition: all 300ms;
}

body {
	font-family: "haskoy", sans-serif;
}

.title-container {
	margin: auto;
  width: var(--width);
	padding: 1rem 0 1rem 0;
	height: 60vh;
	margin-bottom: 1em;
	border-bottom: 2px dotted var(--light-primary);
	opacity: 0.8;
}

@media only screen and (max-width: 800px) {
	.title-container h1 {
		font-size: 3rem !important;
	}
	:root {
		--highlight: black;
	}

	.title-container {
		height: auto;
	}
}

.title-container p, span{
	max-width: 70ch;
	line-height: 1.3em;
	font-weight: 600;
	color: var(--primary);
	padding: 1em 0;
}

.title-container.end h1{
	color: #ccc;
}

.end {
	margin-top: 10vh;
	height: 90vh;
}

.title-container h1 {
	font-size: 6rem;
	/* text-transform: uppercase; */
	padding: 2rem 0;
	font-family: "dingdong";
	max-width: 70vw;
}

.link:hover {
	background: var(--black);
	color: var(--white);
}

.link {
	margin-top: .5em;
	padding: .25rem;
	padding-top: .1rem;
	padding-left: 0;
	font-family: "Roboto Mono";
	font-size: .8rem;
	color: var(--highlight);
	/* border-bottom: 1px solid var(--highlight); */
}

.websites-container{
	margin:auto;
	width: var(--width);
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.project {
	background-color: var(--background);
	grid-gap: 4em;
	grid-template-columns: calc(40% - 2em) calc(60% - 2em);
	/* border: 1px solid var(--light-primary); */
	padding: 1em 0;
	margin: 1rem 0;
	margin-bottom: 3rem;
  display: grid;
  height: 20vh; 
  overflow: visible;
	position: relative;
  transition: all 250ms;
}

.button {
	opacity: 0;
}

h2 {
	font-weight: 100;
	font-size: 2.8em;
	margin-bottom: 1.1rem;
}

h3 {
	font-size: 2.0em;
	margin-bottom: 1.8rem;
}

.project h3 {
	color: #0005;
	/* text-transform: uppercase; */
	font-weight: 500;
}


.project p {
	max-width: calc(var(--size) * var(--blocks) / 2);
  line-height: 1.2em;
  margin-top: .5em;
  font-weight: 600;
}

.metadata {
	/* border-right: 1px solid #0002; */
	padding: 0 2rem;
	height: inherit;
}

.project > .metadata .ugh {
	opacity: 0;
}

.project{
	cursor: ew-resize;
	color: var(--black);
	height: 60vh;
	background-color: var(--background);
	padding: 5vh 0;
}

.project:hover .metadata{
	/* background-color: var(--primary); */
	/* box-shadow: 0 0 15px 35px var(--primary); */
	overflow-y: clip;
	max-height: 100%;
}

.options {
	position: absolute;
	z-index: 99;
	width: 100%;
	height: 100%;
	display: grid;
	/*background-color: pink;*/
	grid-template-columns: repeat(var(--blocks), 1fr);
}

.button {
		width: 100%;
		height: 100%;
		border: 1px solid #eee2;
		/*border: 1px solid black*/;
}

.hidden {
	/* box-shadow: 0 0 15px 5px rgb(232, 251, 112); */
	width: 95%;
	opacity: 0;
	z-index: 99;
	position: relative;
	pointer-events: none;
	border: 1.5px solid var(--primary);
  padding: .5rem;
  /* background: #fff; transition: all 300ms ease-out; */
}

.above {
	position: absolute;
	z-index: 99;
}

.project .hidden{
	opacity: 1;
}

.project > .metadata .ugh {
	opacity: 1;
}

.project[size="mobile"] .above{
	position: unset;
}

.project[size="mobile"] p {
	max-width: 100%;
}

.project[size="mobile"] {
	height: auto;
	border: 0px solid;
}

.project[size="mobile"] .options{
	display: none;
}

.project[size="mobile"] .hidden{
	opacity: 1;
}

.project[size="mobile"] > .metadata .ugh {
	opacity: 1;
}