/* ---------------- BASIC RESET ----------------  */

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

* {
    margin: 0;
    padding: 0;
    font: inherit;
}

html {
    scroll-behavior: smooth;
}

svg, header, section, nav, img, div, footer, section, img, label {
	display: block;
}

img {
    width: 100%;
}

input, textarea {
    outline: none;
}

ul {
	list-style: none;
}

a {
    text-decoration: none;
}

/* ----------------  START OUR SITE WIDE STYLES ----------------  */

:root {
    /* Set some site wide style variables */

    /* Site colors */
    --white: #ffffff;
    --black: #000000;
    --pink: #FF8DA1;

    /* Containers */
    --wrapper: 1400px;

    /* Padding */
    --wrapper-padding: 1rem;
    --item-padding: 1rem;

    /* Font sizes */
    --step--2: clamp(0.6076rem, 0.5686rem + 0.1954vw, 0.72rem);
    --step--1: clamp(0.7292rem, 0.6697rem + 0.2971vw, 0.9rem);
    --step-0: clamp(0.875rem, 0.788rem + 0.4348vw, 1.125rem);
    --step-1: clamp(1.05rem, 0.9261rem + 0.6196vw, 1.4063rem);
    --step-2: clamp(1.26rem, 1.0868rem + 0.8658vw, 1.7578rem);
    --step-3: clamp(1.512rem, 1.2736rem + 1.1918vw, 2.1973rem);
    --step-4: clamp(1.8144rem, 1.4902rem + 1.6212vw, 2.7466rem);
    --step-5: clamp(2.1773rem, 1.7404rem + 2.1843vw, 3.4332rem);
}

/* Increase padding size for wrapper and items at 700px */
@media (min-width: 700px) {
    :root {
        --wrapper-padding: 2rem;
        --item-padding: 3rem;
    }
}

body {
    font-size: 100%;
    font-family: "Montserrat";
    color: var(--white);
    background-color: var(--black);
}

/* ----------------  STYLES FOR OUR INTRO ----------------  */

#intro {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#intro-wrap {
    width: 80%;
    max-width: var(--wrapper);
    text-align: center;
}

#intro-wrap img {
    max-width: 100%;
}

#intro-wrap p {
    font-size: var(--step-1);
    text-transform: uppercase;
    padding-top: var(--item-padding);
    letter-spacing: .5em;
}

#intro-wrap p span {
    letter-spacing: 0;
}

a {
    color: var(--pink);
}