@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Prata&display=swap");

html.has-scroll-smooth {
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
}

.container {
  perspective: 1px;
  opacity: 0;
}

ul {
  list-style: none;
}

a {
  text-decoration-line: none;
}

* {
  cursor: none;
  box-sizing: border-box;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

*::-webkit-scrollbar {
  display: none;
}

.minimal-text {
  letter-spacing: 5px;
  text-transform: uppercase;
}

body,
html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

div.nav {
  position: fixed;
  width: 100vw;
  z-index: 1;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 20px;
}

div.nav span.logo {
  padding: 20px;
  font-size: 30px;
  font-weight: bold;
  transition: 0.8s ease;
  position: relative;
}

div.nav span.logo b#oneeighty {
  transform: rotateZ(180deg);
}

div.nav span.logo::after {
  left: 0%;
  opacity: 1;
  position: absolute;
  letter-spacing: 0px;
  transform: translate(50%);
  content: " ɅV";
  transition: 0.8s ease;
}

div.nav span.logo:hover {
  transform: translate(-100%, 0);
  letter-spacing: -12px;
}

div.nav span.logo:hover::after {
  transform: translate(calc(100% + 10px));
}

div.loader {
  height: 100vh;
  width: 100vw;
  z-index: 5;
  position: fixed;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

div.loader span#bouncer {
  position: absolute;
  bottom: -100%;
  transform: translate(-50%, -50%);
  left: 50%;
  width: 50px;
  transition: opacity 0.2s ease;
  opacity: 1;
  aspect-ratio: 1;
  border-radius: 50%;
  animation-name: cursor-jiggle;
  animation-duration: 3s;
  animation-direction: normal;
  animation-iteration-count: infinite;
}

div.loader span#bouncer::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  transform: translate(-50%, -50%);
  aspect-ratio: 1;
  border-radius: 50%;
  animation-name: cursor-jiggle;
  animation-duration: 3s;
  animation-direction: normal;
  animation-iteration-count: infinite;
}

div.loader span.name {
  animation: loader 1s 1 ease;
  font-family: "Prata", "Times New Roman", serif;
  font-size: 4vw;
  white-space: nowrap;
  position: absolute;
  transition: opacity 0.5s ease;
  opacity: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

div.loader span.name::before {
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translate(-50%);
  animation: loader 1s 1 linear;
  font-size: 2vw;
  content: "HI, I'M";
}

div.loader-end {
  animation: loader-end 1s 1 linear;
  height: 0vh;
}

div.loader-end#sec {
  animation: loader-end 1.25s 1 ease-in;
}

div.loader-end#thir {
  animation: loader-end 1.5s 1 ease-in;
  mix-blend-mode: difference;
}

div.loader-end::after {
  animation: loader-end 1s 1 linear 0.5s;
  height: 0vh;
}

div.loader-end span.name {
  opacity: 0;
}

div.scroll-counter {
  position: fixed;
  left: 2vw;
  top: 50vh;
  z-index: 1;
  transform: translate(-100%, -50%);
  transition: transform 1.25s ease;
}

div.scroll-counter .secondhand {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15vh;
  transition: 0.05s ease;
  transform-origin: left;
  width: 9vh;
  height: 1px;
  position: absolute;
}

div.scroll-counter .secondhand::after {
  content: " ";
  border-radius: 50%;
  width: 10px;
  aspect-ratio: 1/1;
  position: absolute;
  transform: translate(-50%, -50%);
}

div.scroll-counter::after {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  aspect-ratio: 1/1;
  z-index: -1;
  width: 24vh;
  backdrop-filter: blur(5px);
  transition: 0.4s ease;
}

div.scroll-counter:hover {
  z-index: 1;
  transform: translate(100%, -50%) rotate(360deg);
}

div.scroll-counter::before {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  aspect-ratio: 1/1;
  width: 5vh;
}

div.scroll-counter ol {
  list-style-position: inside;
  margin: 0;
  border-radius: 50%;
  aspect-ratio: 1/1;
  width: 8vh;
  position: relative;
}

div.scroll-counter ol::after {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  aspect-ratio: 1/1;
  width: 26vh;
}

div.scroll-counter ol li {
  width: 3vh;
  height: 3vh;
  border-radius: 50%;
  font-size: 2vh;
  aspect-ratio: 1/1;
  text-align: center;
  position: absolute;
}

div.contacts {
  position: fixed;
  left: 95vw;
  top: 50vh;
  z-index: 1;
}

div.contacts li {
  font-size: 12px;
  margin-bottom: 250%;
  list-style: none;
  transform: rotate(90deg);
}

.quilt-lat {
  position: relative;
  text-align: center;
}

.quilt-lat::before {
  position: absolute;
  content: "";
  width: 20%;
  top: 50%;
  left: -50%;
  transition: 0.7s ease;
}

.quilt-lat::after {
  position: absolute;
  content: "";
  width: 20%;
  top: 50%;
  right: -50%;
  transition: 0.7s ease;
}

.quilt-lat:hover::after {
  width: 0%;
}

.quilt-lat:hover::before {
  width: 0%;
}

.quilt-stat {
  position: relative;
}

.quilt-stat::before {
  position: absolute;
  content: "";
  width: 5vw;
  top: 50%;
  left: -6vw;
  transition: 0.7s ease;
}

.quilt-stat::after {
  position: absolute;
  content: "";
  border-radius: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%);
  top: 50%;
  left: -7vw;
  transition: 0.7s ease;
}

div.background {
  position: absolute;
  font-size: 30vh;
  top: 0%;
  left: -50%;
  z-index: -5;
}

div.background div.background-i {
  line-height: 25vh;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

div.header {
  position: relative;
  height: 100vh;
}

div.header div.hero {
  font-size: 8vh;
  position: absolute;
  z-index: 4;
  top: 50vh;
  padding-right: 5vw;
  left: 20%;
  width: 30vw;
}

div.header div.border {
  content: "";
  position: absolute;
  width: 45vh;
  aspect-ratio: 1/1;
  top: 30%;
  left: 40%;
  transform: translate(-50%, -50%);
  z-index: 2;
  border-radius: 50%;
}

div.header div.border li {
  position: absolute;
  flex-direction: column;
  display: inline-block;
  font-size: 20px;
}

div.header div.border li:nth-child(1) {
  top: 22vh;
  right: -12vw;
}

div.header div.border li:nth-child(2) {
  top: 25vh;
  right: -8vw;
}

div.header div.border::after {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 110%;
  aspect-ratio: 1/1;
  z-index: 0;
  border-radius: 50%;
  content: "";
}

div.header div.border::before {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  aspect-ratio: 1/1;
  z-index: 0;
  background-image: url(../img/sc1.png);
  background-size: cover;
  border-radius: 50%;
  content: "";
}

div.header span.scroll-down {
  position: absolute;
  top: 90vh;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.9s ease;
}

div.header span.scroll-down img#scroll-down-img {
  animation: mouse-icon-jiggle 1s alternate infinite;
  width: 3vw;
  filter: invert(0.7) sepia(60%);
  pointer-events: none;
}

div.header span.scroll-down::after {
  content: "↓";
  font-size: 20px;
  position: absolute;
  bottom: -50%;
  left: 50%;
  transform: translate(-50%, 70%);
}

div.header span.scroll-down:hover {
  transform: translate(-50%, -20%);
}

div.overlay-after {
  margin: 0;
  position: fixed;
  transition: 2.5s ease;
  background: black;
  pointer-events: none;
  border-radius: 50%;
  height: 0%;
  width: 0%;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

div.overlay {
  top: 50%;
  left: 50%;
  height: 0vh;
  width: 0vw;
  position: fixed;
  z-index: 2;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: 1.5s ease;
  overflow: hidden;
  mix-blend-mode: difference;
  font-size: 10vw;
}

div.overlay ul {
  border-radius: 50%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0;
  position: fixed;
  height: 100%;
  width: 100%;
  display: flex;
  transition: 0.5s ease;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

div.overlay ul li {
  line-height: 10vw;
  overflow: hidden;
  transition: letter-spacing 0.5s ease, color 0.5s ease;
  letter-spacing: -1vw;
}

div.overlay ul li:hover {
  letter-spacing: 0vw;
}

div.content {
  min-height: 100vh;
}

div.content h1#content-header {
  margin-top: 20vh;
  text-align: center;
  margin-bottom: 10vh;
  font-size: 8vh;
  font-weight: normal;
}

div.projects h1#content-header {
  margin-top: 5%;
  margin-bottom: 5%;
}

div.projects div.card-container {
  position: relative;
  z-index: -2;
  height: 40vw;
}

div.projects div.card-container div.background {
  top: 20vh;
}

div.projects div.card-container div.background div.background-i {
  font-size: 20vh;
}

div.projects div.card-container div.card {
  position: absolute;
  left: 10vw;
  font-size: 1.05vw;
  border-radius: 50px;
  padding: 30px;
  z-index: 2;
  width: 20vw;
}

div.projects div.card-container div.card h1 {
  margin: 30px;
  text-align: center;
  font-weight: normal;
}

div.projects div.card-container div.card a.card-button {
  margin-top: 3vh;
  display: block;
  height: 0;
  font-weight: bold;
  overflow: hidden;
  transition: 1s ease;
  line-height: 4vh;
  width: 100%;
  text-align: center;
}

div.projects div.card-container div.card:hover a.card-button {
  height: 4vh;
}

div.projects div.card-container div.showcase {
  position: absolute;
  top: 0vh;
  left: 40vw;
  z-index: 1;
  transition: clip-path 1s ease;
}

div.projects div.card-container div.showcase img {
  border-radius: 20px;
  width: 50vw;
  transition: filter 1s ease;
}

div.projects div.card-container div.showcase::after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 25vw;
  width: 30vw;
  height: 35vw;
  z-index: -1;
  border-radius: 50px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: 1s ease;
}

div.projects div.card-container div.showcase::before {
  content: " ";
  position: absolute;
  top: 50%;
  left: 25vw;
  width: calc(30vw + 3vh);
  height: calc(35vw + 3vh);
  z-index: -1;
  border-radius: 50px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: 1s ease;
}

div.projects div.card-container div.showcase:hover::after {
  width: 40vw;
}

div.projects div.card-container div.showcase:hover::before {
  width: calc(40vw + 3vh);
}

div.projects div.card-container div.showcase:hover+.card a.card-button {
  height: 4vh;
}

div.projects div.card-container div.rev-card {
  left: auto;
  right: 10vw;
  z-index: 2;
}

div.projects div.card-container div.rev-s {
  left: auto;
  right: 40vw;
}

.mouse {
  border-radius: 50%;
  width: 12px;
  aspect-ratio: 1/1;
  mix-blend-mode: difference;
  position: fixed;
  z-index: 100;
  transition: width 0.3s ease;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.mouse-click {
  animation-name: cursor-jiggle;
  animation-duration: 1.5s;
  animation-direction: normal;
}

.mouse-hover {
  width: 60px;
}

/*# sourceMappingURL=base.css.map */