:root {

    /* ===== COLORS ===== */
    --tvv-cream: #fbf7f5
    --tvv-purple: #2a1341
    --tvv-gold: #d0984c
    --tvv-heading: #2a1342
    --tvv-text: #3b3b3b

    /* ===== FONTS ===== */
    --font-heading: "Cormorant Garamond", serif;
    --font-text: "Lato", sans-serif;
    --font-button: "Montserrat", sans-serif;
}

/* ===== General Layout ===== */

body {
    margin: 0;
    padding: 0;

    background-color: var(--tvv-cream);
    color: var(--tvv-text);

    font-family: var(--font-text);

    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ===== FOOTER ===== */

footer{
    padding: 24px 20px;
    text-align: center;

    font-family: var(--font-text);
    font-size: 0.875rem;
    color: var(--tvv-text);

    border-top: 1px solid var(--tvv-gold);
}

/* ===== BUTTONS ===== */

.button{
    display: inline-block;

    padding: 12px 28px;
    border: 2px solid var(--tvv-purple);
    border-radius: 999px;

    background-color: var(--tvv-purple);
    color: var(--tvv-cream);

    font-family: var(--font-button);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;

    cursor: pointer;
    transition: 
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.button:hover {
    background-color: var(--tvv-gold);
    border-color: var(--tvv-gold);
    color: var(--tvv-purple);
}

.button:focus-visible {
    outline: 3px solid var(--tvv-gold);
    outline-offset: 3px;
}

/* ===== PAGE LAYOUT ===== */

main {
    flex: 1;
}

/* ===== HEADER ===== */

header {
    padding: 40px 20px 40px;
    text-align: center;
}

header img {
    width: min(85%, 550px);
    height: auto;
}

/* ===== MAIN CONTENT ===== */

main {
    padding: 20px;
    text-align: center;
}

main h1,
main h2 {
    margin-top: 0;
    color: var(--tvv-purple);
    font-family: var(--font-heading);
}

main p {
    max-width: 650px;
    margin: 0 auto 24px;
    line-height: 1.7;
}

/* ===== CLASS ===== */

.instagram {
    margin-top: 40px;
    margin-bottom: 8px;

    font-size: 0.95rem;
}

.instagram-link {
    display: inline-block;
    margin-top: 20px;
    color: var(--tvv-purple);
    font-weight: 600;
    text-decoration: none;
    transition: color .2s ease;
    
}

.instagram-link:hover {
    color: var(--tvv-gold);
}