:root {
  --white: #EEE;
  --black: #222;
  --green: #456E68;
  --blue-dark: #2F4058;
  --blue-light: #CEDEEB;
  --lavendar: #7D6A8A;
  --magenta: #BB2649;
  --sans: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif, system-ui;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

body {
  color: var(--white);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeSpeed;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

section {
  scroll-snap-align: start;
  width: 100%;
  min-height: 100vh;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

article {
  line-height: 1.15;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

h1 {
  font-size: 1.7em;
  margin: 0.67em 0;
}

a {
  text-decoration: none;
  color: var(--white);
}

input,
button,
textarea,
select,
optgroup {
  font: inherit;
}

img,
picture,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

@keyframes fade-in {
  from {opacity: 0%;}
  to {opacity: 100%;}
}

nav {
  width: 100%;
  display: flex;
  margin-top: 1rem;
  position: fixed;
  z-index: 999;
}

nav > :first-child {
  margin-left: 1rem;
  margin-right: auto;
}

nav > :last-child {
  margin-right: 1rem;
}

nav .logo {
  width: 140px;
}

.menu {
  margin: 0.5rem;
}

.hide {
  opacity: 0%;
  pointer-events: none;
  cursor: default;
}

.invert {
  color: var(--black);
  filter: invert(1);
}

.container {
  display: flex;
  width: 90vw;
  justify-content: center;
  align-items: center;
}

#home {
  background-color: var(--blue-dark);
}

#home .container {
  flex-direction: column;
}

#home img {
  width: 100%;
  padding: 0.5rem;
}

@keyframes fade {
  from {opacity: 35%;}
  to {opacity: 100%;}
}

.fade {
  animation: fade 2s linear;
}

#product {
  background-color: var(--white);
}

#product .container {
  flex-direction: column;
}

#product img {
  width: 100%;
  padding: 1rem;
}

#soon {
  background-color: var(--blue-light);;
  color: var(--black);
  letter-spacing: 0.6rem;
  font-size: 2.5rem;
}

#about {
  color: var(--white);
  background-color: var(--green);
  font-size: 1.5rem;
}

#about article {
  margin: 1.5rem;
}

.lg {
  font-weight: bold;
}

#contact {
  font-size: 1.1rem;
  background-color: var(--black);
}

#contact .container {
  flex-direction: column;
  width: 70%;
}

#contact div {
  justify-content: space-evenly;
}

#contact .info {
  line-height: 3rem;
}

#contact .logo {
  width: 300px;
}

#contact p, h1 {
  text-align: center;
}

#contact h1 {
  margin: 0;
}

#contact a {
  text-align: center;
  display: block;
  margin: 0 auto;
}

.divider {
  margin: 2rem;
  width: 200px;text-align: center;
  height: 3px;
  background-color: var(--white);
  opacity: 50%;
}

footer {
  text-align: center;
  color: var(--white);
  background-color: var(--black);
}

/* large screen */
@media screen and (min-width: 720px) {

  @media (prefers-reduced-motion: no-preference) {

    @keyframes move-left {
      0% {transform: translate(0);}
      70% {transform: translate(-50vw, 0); opacity: 70%;}
      100% {transform: translate(-140vw, 0); opacity: 30%;}
    }

    @keyframes move-right {
      0% {transform: translate(0);}
      70% {transform: translate(50vw, 0); opacity: 70%;}
      100% {transform: translate(140vw, 0); opacity: 30%;}
    }

    .move-left {
      animation: fade-in 1.5s linear;
      animation: move-left 1.5s 3s ease-in-out;
    }

    .move-right {
      animation: fade-in 1.5s linear;
      animation: move-right 1.5s 3s ease-in-out;
    }

    @keyframes slide-up {
      0% {transform: translate(0, -40px); opacity: 85%;}
      90% {transform: translate(0, 5px); opacity: 95%;}
      100% {transform: translate(0); opacity: 100%;}
    }

    @keyframes slide-down {
      0% {transform: translate(0, 40px); opacity: 85%;}
      90% {transform: translate(0, -5px); opacity: 95%;}
      100% {transform: translate(0); opacity: 100%;}
    }

    .slide-down {
      animation: slide-down 3s ease-in-out;
    }

    .slide-up {
      animation: slide-up 3s ease-in-out;
    }

    @keyframes letterspace {
      from {opacity: 80%;}
      to {letter-spacing: 1.2rem; opacity: 100%;}
    }

    .letterspace{
      animation: letterspace 5s ease-in-out;
      animation-fill-mode: forwards;
    }

  }

  nav .logo {
    width: 170px;
  }

  #home .container {
    flex-direction: row;
    margin: 3rem;
  }

  #product .container {
    flex-direction: row;
  }

  #about {
    font-size: 2rem;
  }

  #about article {
    width: 70%
  }

  #contact .container {
    flex-direction: row;
    width: 70%;
  }

  .divider {
    height: 200px;
    width: 3px;
    background-color: var(--white);
    opacity: 50%;
  }

}