/*Declarations */
@font-face { 
	font-family: "AHG Bold"; 
	src: url("/fonts/AlteHaasGroteskBold.ttf") format("truetype");
	font-weight: bold;
	font-style: normal; 
	font-display: sans; 
}

@font-face { 
	font-family: "AHG"; 
	src: url("/fonts/AlteHaasGroteskRegular.ttf") format("truetype");
	font-weight: normal;
	font-style: normal; 
	font-display: sans; 
}

 /*Everything Else */
@media screen and (max-width: 770px) {
	.pageWrapper {
		transform: rotate(90deg);
	}
}

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
	font-size: 1vw;
	font-family: "AHG";
	/* https://grabient.com/_gLqgLqgPhf83gBkf-cf5cf5Wf4wgA3gDPf8OmRyN0Tt9?angle=225&steps=5 */
	background: linear-gradient(225deg, #ecffff 0.000%, #ffffff 25.000%, #ffffff 50.000%, #ffffff 75.000%, #ffffff 100.000%);
	margin: 0;
}

h1 {
	font-family: "AHG Bold";
	font-size: 20vw;
	line-height: .55em;
	letter-spacing: -.1em;
	color: #0285b233;
	text-shadow: 0 0 .25vw #0285b24d;
}

h2 {
	font-family: "AHG Bold";
	font-size: 8vw;
	line-height: .55em;
	letter-spacing: -.1em;
	color: #0285b233;
	text-shadow: 0 0 .25vw #0285b24d;
}

a {
	color: #0285b2;
	font-size: 1.5vw;
}

.verticalText {
	display: block;
	transform: rotate(90deg);
	position: absolute;
}

.homeButton {
	display: block;
	position: absolute;
    right: 2vw;
}

/* Images */

#imac {
	display: block;
	position: absolute;
    top: 20vw;
    right: -6vw;
    width: 40vw;
}

#water {
	display: block;
	transform: rotate(90deg);
	position: absolute;
	margin: 0;
	right: -5vw;
	top: -5vw;
}

#water img {
	-webkit-mask-image: radial-gradient(circle, black 0%, transparent 70%);
	mask-image: radial-gradient(circle, black 0%, transparent 70%);
	opacity: .25;
	width: 50vw;
}

/* Text */
#title {
    margin-left: -8vw;
}

#blurb1 {
	width: 30vw;
	display: block;
	position: absolute;
	top: 8vw;
	left: 35vw;
	font-size: 1.5vw;
}

#imacTitle {
	top: 48vw;
	right: -4vw;
}

#underConstruction {
	width: 40vw;
	position:absolute;
	top: 21vw;
	left: 27vw;
}

.draggable {
  cursor: move;
  position: absolute;
}

/* modified from https://codepen.io/alexerlandsson/pen/GgJQEKE */
.liquidGlass {
	border-radius: 5vw;
	padding: 3vw;
	background-color: #ffffff80;
	color: #0190bf;
	text-shadow: 0 2px 4px rgb(0 0 0 / 10%);
	font-size: 1.25rem;
	box-shadow: 0 6px 6px rgb(0 0 0 / 20%), 0 0 20px rgb(0 0 0 / 10%);
	text-align: justify;
}