*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

@font-face {
	font-family: 'Gestalt-Regular';
	src: url('fonts/Gestalt-Regular.otf') format('opentype');
}

html {
	font-size: 62.5%;
}

body {
	font-size: 1.6rem;
	font-family: 'Gestalt-Regular';
}

.logo-area {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	transition: width 0.5s ease-in-out;
}

.compressed-logo {
	width: 100%;
	height: 100%;
	transition: width 0.5s ease-in-out;
	backface-visibility: hidden;
}

.logo-area svg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: margin-left 0.5s ease-in-out, height 0.5s ease-in-out;
	will-change: transform;
}

.information {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: fixed;
	top: 0;
	bottom: 0;
	left: -50vw; /* Initially hidden */
	width: 50vw;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 16px;
	box-sizing: border-box;
	transition: left 0.5s ease-in-out; /* Added a transition for the left property */
}

.information p,
.information a {
	font-size: 3.85rem;
	font-family: 'Gestalt-Regular';
	text-decoration: none;
	color: inherit;
}

.indent {
	text-indent: 2em;
}

sup {
	font-size: 2rem;
	font-weight: bold;
}

#svgPath {
	cursor: pointer;
}


/* Media Queries */

@media (max-width: 600px) {
	.logo-area {
	  width: 100%;
	  height: 100svh; /* Compresses vertically */
	  bottom: 0;
	  transition: height 0.5s ease-in-out; 
	}
	
	.information {
		top: auto;
		left: auto; /* Reset left to default */
		width: 100vw;
		height: 50vh; /* Half of the viewport height */
		bottom: calc(-50vh); /* Initially hidden */
		transition: bottom 0.5s ease-in-out; 
	  }

	.information p,
	.information a {
		font-size: 2rem;
	}
  }