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

body {
  width: 100vw;
  min-height: 100vh;
}

:root {
  /* Colors */
  /* Bright colors */
  --color-primary: hsl(231, 69%, 60%);
  --color-secondary: hsl(0, 94%, 66%);
  /* Contrast colors */
  --color-contrast-primary: hsl(229, 31%, 21%);
  --color-contrast-secondary: hsl(0, 0%, 97%);
  /* Muted */
  --color-accent-muted: #8b8b8b8c;
  --color-accent-border: #dddddd;
  /* Sizes */
  /* Spacing sizes */
  --size-tiny: clamp(0.2rem, calc(0.2rem + 0.2vw), 0.5rem);
  --size-smaller: clamp(0.5rem, calc(0.35rem + 0.4vw), 1rem);
  --size-small: clamp(1rem, calc(1.25rem + 0.5vw), 1.75rem);
  --size-medium: clamp(1.5rem, calc(2rem + 0.5vw), 3rem);
  --size-large: clamp(2.5rem, calc(3.25rem + 1vw), 4rem);
  /* Font sizes */
  --size-font-smaller: clamp(0.7rem, calc(0.65rem + 0.5vw), 1rem);
  --size-font-small: clamp(1rem, calc(0.8rem + 0.7vw), 1.3rem);
  --size-font-medium: clamp(1.5rem, calc(1.3rem + 1vw), 2rem);
  --size-font-large: clamp(2rem, calc(1.8rem + 1.2vw), 3rem);
  --size-font-larger: clamp(3rem, calc(3.5rem + 1.5vw), 5rem);
  /* Font */
  /* Font weights */
  --font-weight-white: 100;
  --font-weight-light: 400;
  --font-weight-regular: 500;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;
  --font-weight-black: 900;
}

/* Tablet */
@media screen and (min-width: 40rem) {
  :root {
    /* Font sizes */
    --size-font-small: clamp(1rem, calc(0.8rem + 0.4vw), 1.5rem);
    --size-font-medium: clamp(1.5rem, calc(1.5rem + 0.8vw), 2.5rem);
    --size-font-large: clamp(2.5rem, calc(2rem + 0.9vw), 3.5rem);
    --size-font-larger: clamp(3rem, calc(3rem + 1vw), 4rem);
  }
}
/* Desktop */
@media screen and (min-width: 65rem) {
  :root {
    /* size-Font sizes */
    --size-font-small: clamp(0.8rem, calc(0.8rem + 0.3vw), 1.2rem);
    --size-font-medium: clamp(1rem, calc(1rem + 0.6vw), 2rem);
    --size-font-large: clamp(2rem, calc(2rem + 0.7vw), 3rem);
    --size-font-larger: clamp(3rem, calc(3rem + 1vw), 4rem);
  }
}
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--size-small);
  padding-block: var(--size-medium) var(--size-small);
  border-radius: var(--size-smaller);
  /* Fall back */
  box-shadow: 0 var(--size-tiny) var(--size-smaller) var(--color-accent-muted);
  box-shadow: 0 var(--size-tiny) var(--size-tiny) rgb(from var(--color-primary) r g b/0.2);
}
.card__image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.card__image svg {
  width: 35%;
  height: auto;
}
.card__decoration {
  width: 100%;
  height: auto;
  margin-block-start: var(--size-smaller);
}
.card__text-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--size-smaller);
  text-align: center;
}
.card__title {
  font-family: "Rubik", sans-serif;
  font-weight: var(--font-weight-regular);
  font-size: --size-font-medium;
  font-style: normal;
  color: var(--color-contrast-primary);
}
.card__title--small {
  font-size: calc(var(--size-font-medium) - 0.5vw);
}
.card__title--medium {
  font-size: calc(var(--size-font-large) - 0.5vw);
}
.card__title--large {
  font-size: calc(var(--size-font-larger) - 0.5vw);
}
.card__description {
  font-family: "Rubik", sans-serif;
  font-weight: var(--font-weight-light);
  font-size: var(--size-font-small);
  font-style: normal;
  color: var(--color-contrast-primary);
  opacity: 0.5;
}
.card button {
  width: 85%;
}

.button {
  font-family: "Rubik", sans-serif;
  font-weight: var(--font-weight-regular);
  font-size: var(--size-font-smaller);
  font-style: normal;
  background: transparent;
  border: none;
  text-decoration: none;
  border: 0.2rem solid transparent;
  cursor: pointer;
  transition: 500ms ease;
}
.button:hover {
  transition: 200ms ease;
}
.button--primary {
  color: var(--color-contrast-secondary);
  background: var(--color-primary);
}
.button--primary:hover:not(.button--no-hover-effect) {
  color: var(--color-primary);
  background: var(--color-contrast-secondary);
  border: 0.2rem solid var(--color-primary);
}
.button--secondary {
  color: var(--color-contrast-secondary);
  background: var(--color-secondary);
}
.button--secondary:hover:not(.button--no-hover-effect) {
  color: var(--color-secondary);
  background: var(--color-contrast-secondary);
  border: 0.2rem solid var(--color-secondary);
}
.button--contrast {
  color: var(--color-contrast-primary);
  background: var(--color-contrast-secondary);
  box-shadow: 0 calc(var(--size-tiny) - 0.1rem) var(--size-tiny) var(--color-accent-border);
}
.button--contrast:hover:not(.button--no-hover-effect) {
  color: var(--color-contrast-primary);
  background: var(--color-contrast-secondary);
  border: 0.2rem solid var(--color-contrast-primary);
}
.button--rectangle {
  padding: calc(var(--size-smaller) + 0.3rem) calc(var(--size-small) - 0.3rem);
  border-radius: var(--size-tiny);
}
.button--content-changer {
  font-weight: var(--font-weight-thin);
  padding: 0 var(--size-small) calc(var(--size-smaller) + 0.2rem);
}
.button--content-changer--selected {
  position: relative;
}
.button--content-changer--selected::before {
  content: "";
  position: absolute;
  bottom: -10%;
  left: 0;
  width: 100%;
  height: 0.2rem;
  background: var(--color-secondary);
}
.button--content-changer:hover:not(.button--no-hover-effect) {
  color: var(--color-secondary);
}

.dropdown-button {
  border: none;
  background: transparent;
  color: var(--color-primary);
  width: calc(var(--size-smaller) + 0.25rem);
  cursor: pointer;
  transform: rotate(0);
  transition: color 500ms ease;
}
.dropdown-button:hover {
  color: var(--color-secondary);
  transition: 200ms ease;
}

@media screen and (min-width: 65rem) {
  .button--rectangle {
    padding: var(--size-smaller) calc(var(--size-small) - 0.5rem);
  }
}
.attribution {
  grid-area: attribution;
  align-self: center;
}
.attribution p {
  color: var(--color-contrast-secondary);
}
.attribution a {
  color: var(--color-primary);
  text-decoration: none;
}
.attribution a:hover {
  color: var(--color-secondary);
}

.rotate-forward {
  animation: rotateForward 400ms ease forwards;
  will-change: transform;
}

.rotate-backward {
  animation: rotateBackward 200ms ease forwards;
  will-change: transform;
}

@keyframes rotateForward {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}
@keyframes rotateBackward {
  from {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(0deg);
  }
}
.open-div {
  animation: open-up 400ms ease forwards;
  will-change: max-height;
}

.close-div {
  animation: close-down 200ms ease forwards;
  will-change: max-height;
}

@keyframes open-up {
  from {
    max-height: 0;
  }
  to {
    max-height: 20rem;
  }
}
@keyframes close-down {
  from {
    max-height: 20rem;
  }
  to {
    max-height: 0;
  }
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--size-large);
  padding: var(--size-medium);
  width: 100%;
}
.container__image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: auto;
}
.container__image--decorated {
  position: relative;
}
.container__image--decorated::before {
  content: "";
  position: absolute;
  background: var(--color-primary);
  z-index: -1;
  height: 80%;
  width: 80%;
}
.container__image--decorated:nth-of-type(2)::before {
  top: 20%;
  right: 0;
  border-radius: 20rem 0 0 20rem;
}
.container__image--decorated:nth-of-type(1)::before {
  border-radius: 0 20rem 20rem 0;
  z-index: -1;
  top: 30%;
  left: -10%;
}
.container__image--medium {
  width: 100%;
}
.container__image--large {
  width: 112%;
  max-width: 50rem;
  order: -1;
}
.container__text-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--size-small);
  text-align: center;
}
.container__cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--size-medium);
}
.container__title {
  font-family: "Rubik", sans-serif;
  font-weight: var(--font-weight-regular);
  font-size: --size-font-medium;
  font-style: normal;
  color: var(--color-contrast-primary);
}
.container__title--small {
  font-size: var(--size-font-medium);
}
.container__title--medium {
  font-size: var(--size-font-large);
}
.container__title--large {
  font-size: var(--size-font-larger);
}
.container__description {
  font-family: "Rubik", sans-serif;
  font-weight: var(--font-weight-light);
  font-size: var(--size-font-small);
  font-style: normal;
  color: var(--color-contrast-primary);
  opacity: 0.5;
  width: 40ch;
  line-height: 1.25;
}
.container__buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--size-small);
}
.container__content-changers {
  flex-direction: column;
}
.container__hidden-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: min(100%, 35rem);
  overflow: hidden;
}
.container__hidden-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--size-smaller) + 0.25rem);
  padding-block-start: 0;
  width: 100%;
  border-block-end: 0.05rem solid var(--color-accent-muted);
  transition: 500ms ease;
  cursor: pointer;
}
.container__hidden-title:hover h3 {
  color: var(--color-secondary);
  transition: 200ms ease;
}
.container__hidden-title:first-of-type {
  padding-block-start: calc(var(--size-smaller) + 0.25rem);
  border-block: 0.05rem solid var(--color-accent-muted);
}
.container__hidden-title h3 {
  font-family: "Rubik", sans-serif;
  font-weight: var(--font-weight-regular);
  font-size: var(--size-font-small);
  font-style: normal;
  color: var(--color-contrast-primary);
}
.container__hidden-description {
  font-family: "Rubik", sans-serif;
  font-weight: var(--font-weight-light);
  font-size: var(--size-font-small);
  font-style: normal;
  display: block;
  z-index: -1;
  width: 100%;
  line-height: 1.7;
  overflow: hidden;
  max-height: 0;
  padding: 0 calc(var(--size-smaller) + 0.25rem);
  margin-block-start: calc(var(--size-smaller) + 0.25rem);
}
.container__hidden-description--opened {
  padding: calc(var(--size-smaller) + 0.25rem);
  margin-block-start: 0;
}

@media screen and (min-width: 45rem) {
  .container {
    padding: var(--size-small) var(--size-large) var(--size-smaller);
  }
  .container__cards {
    flex-direction: row;
  }
  .container__buttons {
    flex-direction: row;
  }
  .container__descriptions {
    width: 47ch;
  }
  .container__image--medium {
    width: 90%;
  }
  .container__image--decorated:nth-of-type(2)::before {
    right: -20%;
    top: 15%;
    width: 100%;
  }
  .container__image--decorated:nth-of-type(1)::before {
    top: 30%;
    left: -30%;
    width: 100%;
  }
  .container__cards #firefox {
    transform: translateY(10%);
  }
  .container__cards #opera {
    transform: translateY(20%);
  }
  .container__content-changers {
    gap: 0;
  }
}
@media screen and (min-width: 60rem) {
  .container--primary {
    flex-direction: row;
    min-height: 20rem;
  }
  .container--primary .container__text-content {
    text-align: left;
    align-items: flex-start;
  }
  .container__image--large {
    order: 0;
  }
  .container__title--medium {
    width: 15ch;
  }
}
header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: var(--size-medium);
}

.nav__hamburger {
  order: -1;
  position: absolute;
  right: var(--size-small);
  cursor: pointer;
}
.nav li {
  list-style: none;
}
.nav a {
  text-decoration: none;
  transition: 500ms ease;
}
.nav a:hover {
  cursor: pointer;
  color: var(--color-secondary);
  transition: 200ms ease;
}
.nav--desktop {
  display: none;
}
.nav--mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  padding: var(--size-medium);
  gap: var(--size-medium);
  width: 100%;
  min-height: 30rem;
}
.nav--mobile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-contrast-primary);
  opacity: 0.8;
  z-index: -1;
}
.nav--mobile .nav__icons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--size-small);
  color: var(--color-contrast-secondary);
  justify-self: flex-end;
  margin-block-start: auto;
}
.nav--mobile a {
  color: var(--color-contrast-secondary);
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  font-weight: var(--font-weight-thin);
}
.nav--mobile .nav__top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.nav--mobile .nav__logo {
  color: var(--color-contrast-secondary);
  color: var(--color-contrast-secondary);
}
.nav--mobile .nav__logo #bookmarkSvgShape {
  fill: var(--color-contrast-primary);
}
.nav--mobile ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(100%, 15rem);
}
.nav--mobile li {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-block: calc(var(--size-smaller) + 0.5rem);
  width: 100%;
  text-align: center;
  border-block-end: 0.05rem solid var(--color-accent-muted);
}
.nav--mobile li:first-of-type {
  border-block: 0.05rem solid var(--color-accent-muted);
}
.nav--mobile #close-button {
  background: none;
  border: none;
  width: -moz-fit-content;
  width: fit-content;
  font-size: var(--size-font-medium);
}
.nav--mobile #close-button:hover {
  cursor: pointer;
}
.nav--mobile button {
  color: var(--color-contrast-secondary);
  text-transform: uppercase;
  border: 0.15rem solid var(--color-contrast-secondary);
  width: min(100%, 15rem);
  letter-spacing: 0.1rem;
}
.nav--dialog {
  width: 100vw;
  border: none;
  max-width: none;
  margin: 0;
  background: none;
}
.nav--dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

@media screen and (min-width: 40rem) {
  header {
    padding: var(--size-small) var(--size-large) 0;
    justify-content: space-between;
  }
  .nav__hamburger {
    display: none;
  }
  .nav--mobile {
    display: none;
  }
  .nav--desktop {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--size-small);
    width: -moz-fit-content;
    width: fit-content;
  }
  .nav--desktop ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--size-small);
  }
  .nav--desktop a {
    color: var(--color-contrast-primary);
    width: var(--size-large);
    text-transform: uppercase;
    font-family: "Rubik", sans-serif;
    font-weight: var(--font-weight-thin);
    font-size: calc(var(--size-font-small) - 0.25rem);
    font-style: normal;
  }
  .nav--desktop button {
    text-transform: uppercase;
    font-family: "Rubik", sans-serif;
    font-weight: var(--font-weight-thin);
    font-size: calc(var(--size-font-small) - 0.25rem);
    font-style: normal;
    padding: calc(var(--size-tiny) + 0.2rem) calc(var(--size-medium) - 0.5rem);
  }
}
footer {
  display: grid;
  grid-template: "logo" auto "links" auto "icons" auto "attribution" auto/1fr;
  gap: var(--size-small);
  width: 100%;
  background-color: var(--color-secondary);
  font-family: "Alata", sans-serif;
  font-size: var(--font-size--base);
  background: var(--color-contrast-primary);
  padding: var(--size-medium);
}
footer > * {
  align-self: center;
  justify-self: center;
}
footer a {
  color: var(--color-contrast-secondary);
  text-decoration: none;
  transition: 500ms ease;
}
footer a:hover {
  cursor: pointer;
  color: var(--color-secondary);
  transition: 200ms ease;
}

.footer__logo {
  grid-area: logo;
  color: var(--color-contrast-secondary);
}
.footer__icons {
  grid-area: icons;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--size-medium);
}
.footer__icons svg {
  color: var(--color-contrast-secondary);
  transition: 500ms ease;
}
.footer__icons svg:hover {
  cursor: pointer;
  color: var(--color-secondary);
  transition: 200ms ease;
}
.footer__links {
  grid-area: links;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-contrast-secondary);
  gap: var(--size-small);
  margin-block-end: var(--size-small);
}
.footer__links li {
  list-style: none;
}
.footer__links a {
  text-decoration: none;
}

@media screen and (min-width: 40rem) {
  footer {
    grid-template: "logo links icons" 1fr "attribution attribution attribution" auto/auto 1fr auto;
    align-items: center;
    justify-content: center;
    padding: var(--size-small) calc(var(--size-large) + 1rem) var(--size-smaller);
  }
  .footer__logo {
    justify-self: start;
  }
  .footer__icons {
    justify-self: end;
  }
  .footer__links {
    margin-block-end: 0;
    justify-self: flex-start;
    flex-direction: row;
    margin-inline-start: var(--size-medium);
  }
}
body {
  overflow-x: hidden;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--size-large);
}

.newsletter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  width: 100%;
  gap: var(--size-small);
  padding-block: var(--size-large);
  color: var(--color-contrast-secondary);
}
.newsletter__count {
  font-family: "Rubik", sans-serif;
  font-weight: var(--font-weight-thin);
  font-size: var(--size-font-smaller);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: calc(var(--size-tiny) - 0.05rem);
}
.newsletter__description {
  font-family: "Rubik", sans-serif;
  font-weight: var(--font-weight-regular);
  font-size: var(--size-font-medium);
  font-style: normal;
  width: 20ch;
  text-align: center;
}
.newsletter__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--size-smaller);
  width: min(90%, 30rem);
}
.newsletter__form > * {
  width: 90%;
}
.newsletter__input {
  padding: calc(var(--size-smaller) + 0.3rem);
  padding-inline-start: calc(var(--size-smaller) + 0.3rem);
  border-radius: var(--size-tiny);
  border: none;
}
.newsletter__input-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.newsletter__input-wrapper input {
  width: 100%;
  z-index: 1;
}
.newsletter__input-wrapper input:focus {
  outline: none;
  border: none;
}
.newsletter__input::-moz-placeholder {
  font-family: "Rubik", sans-serif;
  color: var(--color-contrast-primary);
  opacity: 0.5;
}
.newsletter__input::placeholder {
  font-family: "Rubik", sans-serif;
  color: var(--color-contrast-primary);
  opacity: 0.5;
}

.error {
  position: relative;
  border-radius: var(--size-tiny);
  border: 0.2rem solid var(--color-secondary);
  border-block-end: 1.5rem solid var(--color-secondary);
  background: var(--color-secondary);
  z-index: 0;
  box-sizing: content-box;
}
.error::before {
  position: absolute;
  content: "Whoops, make sure it's an email";
  bottom: 0;
  left: 0;
  transform: translateY(200%);
  width: 100%;
  height: 10%;
  padding-inline-start: var(--size-smaller);
  font-family: "Rubik", sans-serif;
  font-weight: var(--font-weight-regular);
  font-size: 0.7rem;
  font-style: italic;
}
.error::after {
  position: absolute;
  content: url("/assets/svgs/icon-error.svg");
  top: 50%;
  right: var(--size-smaller);
  transform: translateY(-50%);
  padding-block-start: 0.2rem;
  width: 1.2rem;
  z-index: 1;
  cursor: pointer;
}

.mobile-hidden {
  display: none;
}

@media screen and (min-width: 45rem) {
  .newsletter__form {
    position: relative;
    flex-direction: row;
  }
  .newsletter__form input[type=submit] {
    align-self: flex-start;
    width: calc(10rem + 0.5vw);
  }
  .container--primary:first-of-type {
    gap: 0;
  }
  .mobile-hidden {
    display: initial;
  }
}/*# sourceMappingURL=styles.css.map */