:root {
    --olive: hsl(95, 15%, 30%);
    --green: hsl(95, 75%, 40%);
    --orange: hsl(55, 75%, 40%);
    --red: hsl(0, 75%, 40%);
    --blue: hsl(210, 90%, 50%);

    --shadow: hsl(48, 3%, 5%);

    --bg-1: hsl(48, 3%, 15%);
    --bg-2: hsl(48, 3%, 25%);
    --bg-3: hsl(48, 3%, 35%);
    --bg-4: hsl(48, 3%, 45%);

    --bg-input: hsl(48, 3%, 80%);
    --bg-input-light: hsl(48, 3%, 95%);
    
    --highlight-0: hsl(48, 3%, 60%);
    --highlight-1: hsl(48, 3%, 65%);
    --highlight-2: hsl(48, 3%, 70%);
    --highlight-3: hsl(48, 3%, 75%);

    --highlight-hover: hsl(48, 3%, 90%);

    --text: hsl(48, 3%, 95%);
    --text-muted: hsl(48, 30%, 80%);
    --text-dark: hsl(48, 30%, 20%);
}

/* To fix the .content from being slightly 
wider than the screen */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin:0;
    
    font-family: sans-serif;

    background: var(--olive);
    color: var(--text);
}

main {
    flex: 1;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 1rem auto;
    padding: 1rem;
}

.section-header {
    font-size: xx-large;
    margin: 0 0.25rem;
}

.layer-1 {
    background: var(--bg-1);
    box-shadow: 0 4px var(--shadow);
    border-top: 1px solid var(--highlight-0);
    
    @media (min-width: 1200px) {
        border-left: 1px solid var(--highlight-0);
        box-shadow: 4px 4px var(--shadow);
    }
}

.layer-2 {
    background: var(--bg-2);
    box-shadow: 6px 6px var(--shadow);
    border-top: 1px solid var(--highlight-1);
    border-left: 1px solid var(--highlight-1);
}

.layer-3 {
    background: var(--bg-3);
    box-shadow: 8px 8px var(--shadow);
    border-top: 1px solid var(--highlight-2);
    border-left: 1px solid var(--highlight-2);
}

input {
    background: var(--bg-input);
    color: var(--text-dark);
    padding: 1rem;
    font-size: 1rem;
    box-shadow: 4px 4px var(--shadow);
    border-top: 1px solid var(--highlight-3);
    border-left: 1px solid var(--highlight-3);
}

form button {
    text-decoration: none;
    background: var(--blue);
    color: var(--text);
    padding: 1rem;
    margin: 0.5rem 0.5rem 1rem 0.5rem;
    border: 1px solid var(--blue);
    box-shadow: 6px 6px var(--shadow);
    font-size: large;
    transition: 0.2s;
}

form button:hover {
    text-decoration: underline;
    cursor: pointer;
    background: var(--bg-input-light);
    color: var(--text-dark);
    box-shadow: 8px 8px var(--shadow);
    border-top: 1px solid var(--highlight-3);
    border-left: 1px solid var(--highlight-3);
}    

p a {
    color: var(--text-muted);
}

p a:hover {
    text-decoration: underline;
    cursor: pointer;
    font-weight: bold;
}

a[href^="http"]:not([href*="yourdomain.com"])::before {
  content: "➚";
  margin-left: 0.25em;
  font-size: 0.85em;
}