* {box-sizing: border-box;}

html {
  scroll-behavior: smooth;
  font-size: 100%;
}
html, body {
	padding:0;
	margin:0;
	border:0;
	width: 100vw;
	height: 100%;
}
	
body {
	font-family: 'Neue Montreal';
	font-weight: 500;
	font-size: 2vw;
	line-height: 1;
	color: #000;
	width: 100vw;
	max-width: 100vw;
	overflow-x: hidden;
	background-color: #fff;
	-webkit-font-smoothing: antialiased;
}

.background {
	position: relative;
	overflow: hidden;
	z-index: 0;
	width: 100vw;
	height: auto;
	background-color: #fff;
}

p {
    width: 100vw;
    height: 100%;
    box-sizing: border-box;
}

a {transition:.1s;}
a:link {text-decoration: none; color: #000;}
a:visited {text-decoration: none; color: #000;}
a:hover {text-decoration: none; color: #000;}

.header-container {
	float: left;
	position:fixed;
	display: flex;
	flex-direction: column;
    z-index: 5;
	width: 100vw;
	backdrop-filter: blur(2vw);
	-webkit-backdrop-filter: blur(1vw);
	align-items: center;
}

.header {
	font-size: 2vw;
	margin-top: 1vw;
	margin-bottom: 1vw;
	height:4vw;
	position: relative;
	z-index: 20;
	width: 90vw;
	display: flex;
	justify-content: space-between;
	align-items: center;
	line-height: 1;
}

.mineral-garden {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

.header-icons {
	display: flex;
	flex-direction: row;
	column-gap: 2vw;
	align-items: center;
}

.sixty-two {
	width: 2vw;
	height: 2vw;
}

.logo {
	width: 2vw;
	}

.glyph {
	width: 2vw;
	height: 2vw;
}

.instagram {
	width: 2vw;
	filter: invert();
}

.no-wrap {white-space: nowrap;}

.break {
	flex-basis: 100%;
	height: 0;
}

button {
	border: none;
	font-family: 'Neue Montreal';
	font-size: 2vw;
	font-weight: 500;
	opacity: 1;
	margin: 0;
	padding: 0;
	color: #000;
	background-color: transparent;
	transition: .1s;
}

.active {
	text-decoration: underline;
  }

button:hover {
	text-decoration: underline; 
	color: #000;
	opacity: .2;
}

.bar {
	width: 100vw;
	height: .2vw;
	background-color: #000;
}

.header-padding {
	width: 100%;
	height: 6vw;
}

.spacer {
	width: 100vw;
	height: 10vw;
}

.hover {
	transition: 0.1s;
}
.hover:hover {
	opacity: 0.2;
}

.drawing-container {
	display: grid;
	column-gap: 5vw;
	row-gap: 5vw;
	grid-template-columns: auto auto;
	width: 100vw;
	height: 100%;
    justify-items: center;
	align-items: center;
	padding: 0 10vw 0 10vw;
}

.drawing-item {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	height: auto;
}

.drawing {
	width: auto;
	height: 100%;
	min-height: 100%;
	display: flex;
	flex-direction: row;
	overflow: hidden;
}

.drawing>img {
	object-fit: contain;
	min-width: 100%;
	min-height: 100%;
}

.invisible {display: none;}

.footer-container {
	width: 100%;
	overflow-x: hidden;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: white;
}

.footer {
	margin-top: 2vw;
	margin-bottom: 2vw;
	overflow: hidden;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	color: black;
	width: 90vw;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
	font-size: 6vw;
	line-height: 1.5;
}

@media screen and (max-width: 800px) {
	html {height: -webkit-fill-available;}
	body {min-height: -webkit-fill-available;}
	.header-container {
		backdrop-filter: blur(5vw);
		-webkit-backdrop-filter: blur(5vw);
	}
	.header {
		margin-top: 2vw;
		margin-bottom: 2vw;
		height:auto;
		width: 90vw;
		font-size: 6vw;
		flex-wrap: wrap;
		line-height: 1.5;
		align-items: center;
	}
	button {
		font-size: 5vw;
	}
	button:hover {
		opacity: 1;
	}

	.header-icons {
		column-gap: 2.5vw;
		height: 5.5vw;
		margin-top: -2vw;
	}

	.sixty-two {
		width: 5.5vw;
		height: 5.5vw;
	}
	
	.logo {
		width: 5.5vw;
		}
	
	.glyph {
		width: 5.5vw;
		height: 5.5vw;
	}
	
	.instagram {
		width: 5.5vw;
		height: 5.5vw;
	}

	.bar {height: .4vw;}

	.drawing-container {
		grid-template-columns: auto;
		row-gap: 20vw;
		padding: 0;
	}
	.drawing-item {
		width: 90%;
	}

	.header-padding {height: 13vw;}
	.invisible {display: flex;}
	.invisible-ios {display: none;}
	.spacer {height: 5vw;}
}

@media only screen and (min-width: 1920px) {
	.drawing-container {
		column-gap: 4vw;
		row-gap: 10vw;
		grid-template-columns: auto auto auto;
		padding: 0 5vw 0 5vw;
	}
	
	.drawing-item {
		width: 100%;
	}
	
	.drawing {
		width: auto;
	}
	
	.drawing>img {
		object-fit: contain;
		max-width: 100%;
		min-height: auto;
	}
}