@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap");

:root {
  --pale-blue: hsl(225, 100%, 94%);
  --bright-blue: hsl(245, 75%, 52%);
  --very-pale-blue: hsl(225, 100%, 98%);
  --desaturated-blue: hsl(224, 23%, 55%);
  --active-blue: hsl(253, 60%, 57%);
  --dark-blue: hsl(223, 47%, 23%);
  --dark-alpha: hsla(0, 0%, 0%, 0.2);

  --font-size-s: 0.75rem;
  --font-size-sm: 0.9rem;
  --font-size-m: 1rem;
  --font-size-l: 1.375rem;

  --font-weight-bold: 700;
  --font-weight-strong: 900;

  --size-xs: 0.75rem;
  --size-s: 1rem;
  --size-m: 1.25rem;
  --size-l: 1.75rem;

  --breakpoint: 25rem;

  --box-shadow: 0 0.75rem 1.25rem var(--dark-alpha);
}

html {
  font-size: 16px;
}
body {
  background: url("./images/pattern-background-mobile.svg"), var(--pale-blue);
  background-size: contain;
  background-repeat: no-repeat;
  min-height: 100vh;
  display: grid;
  place-content: center;
  font-family: "Red Hat Display", system-ui, sans-serif;
  line-height: 1.55;
  color: var(--desaturated-blue);
}
/* body * {
  outline: 1px solid red;
} */

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

.container {
  /* Don't have to use calc() on compare functions like min(), max() or clamp() */
  width: min(100vw - var(--size-xs) * 2, var(--breakpoint));
  padding: 0 0 var(--size-s);
  background: white;
  box-shadow: var(--box-shadow);
  border-radius: var(--size-m);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

header {
  margin-bottom: var(--size-m);
}

main {
  display: flex;
  flex-direction: column;
  padding: 0 var(--size-m);
}

main:not(:last-child) {
  gap: var(--size-m);
}

.hero {
  min-width: 100%;
}

h1 {
  font-size: var(--font-size-l);
  color: var(--dark-blue);
  font-weight: var(--font-weight-strong);
  margin-bottom: var(--size-xs);
  line-height: 1;
}
.summary {
  text-align: center;
}
.plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--size-m) var(--size-s);
  background: var(--very-pale-blue);
  border-radius: var(--size-xs);
}

h2 {
  font-size: var(--font-size-sm);
  color: var(--dark-blue);
  font-weight: var(--font-weight-strong);
}
span {
  font-size: var(--font-size-sm);
}
a {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
}

button {
  display: block;
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-strong);
  text-align: center;
  border: none;
  outline: none;
  cursor: pointer;
}
.proceed {
  background: var(--bright-blue);
  color: var(--very-pale-blue);
  padding: var(--size-s);
  border-radius: var(--size-xs);
  box-shadow: var(--box-shadow);
}
.cancel {
  background: transparent;
  color: var(--desaturated-blue);
  width: fit-content;
  align-self: center;
}
a:focus {
  color: var(--active-blue);
}
.proceed:focus {
  background: var(--active-blue);
}
.cancel:focus {
  color: var(--dark-blue);
}

@media (min-width: 25rem) {
  body {
    background: url("./images/pattern-background-desktop.svg"), var(--pale-blue);
    /* Why do I have to specify again these two properties, if they are specified in global stylesheet>
    Where the cascading rule did go? :) */
    background-size: contain;
    background-repeat: no-repeat;
  }
}

@media (hover: hover) {
  a:hover {
    color: var(--active-blue);
  }
  .proceed:hover {
    background: var(--active-blue);
  }
  .cancel:hover {
    color: var(--dark-blue);
  }
}