@font-face {
  font-family: "SF UI Text";
  src: url("https://d33wubrfki0l68.cloudfront.net/7f5efbefa73e3ee486c502b66fb9200e108ad047/cbb2f/fonts/sf-ui-text-heavy.woff")
    format("woff");
  font-display: swap;
  font-style: normal;
  font-weight: 900;
}

@font-face {
  font-family: "SF UI Text";
  src: url("https://d33wubrfki0l68.cloudfront.net/ecc2177145d53dcd3f567531af3e9557fb211d3b/4faff/fonts/sf-ui-text-regular.woff")
    format("woff");
  font-display: swap;
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "SF UI Text";
  src: url("https://d33wubrfki0l68.cloudfront.net/8036012d5d6add8a4bad0ea000696eaaa65f48e8/b349c/fonts/sf-ui-text-bold.woff")
    format("woff");
  font-display: swap;
  font-style: normal;
  font-weight: bold;
}

@font-face {
  font-family: "SF UI Text";
  src: url("https://d33wubrfki0l68.cloudfront.net/e8020de2a082b7f99bd455cd96d87d90e5104367/809fe/fonts/sf-ui-text-light.woff")
    format("woff");
  font-display: swap;
  font-style: normal;
  font-weight: 200;
}
:root {
  --gray: #9e9e9e;
  --black: #1a191d;
}
.gray {
  color: var(--gray);
}
.white {
  color: white;
}
.bg-black {
  background-color: var(--black);
}
html {
  overflow-x: hidden;
}
body {
  font-family: "SF UI Text", "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu",
    "Cantarell", "Open Sans", sans-serif;
  overflow-x: hidden;
}
@keyframes smoothScroll {
  0% {
    transform: translateY(-150px);
  }

  100% {
    transform: translateY(0px);
  }
}

header.active {
  position: fixed;
  top: 0;
  z-index: 30;
  animation: smoothScroll 1s forwards;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
}
.pier {
  font-family: "Edu QLD Hand", cursive;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
.handsome-bg {
  left: -35%;
  top: -15%;
  width: 165%;
  z-index: -1;
}
.handsome {
  background-image: url("../img/guapo.png");
  height: 0px;
  padding-bottom: 100%;
  background-size: cover;
  background-position: center center;
}
.handsome-box {
  border: 1px solid white;
  position: absolute;
  top: 7%;
  left: 7%;
  z-index: -1;
}

.logo {
  font-size: 30px;
}

#whoami h1 {
  font-size: 40px;
}
.text-small {
  font-size: 11px;
}
.menu-toggle {
  z-index: 999;
  padding: 0;
  width: 1.8em;
  height: 2.09em;
  background: none;
  position: relative;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-flexbox;
  display: inline-flex;
  margin-top: 0.699em;
  color: white;
}

.menu-toggle:before,
.menu-toggle:after {
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  background-color: currentColor;
}
.menu-toggle:before {
  top: 0;
}
.menu-toggle:after {
  right: 0;
  width: 72%;
  top: 0.8em;
}
.work-item {
  text-decoration: none;
  color: inherit;
  border-radius: 15px;
  display: block;
  overflow: hidden;
}
.work-image {
  padding-bottom: 100%;
  background-position: center;
  background-size: cover;
  transform: scale(1);
  transition: transform 0.2s;
}
.work-item:hover .work-image {
  transform: scale(1.1);
}
.work-details {
  top: 0;
  color: white;
  height: 100%;
  opacity: 1;
  transition: opacity 0.2s;
  background-color: rgba(0, 0, 0, 0.8);
}
.work-item:hover .work-details {
  opacity: 1;
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .text-small {
    font-size: 14px;
  }
  #whoami h1 {
    font-size: 70px;
  }
  #whoami {
    height: 600px;
  }
  .work-details {
    opacity: 0;
  }
  .menu-toggle {
    width: 2.78em;
  }
  .menu-toggle:after {
    top: 1.13em;
  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}