/* GLOBAL ----------------------------------------------------------------------------------- */
:root {
  scroll-behavior: smooth;
  --black: #050505;
  --white: #fafafa;
}

@font-face {
  font-family: "PlayfairDisplay-Regular";
  src: url(../fonts/ttf/PlayfairDisplay-Regular.ttf) format("truetype"), url(../fonts/woff2/PlayfairDisplay-Regular.woff2) format("woff2"), url(../fonts/woff/PlayfairDisplay-Regular.woff) format("woff");
}
@font-face {
  font-family: "PlayfairDisplay-SemiBold";
  src: url(../fonts/ttf/PlayfairDisplay-SemiBold.ttf) format("truetype"), url(../fonts/woff2/PlayfairDisplay-SemiBold.woff2) format("woff2"), url(../fonts/woff/PlayfairDisplay-SemiBold.woff) format("woff");
}
@font-face {
  font-family: "PlayfairDisplay-ExtraBold";
  src: url(../fonts/ttf/PlayfairDisplay-ExtraBold.ttf) format("truetype"), url(../fonts/woff2/PlayfairDisplay-ExtraBold.woff2) format("woff2"), url(../fonts/woff/PlayfairDisplay-ExtraBold.woff) format("woff");
}
@font-face {
  font-family: "PlayfairDisplay-Italic";
  src: url(../fonts/ttf/PlayfairDisplay-Italic.ttf) format("truetype"), url(../fonts/woff2/PlayfairDisplay-Italic.woff2) format("woff2"), url(../fonts/woff/PlayfairDisplay-Italic.woff) format("woff");
}
* {
  margin: 0px; /* Default margins */
  padding: 0px; /* Default padding */
  text-decoration: none;
  color: var(--black);
}

body {
  height: 100%; /* Force footer to end of page */
  display: flex; /* Force footer to end of page */
  flex-direction: column; /* Force footer to end of page */
  background-color: var(--white);
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

main {
  flex: 1 0 auto; /* Force footer to end of page */
}

/* Text */
p {
  font-family: "PlayfairDisplay-Regular", sans-serif;
  font-size: 2.25rem;
  line-height: normal;
  letter-spacing: 0.05rem;
  color: var(--black);
}

/* Links */
a {
  font-family: "PlayfairDisplay-Italic", sans-serif;
  font-size: 1.25rem;
  line-height: normal;
  letter-spacing: 0.05rem;
  color: var(--black);
}

/* Page Title */
h1 {
  font-family: "PlayfairDisplay-SemiBold", sans-serif;
  font-size: 6.875rem;
  line-height: 110%;
  letter-spacing: 0rem;
  color: var(--black);
}

/* Text Title */
h2 {
  font-family: "PlayfairDisplay-ExtraBold", sans-serif;
  font-size: 2.25rem;
  line-height: normal;
  letter-spacing: 0.05rem;
  color: var(--black);
}

/* 3D STUFF ----------------------------------------------------------------------------------------------------------- */
/* CSS CUSTOM PROPERTIES ---------------------------------------------------------------------------------------------- */
:root {
  --scenePerspective: 2;
  --scenePerspectiveOriginX: 50;
  --scenePerspectiveOriginY: 25;
  --itemZ: 8; /* Gap between each element */
  --cameraSpeed: 150; /* Where 1 is the fastest, this var is a multiplying factor of --scenePerspective and --filmZ */
  --cameraZ: 0; /* Initial camera position  */
  --viewportHeight: 0; /* Viewport height will allow us to set the depth of our scene  */
}

/* SET 3D SCENE ------------------------------------------------------------------------------------------------------- */
.viewport {
  height: calc(var(--viewportHeight) * 1px);
}

.viewport .scene3D-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  perspective: calc(var(--scenePerspective) * var(--cameraSpeed) * 1px);
  perspective-origin: calc(var(--scenePerspectiveOriginX) * 1%) calc(var(--scenePerspectiveOriginY) * 1%);
  will-change: perspective-origin;
  transform: translate3d(0, 0, 0); /* Allows Hardware-Accelerated CSS = transitions are smoother  */
}

.viewport .scene3D-container .scene3D {
  position: absolute;
  top: 0;
  height: 100vh;
  width: 100%;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--cameraZ) * 1px));
  will-change: transform;
}

.viewport .scene3D-container .scene3D > .element {
  position: absolute;
  display: block;
  width: 1700px;
  top: 0;
}
.viewport .scene3D-container .scene3D > .element:nth-child(0) {
  transform: translate3D(0, 0, calc(var(--itemZ) * var(--cameraSpeed) * 0 * -1px));
}
.viewport .scene3D-container .scene3D > .element:nth-child(1) {
  transform: translate3D(0, 0, calc(var(--itemZ) * var(--cameraSpeed) * 1 * -1px));
}
.viewport .scene3D-container .scene3D > .element:nth-child(2) {
  transform: translate3D(0, 0, calc(var(--itemZ) * var(--cameraSpeed) * 2 * -1px));
}
.viewport .scene3D-container .scene3D > .element:nth-child(3) {
  transform: translate3D(0, 0, calc(var(--itemZ) * var(--cameraSpeed) * 3 * -1px));
}
.viewport .scene3D-container .scene3D > .element:nth-child(4) {
  transform: translate3D(0, 0, calc(var(--itemZ) * var(--cameraSpeed) * 4 * -1px));
}
.viewport .scene3D-container .scene3D > .element:nth-child(5) {
  transform: translate3D(0, 0, calc(var(--itemZ) * var(--cameraSpeed) * 5 * -1px));
}
.viewport .scene3D-container .scene3D > .element:nth-child(6) {
  transform: translate3D(0, 0, calc(var(--itemZ) * var(--cameraSpeed) * 6 * -1px));
}
.viewport .scene3D-container .scene3D > .element:nth-child(7) {
  transform: translate3D(0, 0, calc(var(--itemZ) * var(--cameraSpeed) * 7 * -1px));
}
.viewport .scene3D-container .scene3D > .element:nth-child(8) {
  transform: translate3D(0, 0, calc(var(--itemZ) * var(--cameraSpeed) * 8 * -1px));
}
.viewport .scene3D-container .scene3D > .element:nth-child(9) {
  transform: translate3D(0, 0, calc(var(--itemZ) * var(--cameraSpeed) * 9 * -1px));
}
.viewport .scene3D-container .scene3D > .element:nth-child(10) {
  transform: translate3D(0, 0, calc(var(--itemZ) * var(--cameraSpeed) * 10 * -1px));
}
.viewport .scene3D-container .scene3D > .element:nth-child(11) {
  transform: translate3D(0, 0, calc(var(--itemZ) * var(--cameraSpeed) * 11 * -1px));
}
.viewport .scene3D-container .scene3D > .element:nth-child(12) {
  transform: translate3D(0, 0, calc(var(--itemZ) * var(--cameraSpeed) * 12 * -1px));
}
.viewport .scene3D-container .scene3D > .element:nth-child(13) {
  transform: translate3D(0, 0, calc(var(--itemZ) * var(--cameraSpeed) * 13 * -1px));
}
.viewport .scene3D-container .scene3D > .element:nth-child(14) {
  transform: translate3D(0, 0, calc(var(--itemZ) * var(--cameraSpeed) * 14 * -1px));
}
.viewport .scene3D-container .scene3D > .element:nth-child(15) {
  transform: translate3D(0, 0, calc(var(--itemZ) * var(--cameraSpeed) * 15 * -1px));
}
.viewport .scene3D-container .scene3D > .element:nth-child(16) {
  transform: translate3D(0, 0, calc(var(--itemZ) * var(--cameraSpeed) * 16 * -1px));
}
.viewport .scene3D-container .scene3D > .element:nth-child(17) {
  transform: translate3D(0, 0, calc(var(--itemZ) * var(--cameraSpeed) * 17 * -1px));
}
.viewport .scene3D-container .scene3D > .element:nth-child(18) {
  transform: translate3D(0, 0, calc(var(--itemZ) * var(--cameraSpeed) * 18 * -1px));
}
.viewport .scene3D-container .scene3D > .element:nth-child(19) {
  transform: translate3D(0, 0, calc(var(--itemZ) * var(--cameraSpeed) * 19 * -1px));
}
.viewport .scene3D-container .scene3D > .element:nth-child(20) {
  transform: translate3D(0, 0, calc(var(--itemZ) * var(--cameraSpeed) * 20 * -1px));
}

/* STYLING ------------------------------------------------------------------------------------------------------------ */
/* INTRO -------------------------------------------------------------------------------------------------------------- */
.intro {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100%;
  background-color: var(--white);
  transition: 1s;
}

.intro_title {
  position: absolute;
  width: 90vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -80%);
  text-align: center;
}

#intro_button {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 10%);
  cursor: pointer;
}

/* INDEX -------------------------------------------------------------------------------------------------------------- */
.photo {
  width: 800px;
  height: auto;
  left: 0;
  pointer-events: none;
}

.text {
  position: absolute;
  top: 0;
  right: 0;
  width: 800px;
  height: auto;
}

.text_title {
  text-align: left;
}

.text_right {
  text-align: right;
}

.text_left {
  text-align: left;
}

.text_middle {
  text-align: center;
}

footer {
  position: sticky;
  display: flex;
  bottom: 0;
  width: 100%;
  height: 75px;
  justify-content: space-between;
}

footer a {
  margin: 0px 75px;
}

/* IMPRESSUM ---------------------------------------------------------------------------------------------------------- */
#impressum_grid {
  margin: 8vw 10vw 8vw 10vw;
  display: grid;
  grid-template-columns: 36vw 8vw 36vw;
  grid-template-rows: auto;
  grid-template-areas: "title_left margin title_right" "text_left margin text_right";
}

#impressum_title_left {
  margin-bottom: 80px;
  grid-area: title_left;
}

#impressum_title_right {
  margin-bottom: 80px;
  grid-area: title_right;
  display: flex;
  align-items: flex-end;
}

#impressum_text_left {
  grid-area: text_left;
}

#impressum_text_right {
  grid-area: text_right;
}

#impressum_margin {
  grid-area: margin;
}

.impressum a {
  font-family: "PlayfairDisplay-Regular", sans-serif;
  font-size: 2rem;
  line-height: normal;
  letter-spacing: 0.0175rem;
  color: var(--black);
}

/* PROJECT ------------------------------------------------------------------------------------------------------------ */
#project_grid {
  margin: 8vw 10vw 8vw 10vw;
  display: grid;
  grid-template-columns: 36vw 8vw 36vw;
  grid-template-rows: auto;
  grid-template-areas: "title margin text";
}

#project_title {
  grid-area: title;
}

#project_text {
  grid-area: text;
}

#project_margin {
  grid-area: margin;
}

/* MEDIA QUERIES ------------------------------------------------------------------------------------------------------ */
/* Content for desktop devices */
.desktop {
  display: block;
}

.mobile {
  display: none;
}

/* Content for mobile devices */
@media (max-width: 900px) {
  .desktop {
    display: none;
  }
  .mobile {
    display: block;
  }
  .mobile_text {
    width: 50vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
}/*# sourceMappingURL=style.css.map */