@import url("https://fonts.googleapis.com/css2?family=Comfortaa&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
/*
 *                *** DO NOT MODIFY THIS FILE ***
 * This .css file is automatically generated by the Sass compiler
 * from .scss files. Any changes must be made in the correspondi-
 * ng .scss file, as they will be overwritten when this file is 
 * regenerated.
 */
:root {
  --main-bg: #ffffff;
  --alt-bg-1: #404040;
  --alt-bg-2: #808080;
  --main-text: #202020;
  --alt-text-1: #e0e0e0;
  --alt-text-2: #a0a0a0;
  --icon-color-1: #ffff00;
  --icon-color-2: #ffaa00;
  --icon-color-3: #ff5500;
  --icon-color-4: #ff0000;
  --main-font: "Comfortaa", Verdana, Arial, sans-serif;
  --text-font: Verdana, Arial, sans-serif;
}

html {
  height: 100vh;
}

body {
  margin: 0;
  color: var(--main-text);
  background: var(--main-bg);
  font-family: var(--main-font);
  overflow: hidden;
  overflow-y: auto;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

a {
  padding: 0;
  margin: 0;
  display: inline;
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
}

button {
  translate: -3px -3px;
  box-shadow: 1px 1px 0em rgb(255, 127.5, 0), 2px 2px 0em rgb(255, 85, 0), 3px 3px 0em rgb(255, 42.5, 0), 4px 4px 0em rgb(255, 0, 0);
  font-family: var(--main-font);
  font-weight: 900;
  border-radius: 8px;
  color: var(--main-text);
  background: var(--main-bg);
  padding: 8px 30px;
  margin: 20px 0px 0px 0px;
  transform: translate(-3px, -3px);
  border: 2px solid var(--icon-color-2);
}

button:hover {
  transition: border-color 0.3s ease-out, color 0.3s ease-out, box-shadow 0.3s ease-out, text-shadow 0.3s ease-out, transform 0.3s ease-out, translate 0.3s ease-out;
  color: var(--icon-color-4);
  translate: 4px 4px;
  border-color: var(--icon-color-4);
  box-shadow: 0px 0px 0px #ffffff;
  cursor: pointer;
}

button:not(:hover) {
  transition: border-color 0.5s ease-in, color 0.5s ease-in, box-shadow 0.5s ease-in, text-shadow 0.5s ease-in, transform 0.5s ease-in, translate 0.5s ease-in;
}

.center-button {
  display: block;
  margin: 20px auto 0px auto;
}

.left-button {
  display: block;
  margin: 20px 0px 0px 0px;
}

.title {
  font-family: var(--main-font);
  font-weight: 900;
  text-align: center;
  color: var(--main-text);
  margin: 50px 0px;
  align-self: center;
}

.title:hover {
  transition: border-color 0.3s ease-out, color 0.3s ease-out, box-shadow 0.3s ease-out, text-shadow 0.3s ease-out, transform 0.3s ease-out, translate 0.3s ease-out;
  translate: -0.1em -0.1em;
  text-shadow: 0em 0em 0em rgb(255, 170, 0), 0.02em 0.02em 0em rgb(255, 141.6666666667, 0), 0.04em 0.04em 0em rgb(255, 113.3333333333, 0), 0.06em 0.06em 0em rgb(255, 85, 0), 0.08em 0.08em 0em rgb(255, 56.6666666667, 0), 0.1em 0.1em 0em rgb(255, 28.3333333333, 0);
  color: var(--icon-color-2);
}

.title:not(:hover) {
  transition: border-color 0.5s ease-in, color 0.5s ease-in, box-shadow 0.5s ease-in, text-shadow 0.5s ease-in, transform 0.5s ease-in, translate 0.5s ease-in;
}

.large-title {
  font-size: 10vmin;
}

.medium-title {
  font-size: 8vmin;
}

.small-title {
  font-size: 5vmin;
}

.text-title {
  font-weight: 900;
  font-weight: bold;
  margin-bottom: 12px;
}

.text {
  line-height: 1.4;
}

.centered {
  text-align: center;
}

.large-text {
  font-size: 24px;
}

.medium-text {
  font-size: 18px;
}

.small-text {
  font-size: 12px;
}

.layer2, .studios {
  font-family: var(--main-font);
  display: inline;
}

.layer2 {
  font-weight: 900;
}

.section {
  display: flex;
  flex-direction: column;
  margin: 80px;
  align-items: center;
  gap: 20px;
}

.side-by-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: stretch;
  gap: 20px;
}

.side-by-side.reverse {
  flex-wrap: wrap-reverse;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.flex-content {
  flex: 1 1 300px;
}

.round-img {
  border-radius: 10px;
  box-shadow: 3px 3px 5px var(--alt-bg-2);
}

.img-with-description {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.highlight {
  display: inline-block;
  font-weight: 900;
  font-size: 1.3em;
  transform: translate(-0.06em, -0.06em);
  color: var(--icon-color-2);
  text-shadow: 0.06em 0.06em 0em var(--icon-color-3), 0.12em 0.12em 0em var(--icon-color-4);
}

.highlight:hover {
  transition: border-color 0.3s ease-out, color 0.3s ease-out, box-shadow 0.3s ease-out, text-shadow 0.3s ease-out, transform 0.3s ease-out, translate 0.3s ease-out;
  transform: translate(0.06em, 0.06em);
  color: var(--icon-color-4);
  text-shadow: none;
}

.highlight:not(:hover) {
  transition: border-color 0.5s ease-in, color 0.5s ease-in, box-shadow 0.5s ease-in, text-shadow 0.5s ease-in, transform 0.5s ease-in, translate 0.5s ease-in;
}

#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  position: sticky;
  top: 0;
  z-index: 999;
  background: linear-gradient(rgba(255, 255, 255, 0.1254901961), rgba(255, 255, 255, 0));
  backdrop-filter: blur(20px);
}

.header-logo {
  flex: 0 0 60px;
}

#header ul {
  display: flex;
  align-items: center;
}

#header ul {
  display: flex;
  gap: 15px;
}

#header-left {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  justify-items: center;
  font-size: 24px;
  font-weight: 900;
}

#header a {
  font-size: min(3vw, 18px);
  font-weight: 900;
}

#header li:hover {
  transition: border-color 0.3s ease-out, color 0.3s ease-out, box-shadow 0.3s ease-out, text-shadow 0.3s ease-out, transform 0.3s ease-out, translate 0.3s ease-out;
  transform: translate(0.06em, 0.06em);
  color: var(--icon-color-3);
  cursor: pointer;
}

#header li:not(:hover) {
  transition: border-color 0.5s ease-in, color 0.5s ease-in, box-shadow 0.5s ease-in, text-shadow 0.5s ease-in, transform 0.5s ease-in, translate 0.5s ease-in;
}

#footer {
  display: flex;
  flex-direction: column;
  width: 100vw;
  justify-self: flex-end;
  align-items: center;
  background-color: var(--alt-bg-1);
}

.footer-columns {
  width: 90%;
  display: flex;
  justify-content: space-between;
  margin: 30px 50px;
  background-color: var(--alt-bg-1);
  color: var(--alt-text-1);
  font-family: var(--main-font);
}

#footer a {
  text-decoration: none;
  font-size: 15px;
}

#footer li:hover {
  transition: border-color 0.3s ease-out, color 0.3s ease-out, box-shadow 0.3s ease-out, text-shadow 0.3s ease-out, transform 0.3s ease-out, translate 0.3s ease-out;
  transform: translate(0.06em, 0.06em);
  color: var(--icon-color-3);
  cursor: pointer;
}

#footer li:not(:hover) {
  transition: border-color 0.5s ease-in, color 0.5s ease-in, box-shadow 0.5s ease-in, text-shadow 0.5s ease-in, transform 0.5s ease-in, translate 0.5s ease-in;
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.copyright {
  font-size: 6px;
  margin: 12px;
  color: var(--alt-text-2);
}

.shop-cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  justify-content: center;
  align-content: center;
}

.shop-card-img {
  width: 200px;
  height: 150px;
  object-fit: cover;
}

.shop-card-text {
  text-align: center;
}

.shop-card-price {
  font-size: 30px;
  font-weight: 900;
}

.shop-card {
  border-radius: 30px;
  border: 2px solid var(--alt-bg-1);
  box-shadow: 3px 3px 5px var(--alt-bg-2);
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  gap: 10px;
  border-radius: 30px;
  padding: 20px;
  align-items: center;
}

.shop-card:hover {
  transition: border-color 0.3s ease-out, color 0.3s ease-out, box-shadow 0.3s ease-out, text-shadow 0.3s ease-out, transform 0.3s ease-out, translate 0.3s ease-out;
  color: var(--icon-color-4);
  translate: 4px 4px;
  border-color: var(--icon-color-4);
  box-shadow: 0px 0px 0px #ffffff;
  cursor: pointer;
}

.shop-card:not(:hover) {
  transition: border-color 0.5s ease-in, color 0.5s ease-in, box-shadow 0.5s ease-in, text-shadow 0.5s ease-in, transform 0.5s ease-in, translate 0.5s ease-in;
}

.product-description {
  max-width: 500px;
}

.color-display {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
  gap: 12px;
  margin: 12px 0px;
  justify-content: center;
  align-content: center;
  max-width: 364px;
}

.color-card {
  border-radius: 30px;
  border: 2px solid var(--alt-bg-1);
  box-shadow: 3px 3px 5px var(--alt-bg-2);
  align-items: center;
  height: 40px;
  width: 40px;
  display: flex;
}

.color-selected {
  border-radius: 30px;
  border: 2px solid var(--alt-bg-1);
  box-shadow: 3px 3px 5px var(--alt-bg-2);
  align-items: center;
  height: 300px;
  width: 100%;
  max-width: 364px;
  margin: 40px 0px;
  padding: 20px;
}

.color-circle {
  height: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  margin: auto;
}

.color-card:hover {
  transition: border-color 0.3s ease-out, color 0.3s ease-out, box-shadow 0.3s ease-out, text-shadow 0.3s ease-out, transform 0.3s ease-out, translate 0.3s ease-out;
  color: var(--icon-color-4);
  translate: 4px 4px;
  border-color: var(--icon-color-4);
  box-shadow: 0px 0px 0px #ffffff;
  cursor: pointer;
}

.color-card:not(:hover) {
  transition: border-color 0.5s ease-in, color 0.5s ease-in, box-shadow 0.5s ease-in, text-shadow 0.5s ease-in, transform 0.5s ease-in, translate 0.5s ease-in;
}

.welcome-section .layer2 {
  translate: 0 -0.1em;
}

.welcome-section .studios {
  translate: -0.09em -0.09em;
  text-shadow: 0em 0em 0em rgb(255, 170, 0), 0.01em 0.01em 0em rgb(255, 153, 0), 0.02em 0.02em 0em rgb(255, 136, 0), 0.03em 0.03em 0em rgb(255, 119, 0), 0.04em 0.04em 0em rgb(255, 102, 0), 0.05em 0.05em 0em rgb(255, 85, 0), 0.06em 0.06em 0em rgb(255, 68, 0), 0.07em 0.07em 0em rgb(255, 51, 0), 0.08em 0.08em 0em rgb(255, 34, 0), 0.09em 0.09em 0em rgb(255, 17, 0);
}

.welcome-section {
  display: flex;
  flex-direction: column;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9)), url("/assets/img/start-background.jpg");
  background-size: cover;
  background-attachment: fixed;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
  text-shadow: 2px 2px 2px black;
  z-index: 1;
  margin-top: -70px;
  font-size: 20vmin;
  color: var(--alt-text-1);
  justify-content: center;
  align-items: center;
}

.contact-us-card {
  border-radius: 30px;
  border: 2px solid var(--alt-bg-1);
  box-shadow: 3px 3px 5px var(--alt-bg-2);
  align-items: center;
  padding: 50px 60px;
  max-width: 600px;
}

/*# sourceMappingURL=style.css.map */