:root {
  --color-red: #ec1840;
  --color-purple: #7a18ec;
  --color-white: #fff;
  --color-black-1: #111;
  --color-black-2: #222;
  --color-black-3: #444;
  --speed-normal: 0.5s;
  --speed-fast: 0.8s;
}



body,
html {
  margin: 0;
  overscroll-behavior: none;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

@font-face {
  font-family: NB Akademie Mono Std;
  src: url(fonts/NB-Akademie-Mono-Std-Medium.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Soehne-Leicht;
  src: url(fonts/Soehne-Leicht.woff2) format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Sohne-Halbfett;
  src: url(/dist/fonts/Sohne-Halbfett_3377fbca.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Soehne-Mono-Extraleicht;
  src: url(/dist/fonts/Soehne-Mono-Extraleicht.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  background-color: #1B1B1B;
  transition: all .5s cubic-bezier(0.19, 1, 0.22, 1);
  height: 100vh;
  width: 100vw;
  cursor: none;
  margin: 0;

}

.header {

  width: 100vw;

  height: 3vh;
  display: flex;
  position: fixed;
  text-align: center;
  align-items: center;
  margin-top: 1vh;
  z-index: 9999;
  opacity: 0;
  text-align: center;
  color: #C8C8C8;

}

.header a {
  padding: 1vw;
  font-size: .7vw;
  font-family: NB Akademie Mono Std;
  text-transform: uppercase;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.05vw;
}

.main-container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.link-container {
  display: flex;
  flex-direction: row;
  position: absolute;
  width: 100vw;
  top: 48vh;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.links {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: 6vw;
  margin-right: 6vw;
  position: relative;
}

.link-wrap {
  position: relative;
}

.open-about {
  position: relative;
  display: block;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.open-about img {
  max-width: 5vw;
  height: auto;
}

.project-link {
  top: 20vh;
  font-size: 1vw;
}

.home-desc {
  position: fixed;
  width: 10vw;
  top: 89vh;
  text-align: center;
  color: #C8C8C8;
  font-family: NB Akademie Mono Std;
  font-size: .6vw;
  font-weight: 300;
  text-transform: uppercase;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.05vw;
  line-height: 1.7vh;
}

a {
  text-align: center;
  font-size: 1.3vw;
  font-family: NB Akademie Mono Std;
  text-transform: uppercase;
  color: #C8C8C8;
  text-decoration: none;
  cursor: none;
  transition: all .3s ease-in-out;
}

a img {
  width: 100px;
  transition: all .5s ease-in-out;
}

#small {
  font-size: .9vw;
  top: 10vh;
}

#small img {
  max-width: 3vw;
  height: auto;
}

#mid {
  top: 2vh;
  font-size: 1.2vw;
}

#mid img {
  max-width: 3.5vw;
  height: auto;
}



a:hover {
  scale: 1.09;
  color: #ec1840;
}


a img:hover {
  scale: 1.09;
}

#container {
  /* Center the text in the viewport. */
  position: absolute;
  top: 7vh;
  left: 0;
  justify-content: center;
  align-items: center;
  text-align: center;
  -webkit-font-smoothing: antialiased;

}

#text1,
#text2 {
  position: absolute;
  width: 100vw;
  font-weight: 500;
  white-space: nowrap;
  text-transform: uppercase;
  color: #ec1840;
  font-family: NB Akademie Mono Std;
  font-size: 15vw;
  padding: 0;
  text-align: center;
  justify-content: center;
  align-items: center;
  -webkit-font-smoothing: antialiased;

}



section {
  width: 100vw;
  height: 100vh;
  display: flex;
  opacity: 0;
  flex-direction: column;
  border-width: 1vw;

}

section .bg {
  width: 100vw;
  height: 100vh;
  position: absolute;
  background-size: cover;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: -1;
  border-radius: 5vmin;
  filter: blur(50px);
  -webkit-filter: blur(50px);
}

.bg video {
  max-width: 100vw;
  height: 100vh;
  opacity: .7;
}

.dot {
  position: fixed;
  width: 8em;
  height: 8rem;
  fill: yellow;
  top: -4em;
  left: -4em;
  opacity: 0;
  transform: scale(0);
  transform-origin: 50% 50%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
  z-index: 99999999;
  mix-blend-mode: difference;
}

canvas {
  display: flex;
  position: absolute;
  opacity: 1;
  z-index: 1;
  pointer-events: none;
}

.aboutme {
  display: flex;
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 100vh;
  z-index: 9999999999;
  opacity: 0;
  border-radius: 5vmin;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.about-content {
  display: flex;
  flex-direction: row;
  position: relative;
  width: 100vw;
  height: auto;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 5%;
  z-index: 99999999;
}

.about-content p span {
  position: relative;
  font-weight: 500;
  white-space: nowrap;
  text-transform: uppercase;
  color: #C8C8C8;
  font-family: NB Akademie Mono Std;
  font-size: 1vw;
  padding: 2vw;
  text-align: center;
  justify-content: center;
  align-items: center;
  -webkit-font-smoothing: antialiased;
  z-index: 9999;
}

.about-content p {
  width: 30%;
  position: relative;
  font-weight: 500;
  text-transform: uppercase;
  color: #C8C8C8;
  font-family: NB Akademie Mono Std;
  font-size: .7vw;
  padding: 2vmin;
  text-align: center;
  justify-content: center;
  align-items: center;
  -webkit-font-smoothing: antialiased;
  z-index: 9999;
  line-height: 2.5vmin;
}

.about-content img {
  object-fit: cover;
  z-index: 99999;
  border-radius: 100%;
  width: 25vw;
  height: auto;
}



.close-about {
  display: flex;
  position: relative;
  /* top: 0;
  left: 10%; */

}

.close-about a {
  font-size: 1.2vw;
  color: #C8C8C8;
}


.portfolio-section {
  width: 100vw;
  height: 100vh;
  display: none;
  position: absolute;
  top: 100vh;
  opacity: 0;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
}

li a {
  text-decoration: none;
  display: block;
  color: #C8C8C8;
}

li span {
  display: flex;
  position: relative;
}

ul {
  list-style: none;
  letter-spacing: 0.09vw;
}

.portfolio {
  color: #C8C8C8;
  font-size: 1vw;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: left;
  text-align: center;
  display: flex;
  padding-left: 10vw;
}

.portfolio__list-works {
  font-weight: 300;
  display: flex;
  flex-direction: column;
  align-items: start;
}

.portfolio__list-item {
  position: relative;
  margin-top: 2vh;
}

.portfolio__list-item::before,
.title-work,
.subtitle-work {
  pointer-events: none;
}

.portfolio__list-item::before {
  content: attr(data-number);
  position: absolute;
  top: calc(50% - 0.6rem / 2);
  left: -2vw;
  font-size: 0.6vw;
}

.title-work,
.subtitle-work {
  opacity: 1;
}

.title-work,
.subtitle-work,
.portfolio__list-item::before {
  transition-duration: 0.5s;
  transition-property: transform, opacity;
}

.title-work {
  font-weight: 500;
  font-size: 2vw;
}

.subtitle-work {
  margin-top: 0.5vh;
  font-size: 1vw;
  transition-delay: 0.15s;
}

.portfolio__list-item:hover .title-work,
.portfolio__list-item:hover .subtitle-work {
  opacity: 1;
  transform: translatex(10px);
}

.portfolio__list-item:hover::before {
  opacity: 0;
  transform: translatex(20px);
}

#micro,
#archi,
#geo,
#gen,
#threeD,
#AI,
#sound {
  position: absolute;
  width: 60vw;
  max-height: 90vh;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: transparent;
  overflow-x: scroll;
  left: 100vw;
  opacity: 0;
}

#main {
  position: relative;
  width: 10vw;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #22222280;
  left: 25vw;
  font-family: NB Akademie Mono Std;
  color: #C8C8C8;
  border-radius: 2vw;
  letter-spacing: -.05vw;
  text-transform: uppercase;
}





.portfolio-content {
  font-family: NB Akademie Mono Std;
  color: #C8C8C8;
  border-radius: 2vw;
  letter-spacing: -.05vw;
  text-transform: uppercase;
}

.portfolio-content img {
  width: 40vw;
  height: 50%;
  border-radius: 1vmin;
  z-index: -1;
  opacity: .9;
  object-fit: cover;
}



.portfolio-content p {
  font-size: .7vw;
  line-height: 1.8vh;
  width: 50%;
  padding: 5vmin;
  border-radius: 5px;
  position: fixed;
  background-color: #1b1b1b87;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.portfolio-content p span {
  font-size: 1.3vw;
}



.portfolio-description {
  justify-content: center;
  align-items: center;
  text-align: top;
  max-width: 50vw;
  gap: 1vh;
  display: flex;
  flex-direction: column;
}


.closemusic {
  position: relative;
  top: 0;
  left: 0;
}