@font-face {
  font-family: "Audiowide";
  src: url("../fonts/Audiowide-Regular.woff2?v=1") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("../fonts/Sora-Thin.woff2?v=1") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("../fonts/Sora-ExtraLight.woff2?v=1") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("../fonts/Sora-Light.woff2?v=1") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("../fonts/Sora-Regular.woff2?v=1") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("../fonts/Sora-Medium.woff2?v=1") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("../fonts/Sora-SemiBold.woff2?v=1") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("../fonts/Sora-Bold.woff2?v=1") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("../fonts/Sora-ExtraBold.woff2?v=1") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
h1, h2, p, p a, p strong {
  color: white;
  font-family: "Sora", sans-serif;
  height: fit-content;
}

h1, h2 {
  font-weight: 600;
}

h2 {
  font-size: calc(0.25rem + 2dvw);
}

p {
  text-align: justify;
}

p, p a, p strong {
  font-size: calc(0.5rem + 0.6dvw);
}

p a, p strong {
  font-weight: 600;
}

p a {
  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.25, 1);
}
p a:hover {
  color: #87B2CC !important;
}

#titleStart {
  width: 100dvw;
  height: fit-content;
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 75px;
  padding: 150px;
}
#titleStart h1 {
  font-size: calc(1.5rem + 5dvw);
}
#titleStart div.start3D {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  column-gap: 1.5rem;
  row-gap: 1rem;
}
#titleStart div.start3D .h2 {
  grid-column: 1/2;
  grid-row: 1/2;
}
#titleStart div.start3D p.first {
  grid-column: 1/2;
  grid-row: 2/3;
}
#titleStart div.start3D p.second {
  grid-column: 1/2;
  grid-row: 3/4;
}
#titleStart div.start3D .videoClassic {
  grid-column: 2/3;
  grid-row: 1/4;
}

#uni3D {
  width: 100dvw;
  height: fit-content;
  padding: 0 250px;
  display: grid;
  grid-template-rows: auto 1fr;
  row-gap: 75px;
  background-image: url("../../img/round-bg-start-pc.svg?v=1");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#uni3D * {
  z-index: 1;
}
#uni3D h2 {
  justify-self: center;
}

#cyberpunk {
  width: 100dvw;
  min-height: 100dvh;
  padding: 100px 200px;
  background-image: url("../../img/round-bg-end-75-pc.svg?v=1");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
}
#cyberpunk * {
  z-index: 1;
}
#cyberpunk::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  transform: translateY(-5px);
  background-color: #232A60;
  z-index: 0;
}
#cyberpunk::after {
  content: "";
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translate(-50%, 75%);
  max-width: 35dvw;
  width: 100%;
  height: auto;
  background-image: url("../../img/full-logo.svg?v=1");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  aspect-ratio: 8419/8018;
  z-index: 0;
}
#cyberpunk .cyberpunkDiv {
  max-height: 100%;
  max-width: 100%;
  display: grid;
  grid-template-rows: repeat(4, auto);
  grid-template-columns: 2fr 1fr;
  column-gap: 2.5rem;
  row-gap: 2rem;
}
#cyberpunk .cyberpunkDiv h2, #cyberpunk .cyberpunkDiv .first, #cyberpunk .cyberpunkDiv .second, #cyberpunk .cyberpunkDiv .shortImg {
  width: 100%;
  height: fit-content;
}
#cyberpunk .cyberpunkDiv h2 {
  grid-row: 1/2;
}
#cyberpunk .cyberpunkDiv .first {
  grid-row: 2/3;
}
#cyberpunk .cyberpunkDiv .second {
  grid-row: 3/4;
}
#cyberpunk .cyberpunkDiv .shortImg {
  grid-row: 4/5;
  mask-image: url("../../img/mask-short-img-3d.svg?v=1");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("../../img/mask-short-img-3d.svg?v=1");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  position: relative;
}
#cyberpunk .cyberpunkDiv .shortImg svg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
}
#cyberpunk .cyberpunkDiv .shortImg img {
  width: 100%;
  height: 100%;
  z-index: 0;
}
#cyberpunk .cyberpunkDiv .longImg {
  grid-row: 1/5;
  grid-column: 2/3;
  aspect-ratio: 750/1333;
  max-width: 100%;
  max-height: 100%;
  position: relative;
  mask-image: url("../../img/mask-long-img-3d.svg?v=1");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("../../img/mask-long-img-3d.svg?v=1");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}
#cyberpunk .cyberpunkDiv .longImg svg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
}
#cyberpunk .cyberpunkDiv .longImg img {
  width: 100%;
  height: 100%;
  z-index: 0;
}

@media screen and (max-width: 1280px) {
  #titleStart {
    padding: 150px 75px 75px 75px;
  }
  #titleStart div.start3D p.second {
    grid-column: 1/3;
    grid-row: 3/4;
  }
  #titleStart div.start3D .videoClassic {
    grid-column: 2/3;
    grid-row: 1/3;
  }
  #uni3D {
    padding: 0 125px;
  }
  #cyberpunk {
    padding: 150px 100px;
  }
  #cyberpunk::after {
    max-width: 50dvw;
  }
}
@media screen and (max-width: 1100px) {
  #cyberpunk {
    padding: 75px 100px;
  }
}
@media screen and (max-width: 768px) {
  #titleStart {
    padding: 125px 25px 50px 25px;
  }
  #titleStart div.start3D {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, auto);
  }
  #titleStart div.start3D p.second {
    grid-column: 1/2;
    grid-row: 4/5;
  }
  #titleStart div.start3D .videoClassic {
    grid-column: 1/2;
    grid-row: 3/4;
  }
  #uni3D {
    min-height: 50dvh;
    padding: 25px;
    row-gap: 37.5px;
  }
  #cyberpunk {
    padding: 25px;
    min-height: fit-content;
  }
  #cyberpunk::after {
    max-width: 65dvw;
  }
  #cyberpunk .cyberpunkDiv {
    column-gap: 1.5rem;
    row-gap: 1rem;
  }
  #cyberpunk .cyberpunkDiv .longImg {
    grid-row: 1/4;
  }
  #cyberpunk .cyberpunkDiv .shortImg {
    grid-column: 1/3;
  }
}
@media screen and (max-width: 425px) {
  #uni3D {
    min-height: 30dvh;
  }
  #cyberpunk {
    padding: 25px;
    min-height: fit-content;
  }
  #cyberpunk .cyberpunkDiv .longImg {
    grid-row: 1/3;
  }
  #cyberpunk .cyberpunkDiv .second {
    grid-column: 1/3;
  }
}
@media screen and (max-width: 300px) {
  #cyberpunk::after {
    transform: translate(-50%, 100%);
  }
}

/*# sourceMappingURL=projects-3D.css.map */