/* RESET */

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

/* PAGE */

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

/* TOP BAR */

.top-bar {
  position: fixed;

  top: 0;
  left: 0;

  width: 100%;

  height: 72px;

  background: rgba(255, 255, 255, 0.96);

  backdrop-filter: blur(12px);

  z-index: 9999;

  display: flex;
  align-items: center;

  padding-left: 56px;
}

/* NAME */

.small-name {
  font-family: 'Playfair Display SC', serif;

  font-size: 12px;
  letter-spacing: 0.02em;

  color: #111111;

  text-decoration: none;
}

/* SECTIONS */

.hero-section,
.projects-section,
.about-section {
  width: 100%;
  position: relative;
}

/* IMAGES */

.section-image {
  width: 100%;
  display: block;
}

/* SHOP COMMUTE LINK */

.shop-link {
  position: absolute;

  top: 34%;
  left: 22%;

  width: 22%;
  height: 6%;

  z-index: 100;
}

/* ARCHIVE LINK */

.archive-link {
  position: absolute;

  top: 69%;

  left: 22%;

  width: 22%;
  height: 6%;

  z-index: 100;
}

/* POINTER */

.shop-link:hover,
.archive-link:hover {
  cursor: pointer;
}

/* ABOUT SECTION */

.about-section {
  position: relative;
}

/* RESUME */

.resume-link {
  position: absolute;

  bottom: 2%;
  left: 38%;

  width: 10%;
  height: 2%;

  z-index: 100;
}

/* LINKEDIN */

.linkedin-link {
  position: absolute;

  bottom: 2%;
  left: 52%;

  width: 10%;
  height: 2%;

  z-index: 100;
}

/* ABOUT POINTER */

.resume-link:hover,
.linkedin-link:hover {
  cursor: pointer;
}

/* MOBILE */

@media (max-width: 768px) {

  .top-bar {
    padding-left: 24px;
    height: 64px;
  }

  .small-name {
    font-size: 11px;
  }

}