:root{

    --background:#171311;
    --wood:#2a211b;
    --panel:#231c17;

    --paper:#efe6cc;
    --text:#ece6dc;

    --gold:#c8a968;

    --magpie:#2b7a87;
    --magpie-light:#6fc7d2;

}

*{

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

}

body{

    background:linear-gradient(#2d231d,#171311);

    color:var(--text);

    font-family:"Cormorant Garamond",serif;

    min-height:100vh;

}

/* ---------------- Header ---------------- */

header{

    text-align:center;

    padding:40px;

}

h1{

    font-family:"Cinzel",serif;

    font-size:4rem;

    color:var(--gold);

    letter-spacing:4px;

    text-shadow:0 0 25px rgba(70,160,170,.25);

}

header p{

    margin-top:10px;

    font-size:1.4rem;

    font-style:italic;

}

/* ---------------- Navigation ---------------- */

nav{

    margin-top:35px;

}

nav a{

    display:inline-block;

    margin:8px;

    padding:14px 28px;

    text-decoration:none;

    color:var(--paper);

    font-family:"Cinzel",serif;

    background:linear-gradient(#4a3829,#2a211b);

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

    border-radius:8px;

    transition:.3s;

}

nav a:hover{

    background:linear-gradient(var(--magpie),#1f4f58);

    box-shadow:

    0 0 20px var(--magpie-light);

    transform:translateY(-4px);

}

/* ---------------- Hero ---------------- */

.hero{

    width:90%;

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    padding:40px 0;

}

.welcome{

    background:rgba(35,28,23,.92);

    padding:50px;

    border:1px solid rgba(200,169,104,.3);

    border-radius:12px;

}

.welcome h2{

    font-family:"Cinzel",serif;

    font-size:2.7rem;

    margin-bottom:20px;

    color:var(--paper);

}

.welcome p{

    font-size:1.45rem;

    line-height:1.8;

}

.button{

    display:inline-block;

    margin-top:35px;

    padding:16px 30px;

    text-decoration:none;

    background:linear-gradient(var(--gold),#9b7740);

    color:#2b1f11;

    border-radius:50px;

    font-family:"Cinzel",serif;

    transition:.3s;

}

.button:hover{

    transform:scale(1.05);

    box-shadow:

    0 0 20px rgba(80,180,190,.6);

}

/* ---------------- Library ---------------- */

.library-image{

    position:relative;

    border-radius:12px;

    overflow:hidden;

    min-height:600px;

    background-image:
    linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)),
    url("images/library.jpg");

    background-size:cover;

    background-position:center;

}

.glow{

    position:absolute;

    width:250px;

    height:250px;

    right:20%;

    top:10%;

    border-radius:50%;

    background:rgba(65,190,210,.18);

    filter:blur(70px);

    animation:pulse 5s infinite ease-in-out;

}

@keyframes pulse{

    50%{

        transform:scale(1.2);

        opacity:.6;

    }

}

/* ---------------- Footer ---------------- */

footer{

    text-align:center;

    padding:50px;

    color:#b7b7b7;

}

/* ---------------- Mobile ---------------- */

@media (max-width:900px){

.hero{

grid-template-columns:1fr;

}

h1{

font-size:2.6rem;

}

.library-image{

min-height:350px;

}

}