:root {
    --black-void: #0b0b0b;
    --ash-bone: #c9b89a;
    --lava-orange: #d35400;
    --ember-red: #a8321d;
    --stone-brown: #5b4636;
    --crystal-teal: #7fe7e1;
}

body {
    background-color: var(--black-void);
    color: var(--ash-bone);
    font-family: "Segoe UI", system-ui, sans-serif;
}

/* HERO */
.hero {
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, .9)),
        url("assets/beneath-the-stone.jpg") center/cover no-repeat;
    min-height: 100vh;
}

.logo-text {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 900;
    letter-spacing: .15em;
    color: var(--ash-bone);
    text-shadow: 0 0 25px rgba(211, 84, 0, .6);
}

.tagline {
    color: var(--lava-orange);
    letter-spacing: .2em;
    font-weight: 600;
}

/* SECTIONS */
section {
    padding: 5rem 0;
}

.section-title {
    color: var(--lava-orange);
    letter-spacing: .25em;
    font-weight: 700;
    margin-bottom: 2rem;
}

/* CARDS */
.card {
    background-color: #111;
    border: 1px solid #222;
}

/* BUTTONS */
.btn-trolg {
    background: linear-gradient(135deg, var(--lava-orange), var(--ember-red));
    border: none;
    color: #000;
    font-weight: 700;
}

.btn-trolg:hover {
    filter: brightness(1.15);
}

/* LINKS */
a {
    color: var(--crystal-teal);
    text-decoration: none;
}

a:hover {
    color: #fff;
}

/* FOOTER */
footer {
    background: #050505;
    color: #777;
}