body {
  margin: 0;
  background: #F5F3EE;
}

/* HOMEPAGE */

.homepage {
  width: 100vw;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  overflow: hidden;
}

.wrapper {
  position: relative;
}

.clown-image {
  width: 400px;
  max-width: 80vw;
  display: block;
}

.upper-nose-button {
  position: absolute;

  top: 30%;
  left: 51%;

  transform: translate(-50%, -50%);

  width: 135px;
  height: 103px;

  border-radius: 100%;

  background-color: rgba(0, 0, 0, 0.0);

  cursor: pointer;
}

.lower-nose-button {
  position: absolute;

  top: 34%;
  left: 47.5%;

  transform: translate(-50%, -50%);

  width: 150.1px;
  height: 114px;

  border-radius: 100%;

  background-color: rgba(0, 255, 51, 0.0);

  cursor: pointer;
}

.tear-button {
  position: absolute;

  top: 38.2%;
  left: 81.4%;

  transform: translate(-50%, -50%);

  width: 26px;
  height: 26px;

  border-radius: 100%;

  background-color: rgba(0, 255, 51, 0.0);

  cursor: pointer;
}

/* WORKS PAGE */

.works-page {
  margin: 0;
  background: #000;

  overflow-x: hidden;
}

.media-container {
  width: 100%;
}

.media-section {
  width: 100vw;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  overflow: hidden;
}

/* IMAGES */

.media-image {
  max-width: 100vw;
  max-height: 100vh;

  width: auto;
  height: auto;

  object-fit: contain;

  display: block;
}

/* VIDEOS */

.video-wrapper {
  width: 100vw;
  height: 100vh;

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

.video-wrapper iframe {
  width: 100vw;
  height: 56.25vw;

  max-height: 100vh;
  max-width: 177.78vh;

  border: none;
}