html {
  font-family: "Jost", sans-serif;
  font-size: 62.5%;
}

* {
  margin: 0;
  padding: 0;
}

/* SECTIONS */

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
}

.rotated {
  transform: rotate(-90deg);
  transform-origin: right, top;
  color: aliceblue;
}

.rotated,
.rotated:visited {
  transform: rotate(-90deg);
  transform-origin: right, top;
  color: aliceblue;
  text-decoration: none;
}

.rotated:hover {
  text-decoration: underline solid 1px aliceblue;
}

.rotated:active {
  font-weight: 300;
}

.side {
  width: 10.3vw;
  height: 100vh;
  border-right: solid 1px #000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 65vh;
  flex-direction: column;
  background-color: #000;
}

.main {
  width: 89.7vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.catalog,
.studio,
.lab {
  border-bottom: solid 1px #000;
  width: 100;
}

.catalog {
  height: 13.68vh;
  display: flex;
  align-items: center;
  padding-left: 5%;
}

.studio {
  height: 43.16vh;
  padding: 2% 5%;
}

.lab {
  height: 43.16vh;
  padding: 2% 5%;
}

.list {
  display: flex;
  flex-direction: column;
  padding: 2vh 0;
}

.project {
  height: 5vh;
  width: 100;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* TYPOGRAPHY */

h1 {
  font-size: 3rem;
  font-weight: 400;
  text-transform: uppercase;
}

h2 {
  font-size: 3rem;
  font-weight: 300;
}

p {
  font-size: 2rem;
  font-weight: 200;
}

a,
a:visited {
  font-size: 2rem;
  font-weight: 200;
  text-decoration: none;
  color: #000;
}

a:hover {
  text-decoration: underline solid 1px #000;
}

a:active {
  font-weight: 300;
}