src.6c83a6a7.css.map

{"version":3,"sources":["src/styles.css"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"src.6c83a6a7.css","sourceRoot":"..","sourcesContent":["body {\n  font-family: 'DM Sans', sans-serif;\n  overflow-x: hidden;\n  margin: 0;\n  padding: 0;\n  overscroll-behavior: none;\n  overflow-y: hidden;\n}\n\n*{\n  box-sizing: border-box;\n}\n\n.loader{\n  background: black;\n  color: white;\n  position: absolute;\n  width: 100%;\n  height: 100vh;\n  display: flex;\n  justify-content: center;\n  align-content: center;\n  align-items: center;\n  z-index: 100;\n}\n\n.loader .loadcontent{\n  display: block;\n  padding: 10px;\n  text-align: center;\n  align-items: center;\n  justify-content: center;\n}\n.progress{\n  position: absolute;\n  top: 63%;\n  height: 4px;\n  width: 100%;\n  transform: scaleX(0);\n  background-color:  hsl(277, 94%, 28%);\n  transition: all 1s ease;\n}\n\n.nav--bar{\n  position: absolute;\n  display: flex;\n  align-content: space-between;\n  width: 100%;\n  justify-content: space-between;\n  margin-top: 30px;\n}\n\n.logo{\n  margin-left: 40px;\n}\n\n.section{\n  display: flex;\n  width: 100vw;\n  height: 100vh;\n  align-items: center;\n}\n\n.section--one--container{\n  width: 360px;\n  margin-left: 15%;\n}\n\n.first h1{\n  font-size: 10rem;\n  line-height: 8rem;\n  letter-spacing: -0.3rem;\n  width: 50%;\n  margin: 0 0 30px -10px;\n}\n\n.button--hero{\n  background: #F2CE6E;\n  color: black;\n  border: none;\n  font-weight: 600;\n  border-radius: 50px;\n  padding: 15px 30px;\n  margin-top: 24px;\n  margin-right: 40px;\n  font-size: 0.6rem;\n  cursor: pointer;\n  transition: all 0.8s ease;\n}\n\n.button--customize{\n  background: #F2CE6E;\n  color: black;\n  border: none;\n  font-weight: 600;\n  border-radius: 50px;\n  padding: 15px 30px;\n  margin-top: 24px;\n  margin-right: 40px;\n  font-size: 0.6rem;\n  cursor: pointer;\n  transition: all 0.8s ease;\n}\n.button--hero:hover{\n  background: black;\n  color: white;\n}\n\n.button--navbar{\n  background: black;\n  color: white;\n  border: none;\n  border-radius: 50px;\n  padding: 10px 30px;\n  margin-right: 40px;\n  font-size: 0.6rem;\n}\n\n.second{\n  justify-content: flex-end;\n  position: relative;\n}\n\n.section--two--container{\n  width: 360px;\n  margin-right: 10%;\n  z-index: 1;\n}\n\n.section--third--container{\n  width: 360px;\n  margin-left: 10%;\n  z-index: 1;\n}\n\nh2{\n  font-size: 3rem;\n  letter-spacing: -2px;\n  line-height: 2.5rem;\n}\n\n.custom--bg{\n  width: 100%;\n  height: 800px;\n  background: #F2CE6E;\n  -webkit-transform: skew(20deg);\n  -moz-transform: skew(20deg);\n  -o-transform: skew(20deg);\n  transform: skew(20deg) rotate(21deg);\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n\nfooter{\n  background: black;\n  padding: 70px;\n  display: flex;\n  justify-content: center;\n}\n\n.button--footer{\n  background: white;\n  color: black;\n  border: none;\n  border-radius: 50px;\n  padding: 10px 30px;\n  font-size: 0.6rem;\n  cursor: pointer;\n  transition: all 0.8s ease;\n}\n\n.button--footer:hover{\n  background: black;\n  color: white;\n}\n\n#webgi-canvas {\n  width: 100%;\n  height: 100%;\n  position: fixed;\n  top: 0;\n}\n\n#webgi-canvas-container{\n  width: 100vw;\n  height: 100vh;\n  pointer-events: none;\n  position: fixed;\n  display: flex;\n  justify-content: flex-end;\n  flex-direction: column;\n  align-items: center;\n}\n\n.button--exit{\n  width: 90px;\n  margin-bottom: 5%;\n  z-index: 5;\n  position: fixed;\n  bottom: 0;\n  display: none;\n}\n\n.customizer--container{\n  position: fixed;\n  top: 50%;\n  display: none;\n  transform: translateY(-50%);\n}\n\n.strap--colors{\n  list-style: none;\n}\n\n.button--colors{\n  width: 30px;\n  height: 30px;\n  border-radius: 50px;\n  border: 1px solid white;\n  padding: 0;\n  margin-bottom: 10px;\n  cursor: pointer;\n  transition: all 0.8s ease;\n}\n\n.button--colors:hover{\n  filter: drop-shadow(0 0 0.75rem rgba(28, 17, 52, 0.704));\n  transform: scale(1.5);\n}\n\n.yellow{\n  background-color: #F0D56C;\n}\n\n.red{\n  background-color: rgb(231, 34, 34);\n}\n\n.black{\n  background-color: rgb(74, 76, 79);\n}\n\n/* MOBILE ADJUSTMENTS */\n\n@media (max-width: 600px) {\n\n\n  html, body, .container, nav{\n    overflow-x: hidden;\n  }\n\n  .first h1{\n    font-size: 4rem;\n    line-height: 4rem;\n    letter-spacing: -0.1rem;\n    width: 50%;\n    margin: 0 0 15px 0px;\n  }\n\n  .nav--bar{\n    margin-top: 0;\n    z-index: 1;\n    background: #ffffffad;\n    padding: 30px 0;\n    backdrop-filter: blur(5px);\n  }\n  \n  .section--one--container {\n    width: 360px;\n    margin-left: 6%;\n    margin-top: 40%;\n  }\n\n  .section--one--container > p {\n    width: 70%;\n  }\n\n  .second{\n    align-items: flex-end;\n  }\n  \n  .section--third--container {\n    width: 220px;\n    margin-left: 7%;\n  }\n}\n"]}