@import url("https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap");
:root {
  --blue: #0055e1;
  --black: #050a0f;
  --gray: rgb(120, 125, 130);
  --white: rgb(245, 250, 255);
}
.nying {
  display: none !important;
}
::-webkit-scrollbar,
scrollbar {
  width: 1vw;
  cursor: ns-resize !important;
}

* a {
  text-decoration: none !important;
}
.tahubulatdigorengdadakan,
.tahubulatdigorengdadakan a,
.tahubulatdigorengdadakan h6,
.tahubulatdigorengdadakan i {
  cursor: pointer !important;
}
::-webkit-scrollbar-track,
scrollbar-track {
  background-color: var(--blue);
  cursor: ns-resize !important;
}

::-webkit-scrollbar-thumb,
scrollbar-thumb {
  background-color: var(--white);
  cursor: ns-resize !important;
}

* {
  -moz-window-dragging: no-drag !important;
  -webkit-user-drag: none !important;
  font-family: "Onest" !important;
  user-select: none !important;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth !important;
  cursor: crosshair;
}
body {
  background: var(--white);
  overflow-x: hidden !important;
  transition: 0.6s ease-in-out;
}
body.dark {
  --blue: #32e1ff;
  --white: rgb(15, 20, 25);
  --gray: rgb(120, 125, 130);
  --black: rgb(245, 250, 255);
}
nav {
  position: fixed;
  width: 84vw;
  z-index: 99;
  padding: 3vh 8vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: blur(1vh);
  font-size: 2vh;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  4% {
    transform: rotate(0deg);
  }
  8% {
    transform: rotate(0deg);
  }
  12% {
    transform: rotate(0deg);
  }
  16% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(0deg);
  }
  24% {
    transform: rotate(0deg);
  }
  28% {
    transform: rotate(0deg);
  }
  32% {
    transform: rotate(0deg);
  }
  36% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(0deg);
  }
  44% {
    transform: rotate(0deg);
  }
  48% {
    transform: rotate(0deg);
  }
  52% {
    transform: rotate(0deg);
  }
  56% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(0deg);
  }
  64% {
    transform: rotate(0deg);
  }
  68% {
    transform: rotate(0deg);
  }
  72% {
    transform: rotate(0deg);
  }
  76% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(0deg);
  }
  84% {
    transform: rotate(0deg);
  }
  88% {
    transform: rotate(0deg);
  }
  92% {
    transform: rotate(0deg);
  }
  96% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
nav img {
  animation: spin 4s infinite;
  height: 6vh;
  border-radius: 100vh;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 4vh;
  min-width: max-content;
}
.nav-links li a {
  cursor: pointer !important;
  text-decoration: none;
  color: var(--black);
  position: relative;
  transition: color 0.2s ease-in-out;
}
.nav-links li a:hover {
  color: var(--blue);
}
.nav-links li a::after {
  content: "";
  position: absolute;
  bottom: -0.6vh;
  left: 0;
  width: 100%;
  height: 0.1vh;
  background-color: var(--blue);
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.2s ease-in-out;
}
.nav-links li a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.nav-links li a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.p-a {
  color: var(--blue) !important;
}
.theme-toggle {
  cursor: pointer !important;
  position: fixed;
  z-index: 99;
  bottom: 2vh;
  right: 4vh;
  font-size: 4vh;
  background: var(--white);
  display: flex;
  padding: 1vh;
  border-radius: 100%;
  transition: filter 0.2s ease-in-out;
}
.theme-toggle:hover {
  filter: brightness(0.9);
}
body.dark .bxs-sun,
body:not(.dark) .bxs-moon {
  display: none;
  cursor: pointer !important;
}
body.dark .bxs-moon,
body:not(.dark) .bxs-sun {
  color: var(--blue);
  cursor: pointer !important;
}
.face {
  min-height: 100vh;
  color: var(--blue);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
.face h1 {
  z-index: 1;
  margin: -1vh;
  font-size: 16vh;
  color: var(--blue);
  letter-spacing: -0.4vh;
  transform: translateX(-100%);
  -webkit-text-stroke: 0.1vh var(--blue);
  transition: color 0.4s ease-in-out, text-shadow 0.8s ease-in-out;
}
.face h1:hover {
  color: transparent;
  text-shadow: 0 0 8vh var(--blue);
}
@keyframes slide-left {
  0% {
    opacity: 0;
    transform: translateX(-150%);
    filter: blur(2vh);
  }
  100% {
    transform: translateX(0);
  }
}
.face h1.AR {
  animation: slide-left 1.4s forwards;
  position: relative;
}
@keyframes slide-right {
  0% {
    opacity: 0;
    transform: translateX(150%);
    filter: blur(2vh);
  }
  100% {
    transform: translateX(0);
  }
}
.face h1.JF {
  animation: slide-right 1.4s forwards;
  position: relative;
}
.face h1 span {
  color: transparent;
  transition: color 0.4s ease-in-out;
}
.face h1 span:hover {
  color: var(--blue);
}
.face .headline {
  margin-top: 1vh;
  display: flex;
  gap: 2vh;
  z-index: 1;
  font-size: 2vh;
}
.face .headline p {
  color: var(--gray);
  display: flex;
  gap: 0.6vh;
  color: var(--gray);
  align-items: center;
  position: relative;
}
#rain {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100vw;
  min-height: 100vh;
  pointer-events: none;
}

.drop {
  position: absolute;
  width: 0.2vh;
  height: 0.4vh;
  border-radius: 100%;
  background: var(--blue);
  animation: fall linear infinite;
  filter: blur(0.2vh);
}
@keyframes fall {
  100% {
    transform: translateY(100vh);
  }
}
.hello {
  min-height: 100vh;
  max-width: 70vw;
  display: flex;
  margin: auto;
  align-items: center;
  position: relative;
  justify-content: space-between;
}
.hello .text {
  max-width: 30vw;
  position: relative;
}
.hello .text h2 {
  font-size: 10vh;
  height: 16vh;
  color: var(--blue);
  transition: transform 0.4s ease-in-out, text-shadow 0.4s ease-in-out,
    filter 0.4s ease-in-out;
}

.hidden {
  transform: scale(0.9);
  filter: blur(1vh);
}

.hello .text p {
  font-size: 2vh;
  line-height: 4vh;
  text-align: justify;
  position: relative;
  color: var(--black);
  opacity: 0.8;
}
.hello img {
  width: 50vh;
  border-radius: 100vh;
  position: relative;
}
.projects {
  padding-top: 12vh;
  padding-bottom: 20vh;
  margin: auto;
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 70vw;
}
footer h2 {
  width: 400vw;
  letter-spacing: 2.4vh;
  color: var(--blue);
  font-size: 10vh;
  -webkit-text-stroke: 0.1vh var(--blue);
  display: flex;
  justify-content: space-around;
  animation: moveRight 60s linear infinite;
}

footer h2 span {
  color: var(--white);
}
footer h3 {
  width: 400vw;
  background: var(--blue);
  letter-spacing: 2.4vh;
  color: var(--blue);
  font-size: 10vh;
  -webkit-text-stroke: 0.1vh var(--white);
  display: flex;
  justify-content: space-around;
  animation: moveLeft 60s linear infinite;
}

footer h3 span {
  color: var(--white);
}
@keyframes moveRight {
  0% {
    transform: translateX(-300vw);
  }
  100% {
    transform: translateX(0vw);
  }
}
@keyframes moveLeft {
  0% {
    transform: translateX(0vw);
  }
  100% {
    transform: translateX(-300vw);
  }
}
.carousel {
  width: 70vw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4vh;
}
.carousel .field {
  background: var(--blue);
  width: 100vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.carousel .field .image {
  cursor: pointer !important;
  height: 44vh;
  filter: grayscale(1);
  transition: filter 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.carousel .field .image:hover {
  filter: grayscale(0);
}
.carousel .field .name {
  display: flex;
  cursor: pointer !important;
  justify-content: space-between;
  padding: 2vh 4vh;
  background: var(--blue);
  align-items: center;
  z-index: 1;
  transition: all 0.2s ease-in-out;
}
.carousel .field:hover .image {
  transform: scale(1.2);
}
.anti-sate-ayam {
  height: 14vh;
}
.carousel .field .name h3 {
  font-size: 5vh;
  color: var(--white);
  cursor: pointer !important;
  transition: all 0.2s ease-in-out;
}
.carousel .field .name i {
  cursor: pointer !important;
  font-size: 7vh;
  color: var(--white);
  transition: all 0.2s ease-in-out;
}
.carousel .field:hover .name i {
  transform: rotate(-45deg);
  color: var(--blue);
  text-shadow: 0 0 4vh var(--blue);
}
.carousel .field:hover .name {
  background: var(--white);
}
.carousel .field:hover .name h3 {
  color: var(--blue);
  text-shadow: 0 0 4vh var(--blue);
}
.carousel .field:nth-child(1) .image {
  background: url("https://raw.githubusercontent.com/aariffaqiih/aariffaqiih.github.io/refs/heads/main/co.png");
  background-size: cover;
  background-position: center;
}
.carousel .field:nth-child(2) .image {
  background: url("https://raw.githubusercontent.com/aariffaqiih/aariffaqiih.github.io/refs/heads/main/ui.png");
  background-position: center;
  background-size: cover;
}
.carousel .field:nth-child(3) .image {
  background: url("https://raw.githubusercontent.com/aariffaqiih/aariffaqiih.github.io/refs/heads/main/mu.png");
  background-position: center;
  background-size: cover;
}
.profile-pict {
  overflow: hidden;
  display: flex;
  justify-content: center;
  height: 80vh;
  align-items: center;
  position: relative;
}

.my-head {
  background: url("https://raw.githubusercontent.com/aariffaqiih/aariffaqiih.github.io/refs/heads/main/me.png");
  background-size: cover;
  background-position: center;
  filter: grayscale();
  height: 54vh;
  position: absolute;
  bottom: 0;
  width: 64vh;
  z-index: 1;
}
@keyframes rotateUniverse {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes entot {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.universe {
  position: absolute;
  top: 20vh;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: rotateUniverse 30s linear infinite;
}
.ongsa {
  position: absolute;
  height: 96vh;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  font-size: 15vh;
}
.sun {
  position: absolute;
  transform: rotate(45deg);
  height: 96vh;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  font-size: 15vh;
}
.aylin {
  position: absolute;
  transform: rotate(90deg);
  height: 96vh;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  font-size: 15vh;
}
.luna {
  position: absolute;
  transform: rotate(315deg);
  height: 96vh;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  font-size: 15vh;
}
.sunsun {
  transform: rotate(315deg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.aylinaylin {
  transform: rotate(270deg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lunaluna {
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.universe img {
  height: 12vh;
}
.universe img {
  filter: blur(0.4vh);
  animation: entot 30s linear infinite;
}
.me {
  min-height: 100vh;
}

.code-wall h2 {
  width: 400vw;
  letter-spacing: 1vh;
  background: var(--blue);
  color: var(--blue);
  font-size: 8vh;
  -webkit-text-stroke: 0.1vh var(--white);
  display: flex;
  justify-content: space-around;
  align-items: center;
  animation: moveRight 60s linear infinite;
}

.code-wall h2 span {
  color: var(--white);
  display: flex;
  align-items: center;
}

.certificates {
  max-width: 70vw;
  margin: auto;
  padding-top: 20vh;
  padding-bottom: 20vh;
}
.codes,
.music {
  max-width: 70vw;
  margin: auto;
  margin-top: 10vh;
  margin-bottom: 10vh;
}
.music {
  display: flex;
  gap: 4vh;
}
.music-left,
.music-right {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2vh;
}
.code-project,
.crtfct-bc {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.certificates img {
  max-width: 24vw;
}
.hello b {
  color: var(--blue) !important;
  text-shadow: 0 0 2vh var(--blue);
}
.hello .text h5 {
  cursor: pointer;
  margin-top: 4vh;
  background: var(--blue);
  max-width: fit-content;
  display: flex;
  align-items: center;
  color: var(--white);
  gap: 1vh;
  font-size: 2vh;
  border-radius: 100vh;
  padding: 1.2vh 4vh;
}
.hello .text i {
  cursor: pointer;
  font-size: 2.6vh;
}
.code-project .screenshot-piza {
  height: 38vh;
  min-width: 64vh;
  background: url(./PIZZA.jpg);
  background-size: cover;
  background-position: top;
}
.code-project .screenshot-db {
  height: 34vh;
  min-width: 64vh;
  background: url(./db.png);
  background-size: cover;
  background-position: top;
}
.code-project .screenshot-nk {
  height: 32vh;
  min-width: 64vh;
  background: url("https://raw.githubusercontent.com/aariffaqiih/aariffaqiih.github.io/refs/heads/main/ka.png");
  background-size: cover;
  background-position: top;
}
.code-project .screenshot-p {
  height: 40vh;
  min-width: 64vh;
  background: url("https://raw.githubusercontent.com/aariffaqiih/aariffaqiih.github.io/refs/heads/main/pc.png");
  background-size: cover;
  background-position: top;
}
.userinterface img {
  width: 30vw;
  height: fit-content;
}

.hanjay {
  margin-top: 10vh;
  margin-bottom: 10vh;
  display: flex;
  justify-content: center;
  display: flex;
  gap: 2vh;
}
.code-project .screenshot-n {
  height: 40vh;
  min-width: 64vh;
  background: url("https://raw.githubusercontent.com/aariffaqiih/aariffaqiih.github.io/refs/heads/main/no.png");
  background-size: cover;
  background-position: top;
}
.responsive-iframe {
  height: 36vh;
  width: 64vh;
}
.code-project .screenshot-a {
  height: 36vh;
  min-width: 64vh;
  background: url("https://raw.githubusercontent.com/aariffaqiih/aariffaqiih.github.io/refs/heads/main/a.png");
  background-size: cover;
  animation: scrollBackground 40s linear infinite;
}

.code-project .screenshot-t {
  height: 36vh;
  min-width: 64vh;
  background: url("https://raw.githubusercontent.com/aariffaqiih/aariffaqiih.github.io/refs/heads/main/te.png");
  background-size: cover;
  animation: scrollBackground 30s linear infinite;
}

.code-project .screenshot-c {
  height: 36vh;
  min-width: 64vh;
  background: url("https://raw.githubusercontent.com/aariffaqiih/aariffaqiih.github.io/refs/heads/main/cl.png");
  background-size: cover;
  animation: scrollBackground 20s linear infinite;
}
@keyframes scrollBackground {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}

.codes .description,
.certificates .description {
  width: 36vw;
  display: flex;
  flex-direction: column;
  gap: 2vh;
}
.certificates .description h3,
.codes .description h3 {
  font-size: 6vh;
  color: var(--black);
}
.certificates .description p,
.codes .description p {
  font-size: 2vh;
  color: var(--gray);
}
.crtfct-bc .description .time a {
  text-decoration: none;
}
.nonn {
  background: var(--white) !important;
  color: var(--blue) !important;
  border: solid 0.2vh var(--blue);
  cursor: crosshair !important;
}

.codes .description i {
  cursor: pointer;
}
.codes .description a {
  cursor: pointer;
  margin-top: 1vh;
  font-size: 2vh;
  background: var(--blue);
  padding: 1vh 2vh;
  border-radius: 100vh;
  max-width: max-content;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--white);
}
.description h6 {
  display: flex;
  font-weight: normal;
  align-items: center;
  gap: 0.6vh;
  font-size: 2vh;
  color: var(--white);
  background: var(--blue);
  padding: 0.6vh 1.8vh 0.6vh 1.2vh;
  border-radius: 100vh;
  max-width: max-content;
}
.description .time {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.description .time p {
  display: flex;
  align-items: center;
  gap: 0.8vh;
}
.bx-up-arrow-alt {
  transform: rotate(45deg);
}
.code-project-wall {
  margin-top: 4vh;
  margin-bottom: 4vh;
  height: 0.2vh;
  background: var(--black);
  opacity: 0.1;
}
.soc {
  position: absolute;
  bottom: 4vh;
  display: flex;
  gap: 1vh;
  align-items: baseline;
  z-index: 97;
}
.soc i {
  cursor: pointer !important;
  transition: 0.2s ease-in-out;
  font-size: 5vh;
  color: var(--gray);
  background: var(--white);
  border-radius: 100%;
  padding: 2vh;
}
.soc i:hover {
  z-index: 98;
  font-size: 6vh;
  color: var(--blue);
  text-shadow: 0 0 4vh var(--blue);
}
.judulbos {
  display: none;
}
@media (orientation: portrait) {
  .code-project-wall {
    width: 80vw !important;
    margin-left: -5vw;
  }
  .judulbos {
    gap: 2vw;
    display: flex;
    justify-content: center;
    background: var(--blue);
    color: var(--white);
    font-size: 6vh;
    padding: 1vh;
    margin-bottom: -4vh;
  }
  .hanjay {
    flex-direction: column;
    align-items: center;
  }
  .hanjay img {
    width: 80vw;
  }
  .nying h2 {
    display: block;
  }
  .code-wall h2 {
    display: none;
  }
  footer {
    display: none;
  }
  .hello {
    flex-direction: column-reverse;
    margin-top: 20vh;
    justify-content: center;
    gap: 6vh !important;
  }
  .hello .text {
    max-width: 80vw !important;
  }
  .hello .text h2 {
    font-size: 8vh !important;
    height: 12vh;
  }
  .projects h2,
  .certificates h2 {
    font-size: 6vh;
  }
  .carousel {
    flex-direction: column;
    gap: 4vh !important;
  }
  .carousel .field {
    width: 80vw;
  }
  .carousel .field .image {
    height: 30vh !important;
  }
  footer h2,
  footer h3 {
    font-size: 6vh;
  }
  .face h1 {
    font-size: 14vh !important;
  }
  .face h1 span {
    display: none;
  }
  .face .headline {
    margin-top: 4vh;
    flex-direction: column;
    align-items: center;
  }
  .face .headline .II {
    display: none;
  }
  .profile-pict {
    height: 56vh;
  }
  .my-head {
    height: 30vh;
    width: 38vh;
  }
  .universe {
    top: 16vh;
  }
  .code-wall h2 {
    font-size: 6vh;
  }
  .universe img {
    height: 8vh;
  }
  .profile-pict {
    height: 52vh;
  }
  .ongsa,
  .sun,
  .aylin,
  .luna {
    height: 62vh;
  }
  #rain {
    display: none;
  }
  .music {
    flex-direction: column;
  }
  .code-project,
  .crtfct-bc {
    flex-direction: column;
  }
  .certificates img {
    max-width: 60vw;
  }
  .description .time {
    flex-direction: column;
    align-items: flex-start;
    gap: 2vh;
  }
  .certificates {
    max-width: 80vw;
  }
  .code-project .screenshot-a,
  .code-project .screenshot-c,
  .code-project .screenshot-t,
  .code-project .screenshot-nk,
  .code-project .screenshot-p,
  .code-project .screenshot-n,
  .code-project iframe {
    min-width: 80vw;
    max-width: 80vw;
    height: 44vw;
  }
  .certificates .description h3,
  .codes .description h3 {
    font-size: 4vh;
  }
  .codes .description,
  .certificates .description {
    width: 80vw;
    margin-top: 4vh;
  }
}

@media (max-aspect-ratio: 3/2) {
  .face h1 {
    font-size: 12vh;
  }
  .hello {
    max-width: 90vw;
    gap: 10vw;
  }
  .hello .text {
    max-width: 36vw;
  }
  .hello .text h2 {
    font-size: 8vh;
    min-width: max-content;
  }
  .hello img {
    max-width: 70vw !important;
  }
  .carousel {
    width: 90vw;
    gap: 2vh;
  }
  .carousel .field .image {
    height: 44vh;
  }
  .carousel .field .name {
    padding: 2vh 4vh;
  }
  .carousel .field .name h3 {
    font-size: 4vh;
  }
  .carousel .field .name i {
    font-size: 6vh;
  }
}