@font-face {
  font-family: "Montserrat";
  src: url("/font/Montserrat/Montserrat-VariableFont_wght.ttf") format("truetype");
  font-stretch: normal;
  font-style: normal;
  font-weight: 100 900;
}
/*
@font-face {
	font-family: "Montserrat";
	src: url('/font/Montserrat/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
	font-stretch: normal;
	font-style: italic;
	font-weight: 100 900;
}
*/
@font-face {
  font-family: "Rubik";
  src: url("/font/Rubik/Rubik-VariableFont_wght.ttf") format("truetype");
  font-stretch: normal;
  font-style: normal;
  font-weight: 100 900;
}
@font-face {
  font-family: "Rubik";
  src: url("/font/Rubik/Rubik-Italic-VariableFont_wght.ttf") format("truetype");
  font-stretch: normal;
  font-style: italic;
  font-weight: 100 900;
}
.flex-100vh {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.cubeSide,
.cubeFloor {
  bottom: -0.875rem;
  left: -0.875rem;
  pointer-events: none;
  position: absolute;
  transform-origin: 0% 100%;
}
@media screen and (max-width: 660px) {
  .cubeSide,
.cubeFloor {
    display: none;
  }
}

.cubeSide {
  background-color: #8b0e9a;
  height: 100%;
  transform: skew(0, -45deg);
  width: 0.875rem;
}

.cubeFloor {
  background-color: #55095e;
  height: 0.875rem;
  transform: skew(-45deg, 0);
  width: 100%;
}

body {
  background-color: #231b26;
}

body.index header,
body.index footer {
  position: fixed;
}
@media screen and (max-width: 660px) {
  body.index header,
body.index footer {
    background-color: #000;
    position: relative;
  }
}
body.index footer {
  bottom: 0;
}
@media screen and (max-width: 660px) {
  body.index main.fullScreen {
    background-color: #000;
    justify-content: center;
    display: flex;
    flex-direction: column;
    max-height: calc(100svh - 7rem);
    min-height: calc(100svh - 7rem);
  }
}
body.index video.fullScreenVideo {
  height: 100vh;
  left: 0;
  object-fit: cover;
  object-position: 50% 50%;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: -1;
}
@media screen and (max-width: 660px) {
  body.index video.fullScreenVideo {
    flex: 0 0 auto;
    height: 100vw;
    position: relative;
    z-index: 1;
  }
}
body.index .statement {
  backdrop-filter: blur(16px);
  background-color: rgba(0, 0, 0, 0.8);
  display: inline-block;
  left: 50%;
  padding: 2rem 3rem;
  position: fixed;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
}
body.index .statement .statementText {
  font-family: Montserrat, sans-serif;
  letter-spacing: 0.01em;
  color: #fdf8ff;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 2em;
}
body.index .statement .statementText .highlight {
  font-weight: 700;
  word-spacing: 0.1em;
}
@media screen and (max-width: 660px) {
  body.index .statement {
    align-items: center;
    background-color: #000;
    display: block;
    left: 0;
    position: relative;
    transform: none;
    width: 100vw;
  }
  body.index .statement .statementText {
    color: #fdf8ff;
  }
}