/*!****************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/styles/index.scss ***!
  \****************************************************************************************************************/
@font-face {
  font-family: sans;
  src: url(static/fonts/7bc6f223376bac04e707.ttf);
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: sans;
  src: url(static/fonts/f941f349258fd4b62582.ttf);
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: sans;
  src: url(static/fonts/279d27b203c287cb2e9c.ttf);
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: sans;
  src: url(static/fonts/84d061636b9c2d841b19.ttf);
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: sans;
  src: url(static/fonts/f0691fb54e7d6488f1fd.ttf);
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: sans;
  src: url(static/fonts/39ec72d91c2b4749ba51.ttf);
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: sans;
  src: url(static/fonts/fc1f71205baa414f90b9.ttf);
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: mono;
  src: url(static/fonts/b5da9bfb47c19d82b942.ttf);
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: mono;
  src: url(static/fonts/d1436580db84fe848c90.ttf);
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: mono;
  src: url(static/fonts/7faf19f9c1a5fe72c074.ttf);
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: mono;
  src: url(static/fonts/e919be5a41406ef1cab5.ttf);
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: mono;
  src: url(static/fonts/0d8b7bb8754f57624223.ttf);
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: mono;
  src: url(static/fonts/f13c957672c238b5f01c.ttf);
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: mono;
  src: url(static/fonts/4fff89277ad2bf80a73a.ttf);
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: milling;
  src: url(static/fonts/19a6664cda8f3de25750.otf);
  font-weight: 400;
}
.section {
  position: relative;
  height: 100vh;
  width: 100vw;
}

.sketch-container {
  position: relative;
  height: 100%;
  width: 100%;
}
.sketch-container canvas {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}

.ROKKA-container {
  position: relative;
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
}
.ROKKA-container .content-container {
  position: relative;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.5058823529);
  padding: 20px;
  border-top: solid 1px rgba(0, 0, 0, 0.1882352941);
  border-bottom: solid 1px rgba(0, 0, 0, 0.1882352941);
}
.ROKKA-container .side-container {
  position: relative;
}
.ROKKA-container .side-container .corner {
  height: 30px;
  width: 30px;
}
.ROKKA-container .side-container .corner svg .st1 {
  stroke: rgba(0, 0, 0, 0.1882352941);
}
.ROKKA-container .side-container .corner svg .st0 {
  fill: rgba(255, 255, 255, 0.5058823529);
}
.ROKKA-container .side-container .corner svg #corner {
  fill: rgba(0, 0, 0, 0.1882352941);
}
.ROKKA-container .side-container .filler {
  position: relative;
  height: calc(100% - 30px);
  width: 100%;
  background: rgba(255, 255, 255, 0.5058823529);
  border-left: solid 1px rgba(0, 0, 0, 0.1882352941);
  border-bottom: solid 1px rgba(0, 0, 0, 0.1882352941);
}
.ROKKA-container .side-container:last-child {
  transform: rotate(180deg);
}

.footer-container {
  position: relative;
  height: 100vh;
  width: 100vw;
  background: rgb(62, 53, 219);
}

@keyframes scroll-to-explore-animation {
  0% {
    transform: translateY(0%) rotate(90deg);
  }
  10% {
    transform: translateY(0%) rotate(90deg);
  }
  50% {
    transform: translateY(350%) rotate(90deg);
  }
  51% {
    transform: translateY(-350%) rotate(90deg);
  }
  90% {
    transform: translateY(0%) rotate(90deg);
  }
  100% {
    transform: translateY(0%) rotate(90deg);
  }
}
#menu {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 999;
  height: auto;
  width: auto;
}
#menu #menu-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 45px;
  font-family: sans;
  font-weight: 300;
  font-style: normal;
  font-size: 11pt;
  padding-left: 0px;
  padding-right: 0px;
}
#menu #menu-content .menu-item {
  white-space: nowrap;
}
#menu #menu-content #logotype {
  height: 40px;
  width: auto;
}

@media only screen and (max-width: 650px) {
  #container {
    width: 100% !important;
    overflow: hidden !important;
  }
  #intro-sketch-container {
    width: 100% !important;
  }
  #intro-sketch-container canvas {
    width: 100% !important;
  }
  #intro-section #intro-content-container #intro-header {
    font-size: 40pt !important;
  }
  #intro-section #intro-content-container #intro-paragraph {
    font-size: 11pt !important;
    width: 40ch !important;
  }
  #values-section-container {
    height: auto !important;
  }
  #values-section-container #values-content {
    width: 90% !important;
    height: auto;
  }
  #values-section-container #values-content #values-content-inner-container {
    width: 100%;
    flex-direction: column !important;
  }
  #values-section-container #values-content #values-content-inner-container #info-section {
    width: 100% !important;
    min-width: none !important;
    max-width: none !important;
    border: none !important;
  }
  #values-section-container #values-content #values-content-inner-container #value-section {
    padding: 30px !important;
  }
  #values-section-container #values-content #values-content-inner-container #value-section .value-paragraph {
    width: 100% !important;
  }
  .values-arrow {
    border: none !important;
    border-top: solid 1px rgba(0, 0, 0, 0.1882352941) !important;
    border-bottom: solid 1px rgba(0, 0, 0, 0.1882352941) !important;
  }
}
*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#container {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  font-family: sans;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

canvas {
  flex: 1;
}