/*
 grey scale:
{
    "0": "#ffffff",
    "5": "#fdfdfd",
    "10": "#fbfbfb",
    "20": "#f5f5f5",
    "30": "#ececec",
    "40": "#dfdfdf",
    "50": "#cdcdcd",
    "60": "#b6b6b6",
    "70": "#999999",
    "80": "#767676",
    "90": "#4f4f4f",
    "100": "#262626"
}

Primary colors:
900 hsl(300, 100%, 10%);
800 hsl(290, 97%, 25%);
700 hsl(278, 95%, 40%);
600 hsl(265, 92%, 57%);
500 hsl(252, 90%, 60%);
400 hsl(240, 85%, 65%);
300 hsl(230, 75%, 70%);
200 hsl(220, 65%, 80%);
100 hsl(210, 55%, 90%);


New primary
900 hsl(189, 66%, 8%)
800 hsl(183, 62%, 13%)
700 hsl(180, 61%, 18%)
600 hsl(178, 61%, 24%)
500 hsl(177, 61%, 29%)
400 hsl(175, 31%, 45%)
300 hsl(171, 27%, 62%)
200 hsl(160, 29%, 78%)
100 hsl(120, 42%, 94%)
000 hsl(120, 25%, 95%)

Greys
1000 hsl(150, 19%, 6%)
900 hsl(150, 12%, 10%)
800 hsl(154, 10%, 14%)
700 hsl(153, 8%, 21%)
600 hsl(155, 6%, 36%)
500 hsl(153, 5%, 46%)
400 hsl(150, 4%, 56%)
300 hsl(142, 6%, 76%)
200 hsl(130, 8%, 86%)
100 hsl(120, 20%, 95%)
*/

html {
  height: 100%;
}

h1 {
  font-weight: 700;
  font-size: 64px;
  color: hsl(120, 20%, 95%);
  margin-bottom: 16px;
}

h2 {
  font-weight: 500;
  font-size: 24px;
  color: hsl(130, 8%, 86%);
  margin-top: 16px;
}

h3 {
  font-weight: 700;
  font-size: 32px;
  text-align: center;
  color: hsl(153, 8%, 21%);
}

h4 {
  margin: 0.5em 0;
}

p {
  font-weight: 550;
  color: hsl(155, 6%, 36%);
  margin: 0.2em 0;
}

body {
  font-family: -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue; /* 'Helvetica Neue', Helvetica, Arimo, Arial, sans-serif;*/
  -webkit-font-smoothing: antialiased;
  margin: 0;
  background-color: hsl(120, 20%, 95%);
}

.italy {
  font-style: italic;
  animation: none;
  border-right: none;
}

.menu-icon {
  width: 256px;
  height: 32px;
  object-fit: scale-down;
}

.menu-container {
  max-width: 1000px;
  display: flex;
  justify-content: space-between;
  margin: 8px auto;
  height: 32px;
  background-color: hsl(120, 25%, 95%);
}
.menu {
  min-width: 50%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.menu-item {
  width: 64px;
  margin: 0;
  padding: 12px 16px;
  text-align: center;
  font-size: 16px;
}

.menu-link {
  font-weight: 500;
  color: hsl(153, 8%, 21%);
  text-transform: none;
  text-decoration: none;
}

.menu-link:hover {
  text-decoration: underline;
}

.menu-item:hover {
  border-bottom: 2px solid hsl(153, 8%, 21%);
}

.menu-button {
  margin-right: 32px;
  height: 32px;
  color: hsl(153, 5%, 46%);
  background-color: hsl(120, 20%, 95%);
  border-color: hsl(150, 4%, 56%);
  border-width: 2px;
  border-radius: 5px;
  box-shadow: none;
  border-style: solid;
}

.menu-button:active {
  background-color: hsl(130, 8%, 86%);
  box-shadow: none;
}

.cta-button {
  color: hsl(180, 61%, 18%);
  background-color: hsl(120, 20%, 95%);
  border-color: hsl(180, 61%, 18%);
  margin: 8px 0;
}

.cta-button:active {
  background-color: hsl(130, 8%, 86%);
  box-shadow: none;
}

.hero {
  height: 100%;
  max-width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(hsl(157, 61%, 29%), hsl(177, 61%, 29%));
  box-shadow: 0 2px 3px hsla(0, 0%, 0%, 0.2);
}

.hero-body {
  padding-right: 0;
  padding-top: 80px;

}

.hero-img {
  min-width: 600px;
  max-height: 501px;
}

.features-body {
  height: 100%;
  max-width: 800px;
  margin: auto;
  background-color: hsl(120, 25%, 95%);
}

.features-container {
  display: block;
  margin: auto 24px;

}

.feature {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  margin: 64px 16px 64px;
}

.feature-cta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  margin: 64px 16px 64px;
}

.feature.reverse {
  flex-direction: row-reverse;
}

.email {
  display: flex;
  padding: auto;
  margin: 32px auto;
  height: 160px;
  flex-direction: column;
}

.email-card {
  margin: 0 auto;
}

.register-success {
  text-align: center;
  padding: 16px;
  visibility: hidden;
  color: hsl(130, 8%, 86%);
}

input {
  background-color: hsl(120, 0%, 95%);
  border-color: hsl(189, 66%, 8%);
  color: hsl(153, 5%, 46%);
  font-weight: 600;
  padding: 0 16px;
  margin: 8px 8px;
  height: 40px;
  border-width: 0px;
  border-radius: 8px;
  border-style: inset;
  box-shadow: inset 0 2px 2px hsla(120, 0%, 0%, .1);
}

button {
  background-color: hsl(177, 61%, 29%);
  border-width: 0;
  height: 40px;
  width: 72px;
  color: hsl(120, 20%, 95%);
  border-radius: 4px;
  box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.2);
  font-weight: 600;
}

button:active{
  background-color: hsl(175, 31%, 45%);
  box-shadow: inset 2px 2px 2px hsla(120, 0%, 0%, .2);
}

.feature-text {
  font-weight: 400;
  font-size: 24px;
  padding: 32px 32px;
}

.hero-headers {
  text-align: center;
  padding: 0 16px;

  max-width: 950px;
}

.contact-message {
  font-family: Arial;
  background-color: hsl(120, 0%, 95%);
  border-color: hsl(189, 66%, 8%);
  color: hsl(153, 5%, 46%);
  font-weight: 600;
  padding: 16px;
  margin: 8px 8px;
  height: 40px;
  border-width: 0px;
  border-radius: 8px;
  border-style: inset;
  box-shadow: inset 0 2px 2px hsla(120, 0%, 0%, .1);
  height: 360px;
}


.frames {
  border-right: .05em solid;
  animation: caret 1s steps(1) infinite;
}

@keyframes caret {
  50% {
    border-color: transparent;
  }
}

#change {
  color: hsl(0, 0%, 95%);
}

.feature-img {
  width: 40%;
}

.feature-text-content {
  text-align: center;
}

.feature-header {
  margin: 8px auto;
}

footer {
  left: 0;
  bottom: 0;
  width: 100%;
  min-height: 240px;
  background-color: hsl(183, 62%, 13%);
  color: hsl(0, 0%, 95%);
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  padding-top: 32px;
  margin: 0 auto;
  justify-content: space-evenly;
  max-width: 800px;
}

.footer-column {
  display: flex;
  flex-direction: column;
  align-content: baseline;
  margin: 0 16px;
}
.copyright {
  color: hsl(155, 6%, 36%);
  text-decoration: none;
}

.copyright.header {
  color: hsl(120, 20%, 95%);
}

.copyright:hover {
  text-decoration: underline;
}

input:focus, select:focus, textarea:focus, button:focus {
  outline: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

#submitBtn {
  margin: 0 auto;
}

.menu-button:active .dropdown-content {
  display: block;
}

@media only screen and (max-width: 800px) {
  h1 {
    font-weight: 700;
    font-size: 48px;
    color: hsl(120, 20%, 95%);
    margin-bottom: 16px;
  }

  .hero {
    display: flex;
    background-image: linear-gradient(hsl(157, 61%, 29%), hsl(177, 61%, 29%));
    flex-wrap: wrap;
    padding: 16px 16px 80px;

    flex-direction: row;
  }
  .hero-body {
    padding: 0;
  }

  .hero-img {
    width: 0;
    height: 0;
    min-width: 0;
    min-height: 0;
  }

  .feature {
    display: block;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 64px 16px 64px;
  }

  .feature-text {
    text-align: center;
    font-weight: 400;
    font-size: 24px;
    padding: 16px 16px;
    margin: 0 auto;
  }

  .feature-img {
    width: 100%;
  }

  .menu {

    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }


  .menu-icon {
    width: 256px;
    height: 32px;
    object-fit: scale-down;
    object-position: 31px 0;
  }

  .email {
    display: flex;
    padding: auto;
    margin: 16px auto;
    height: 160px;
    flex-direction: column;
  }

  .contact-message {
    font-family: Arial;
    background-color: hsl(120, 0%, 95%);
    border-color: hsl(189, 66%, 8%);
    color: hsl(153, 5%, 46%);
    font-weight: 600;
    padding: 16px;
    margin: 8px 8px;
    height: 40px;
    border-width: 0px;
    border-radius: 8px;
    border-style: inset;
    box-shadow: inset 0 2px 2px hsla(120, 0%, 0%, .1);
    width: 240px;
  }

  #submitBtn {
    margin: 0 8px;
  }
}