/* ------------------- */
/* Custom properties   */
/* ------------------- */

:root {
    /* colors */
    --clr-light: 60 1% 73%;
    --clr-white: 0 0% 100%;
    --clr-blue-1: 203 94% 51%;
    --clr-blue-2: 203 100% 5%;
    --clr-blue-3: 205 100% 20%;
    --clr-blue-4: 204 63% 28%;
    --clr-dark: 60 4% 11%;
    --clr-gray: 60 3% 16%;
    --clr-gray-2: 0 2% 18%;
    --clr-success: hsl(143, 100%, 26%);
    --clr-warning: hsl(43, 100%, 66%);
    --clr-error: hsl(348, 55%, 49%);

    /* custom sizes */
    --size-100: 0.25rem;
    --size-200: 0.5rem;
    --size-300: 0.75rem;
    --size-400: 1rem;
    --size-500: 1.5rem;
    --size-600: 2rem;
    --size-700: 3rem;
    --size-800: 4rem;
    --size-900: 5rem;

    /* font-sizes */
    --fs-800: 3.625rem;
    --fs-700: 2.875rem;
    --fs-600: 2.25rem;
    --fs-500: 1.8rem;
    --fs-400: 1.5rem;
    --fs-300: 1.25rem;
    --fs-200: 1rem;
    --fs-100: 0.875rem;

    /* font-families */
    --ff-sans-normal: "ATC Overlook", sans-serif;
}

@media (width >=55em) {
    :root {
        --fs-800: 4.5rem;
        --fs-700: 3.625rem;
        --fs-600: 2.875rem;
        --fs-500: 2.25rem;
        --fs-400: 1.5rem;
    }
}

@media (width >=85em) {
    :root {
        --fs-800: 5.625rem;
        --fs-700: 5rem;
        --fs-600: 4rem;
        --fs-500: 3.125rem;
        --fs-400: 1.875rem;
    }
}


/* ------------------- */
/* Reset               */
/* ------------------- */

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--scrollpadding, 46px);
}


/* https://piccalil.li/blog/a-modern-css-reset/ */

/* Box sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Reset margins */
body,
h1,
h2,
h3,
h4,
h5,
p,
figure,
picture {
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    font-weight: 500;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

a {
    color: hsl(var(--clr-white));
    text-decoration: underline;
    transition: color 0.2s;
}

a:hover,
a:focus {
    color: hsl(var(--clr-blue-1, 200, 100%, 50%)); /* fallback to a primary color if defined */
    text-decoration: none;
}

/* set up the body */
body {
    font-family: var(--ff-sans-normal);
    font-size: var(--fs-400);
    color: hsl(var(--clr-white));
    background-color: hsl(var(--clr-blue-2));
    line-height: 1.5;
    min-height: 100vh;

    display: grid;
    grid-template-rows: min-content 1fr;

    overflow-x: hidden;
}

/* make images easier to work with */
img,
picture {
    display: block;
    max-inline-size: 100%;
}

/* make form elements easier to work with */
input,
button,
textarea,
select {
    font: inherit;
    border: none;
}

form {
    /* https://www.youtube.com/watch?v=nuDpLN2dazU */
    display: grid;
    gap: 1rem;
}

.form-group {
    display: grid;
}

label {
    text-transform: uppercase;
    font-size: var(--fs-100);
}

input {
    background: hsl(var(--clr-white));
    color: hsl(var(--clr-dark));
    border-radius: 15px;
    accent-color: hsl(var(--clr-dark));
    padding: 1ex 2ex;
    font-size: var(--fs-200);
}

input:not([type="checkbox"], [type="radio"]) {
    width: 100%;
}

input:focus:invalid {
  outline-color: var(--clr-error);
}

textarea {
  resize: none;
  padding: 1ex 2ex;
  font-size: var(--fs-200);
  border-radius: 15px;
}

/* remove animations for people who've turned them off */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

section {
    /* border: 1px solid red; */
}