@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&family=Chivo+Mono:ital,wght@0,100..900;1,100..900&display=swap');

body {
	display: flex;
	flex-direction: column;
}

.main {
	padding: 0vw 9vw;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.indxtxt {
	padding: 2.5rem 2rem 2rem 2rem;
	background-color: var(--stark-white);
	max-height: 55%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 5vh;
}

.side {
	height: 45%;

}

.name {
	display: inline-flex;
}
.name-let {
	position: relative;
	animation: bounce .8s ease infinite alternate;
}
.name-let:nth-child(2) { animation-delay: .1s }
.name-let:nth-child(3) { animation-delay: .2s }
.name-let:nth-child(4) { animation-delay: .3s }
.name-let:nth-child(5) { animation-delay: .4s }
@keyframes bounce {
	100% {
		transform: translateY(-40px);
	}
}

/* Crate */
.crate-holder {
  position: relative;
  width: min(64vw, 25rem);
  aspect-ratio: 5 / 6;
  background-color: var(--handle-brown);
}

/* Tabs */
.crate{
	position: absolute;
	top: 46%;
	width: 100%;
	height: 54%;
	background-color: var(--crate-brown);
	z-index: 2;
}
.tab {
	z-index: 1;
  position: absolute;
  left: 3%;
  width: 94%;
  height: 25%;

  display: flex;
  justify-content: center;
  padding-top: 3%;

	font-family: 'Chivo Mono';
	font-weight: 400;
	font-size: clamp(1.5rem, 2vw, 1.8rem);
  color: white;
  text-decoration: none;

  transition: transform 0.3s ease;
}

/* Individual placement */
.tab-collection {
  top: 3%;
  background-color: var(--twee-green);
}

.tab-projects {
  top: 17%;
  background-color: var(--twee-red);
}

.tab-about {
  top: 31%;
  background-color: var(--twee-yellow);
}

/* Hover lift */
.tab:hover {
  transform: translateY(-30%);
}

/* Handle */
.handle {
	z-index: 3;
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translateX(-50%);
  width: 40%;
  height: 6%;
  background-color: var(--handle-brown);
  border-radius: 999em;
}













/* Large devices. Desktops, etc. */
@media (min-width: 992px) {
	.main {
		flex-direction: row;
		padding: 0rem 12vw;
	}
	.indxtxt {
		padding: 3rem;
		width: 60%;
		height: auto;
		align-items: flex-start;
		margin-right: 2rem;
	}
	.side {
		width: 40%;
		display: flex;
		justify-content: center;
		height: auto;
	}
	.tab{
		padding-top: 5%;
	}
}