/* Header */
@import url('Header/HeaderWedding.css');
@import url('Header/HeaderWeddingMobile.css');

/* Body */
@import url('Body/BodyWedding.css');
@import url('Body/BodyWeddingMobile.css');

/* Footer */
@import url('Footer/FooterWedding.css');
@import url('Footer/FooterWeddingMobile.css');

:root {
    --bg-light: hsl(0, 80%, 100%);
    --bg-medium: hsl(0, 0%, 95%);
    --bg-dark: hsl(0, 0%, 80%);
    --text: hsl(0, 0%, 0%);
    --text-muted: hsl(0, 0%, 20%);
    --primary: hsl(120, 60%, 20%);
    --secondary: hsl(120, 20%, 40%);
    --accent: hsl(51, 100%, 50%);

    --danger: hsl(9, 35%, 60%);
    --warning: hsl(52, 35%, 60%);
    --success: hsl(147, 35%, 60%);
    --info: hsl(217, 35%, 60%);

    /* FONTS */

    --font-main: 'Chubbo', sans-serif;
    --font-second: 'Supreme', sans-serif;
    --font-accent: 'Telma', cursive;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

section {
    display: flex;
    justify-content: center;
    padding: 0;
    width: 100%;
    height: 100vh;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin-top: 0;
    margin-bottom: 0;
}

p {
    font-family: var(--font-second);
    color: var(--text-muted);
    font-size: 16px;
    letter-spacing: normal;
    line-height: 150%;
    user-select: none;
}

h6 {
    font-family: var(--font-main);
    color: var(--text);
    font-size: 1.25rem;
    letter-spacing: -0.5%;
    line-height: 150%;
    user-select: none;
}

h5 {
    font-family: var(--font-second);
    color: var(--text);
    font-size: 1.5rem;
    letter-spacing: -1.5%;
    line-height: 140%;
    user-select: none;
}

h4 {
    font-family: var(--font-second);
    color: var(--text);
    font-size: 1.75rem;
    letter-spacing: -2%;
    line-height: 130%;
    user-select: none;
}

h3 {
    font-family: var(--font-accent);
    color: var(--text-muted);
    font-size: 10rem;
    letter-spacing: -2.5%;
    line-height: 120%;
    font-weight: lighter;
    user-select: none;
}

h2 {
    font-family: var(--font-second);
    color: var(--text);
    font-size: 2.25rem;
    letter-spacing: -3%;
    line-height: 110%;
    user-select: none;
}

h1 {
    font-family: var(--font-second);
    color: var(--text);
    font-size: 2.5rem;
    letter-spacing: -3.5%;
    line-height: 100%;
    user-select: none;
}

a {
    font-family: var(--font-second);
    color: var(--text);
    font-size: var(--font-size-second);
    user-select: none;
    text-decoration: none;
}

label {
    font-family: var(--font-second);
    color: var(--text);
    font-size: var(--font-size-second);
    user-select: none;
    text-decoration: none;
}

.gold {
    color: var(--accent)
}