@font-face {
  font-family: 'Roboto';
  font-display: swap;
  src: url('/assets/fonts/Roboto-Regular.ttf') format('truetype'),
    url('/assets/fonts/Roboto-Bold.ttf') format('truetype');
}

/* ----------------------- */
/* Setup custom properties */
/* ----------------------- */
:root {
  --clr-tomato-primary: hsl(4, 100%, 67%);
  --clr-tomato-secondary: hsl(13, 95%, 64%);

  --gradient-tomato: linear-gradient(
    90deg,
    var(--clr-tomato-primary),
    var(--clr-tomato-secondary)
  );

  --clr-grey-400: hsl(231, 7%, 60%);
  --clr-grey-500: hsl(235, 18%, 26%);
  --clr-grey-600: hsl(234, 29%, 20%);
  --clr-white: hsl(0, 0%, 100%);

  --clr-neutral-hsl-700: 224, 30%, 27%;

  --ff-base: 'Roboto', sans-serif;

  --fw-regular: 400;
  --fw-bold: 700;
}

/* ----------------------- */
/* Reset's
/* Refer: https://www.joshwcomeau.com/css/custom-css-reset/ */
/* ----------------------- */

/* Use a more-intuitive box-sizing model. */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* Remove default margin */
* {
  margin: 0;
}
/* Typographic tweaks!
  - Add accessible line-height
  - Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
/* Remove built-in form typography styles */
input,
button,
textarea,
select {
  font: inherit;
}
/* Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
/* Create a root stacking context */
#root,
#__next {
  isolation: isolate;
}
/* Remove defaults of ul */
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: inherit;
}

/* ----------------------- */
/*     General styles      */
/* ----------------------- */

body {
  font-family: var(--ff-base);
  font-weight: var(--fw-regular);
  font-size: 1rem;
  background-color: var(--clr-white);
  color: var(--clr-grey-500);
  min-height: 100vh;
  padding-bottom: 2rem;
}

@media (min-width: 600px) {
  body {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.flex-group {
  display: flex;
  gap: 0.8rem;
}

input {
  padding: 0.75rem;
  border: 0.6px solid hsla(231, 7%, 60%, 0.6);
  border-radius: 6px;
  outline: none;
}

button {
  cursor: pointer;
  text-decoration: none;
  padding: 1rem;
  padding: 0.75em 1.5em;
  border: 0;
  border-radius: 0.5rem;
  background-color: var(--clr-grey-600);
  color: var(--clr-white);
}

button:is(:hover) {
  background: var(--gradient-tomato);
  box-shadow: 0.2rem 1rem 1.5rem hsl(var(--clr-neutral-hsl-700), 0.4);
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.error-text {
  color: hsl(4, 95%, 67%);
}

/* ------------------------ */
/*     Specific styles      */
/* ------------------------ */

.hide {
  display: none !important;
}

.update-items-list li {
  margin-bottom: 0.5rem;
}

.signup {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
}

@media (min-width: 600px) {
  .signup {
    flex-direction: row-reverse;
    padding: 0 0.75em;
  }
}

.signup__illustration img {
  width: 100%;
  object-fit: cover;
}

.signup__content {
  padding: 0 1.1em;
  display: grid;
  gap: 1.2rem;
}

.signup__content h1 {
  font-size: 2.5rem;
  font-weight: var(--fw-bold);
}

@media (min-width: 600px) {
  .signup__content {
    place-content: center;
    padding: 0;
  }
}

.email-address {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.email-address-label {
  display: flex;
  justify-content: space-between;
}

.email-address p {
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
}

.email-address input.validation-error {
  --validation-error: 13, 95%, 64%;
  border-color: hsla(var(--validation-error), 0.9);
  background-color: hsla(var(--validation-error), 0.25);
  color: hsl(4, 95%, 67%);
}

.subscribe-success {
  display: grid;
  gap: 5rem;
  padding: 0 1.2rem;
  max-width: 25rem;
}

.subscribe-success__content {
  display: grid;
  gap: 1.5rem;
}

.subscribe-success__content h1 {
  font-size: 2.5rem;
  font-weight: var(--fw-bold);
  line-height: 1;
}

.subscribe-success__content #subscribedEmailId {
  font-weight: var(--fw-bold);
}

.subscribe-success .btn {
  padding: 1rem;
}

@media (min-width: 600px) {
  .grey-bg {
    background-color: var(--clr-grey-500);
  }

  .subscribe-success {
    background-color: var(--clr-white);
    padding: 3rem;
    border-radius: 1rem;
  }

  .subscribe-success .btn {
    padding: 0.75rem;
  }
}