/* ==========================================================
   DK Brooks Universe
   style.css
========================================================== */

:root {

    --background: #0b0806;
    --panel: #18110c;

    --gold: #c79b5b;
    --gold-light: #efd39f;

    --text: #f3efe8;

    --border: rgba(199,155,91,.35);

}

/* ========================================================== */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:
        linear-gradient(
            rgba(8,6,4,.55),
            rgba(8,6,4,.70)
        ),
        url("universe.jpg");

    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment:fixed;

    color:var(--text);

    font-family:Georgia,"Times New Roman",serif;

}

/* ========================================================== */

header{

    max-width:1200px;

    margin:auto;

    padding:70px 25px 40px;

    text-align:center;

}

header h1{

    color:var(--gold-light);

    font-size:3rem;

    font-weight:normal;

    letter-spacing:.08em;

    margin-bottom:25px;

}

header p{

    max-width:900px;

    margin:auto;

    line-height:1.8;

    font-size:1.1rem;

    color:#ddd;

}

/* ========================================================== */

main{

    max-width:1200px;

    margin:auto;

    padding:40px 25px 80px;

}

/* ========================================================== */

.cards{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

}

/* ========================================================== */

.card{

    background:rgba(30,20,14,.92);

    border:1px solid var(--border);

    border-radius:14px;

    padding:35px;

    text-decoration:none;

    color:inherit;

    transition:.30s;

}

.card:hover{

    transform:translateY(-5px);

    border-color:var(--gold);

    box-shadow:
        0 0 25px rgba(199,155,91,.18);

}

/* ========================================================== */

.card h2{

    color:var(--gold-light);

    margin-bottom:18px;

    font-size:1.5rem;

    font-weight:normal;

}

.card p{

    line-height:1.8;

    color:#d7d7d7;

}

/* ========================================================== */

footer{

    text-align:center;

    padding:50px;

    color:#888;

    font-size:.95rem;

}

/* ========================================================== */

@media(max-width:768px){

header{

    padding:45px 20px 25px;

}

header h1{

    font-size:2.2rem;

}

.cards{

    gap:20px;

}

.card{

    padding:25px;

}

}