@import url("../../styles/shared/shared.css");

html {
  scroll-behavior: smooth;
}

body {
  color: var(--color-black);
  background-color: var(--color-white-back);
  cursor: var(--genshin-cursor);
  margin: 0;
  padding: 0;
}

html, body {
  overflow-x: hidden;
}

body::-webkit-scrollbar {
  width: 0.25rem;
}

body::-webkit-scrollbar-track {
  background: var(--color-creamy-white);
}

body::-webkit-scrollbar-thumb {
  background: var(--color-darker-white);
}

a {
  cursor: var(--genshin-cursor);
}

.hero {
  height: 100vh;
  background-color: var(--color-white-back);
  display: flex;
}

.left-container {
  width: 20%;
  padding: 1.5rem 1.5rem 1.5rem 3rem;
}

.middle-container {
  padding: 1.5rem;
  display: flex;
  min-height: 100vh;
  flex-grow: 1;
  max-width: 80%;
}

.right-container {
  width: 20%;
  margin-top: -18px;
  height: 100vh;
  padding: 1.5rem;
}

.button-primary:hover {
  background-color: var(--color-darker-white);
  background-color: var(--color-creamy-white);
  border: 1px solid var(--color-black);
}

.button-primary:active {
  background: var(--color-darker-white);
  border-color: var(--color-darker-white);
  box-shadow: none;
}

.anchor-primary:hover {
  transform: scale(1.2);
}

.gallery-image:hover {
  transform: scale(1.01);
  box-shadow: 0 0 10px var(--color-darker-white);
}

@media (max-width: 1024px) {
  .hero {
    flex-direction: column;
    height: auto;
  }

  .left-container,
  .right-container {
    width: 100%;
    margin: 0;
  }

  .middle-container {
    width: 100%;
    padding: 1rem;
    min-height: auto;
    margin: 0 auto;
    max-width: 50rem;
  }
}

@media (max-width: 1475px) {
  .middle-container {
    max-width: 57rem;
  }
}

@media (max-width: 1300px) {
  .middle-container {
    max-width: 49rem;
  }
}

@media (max-width: 1100px) {
  .middle-container {
    max-width: 39rem;
  }
}

@media (max-width: 768px) {
  .hero {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100vh;
  }

  .left-container,
  .right-container,
  .middle-container {
    padding: 0;
    margin: 0;
  }

  .middle-container {
    max-width: 50rem;
  }
}