@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Cinzel:wght@400;500;600&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    display:flex;
    justify-content:center;
    align-items:center;

    min-height:100vh;

    background:
        radial-gradient(circle at top,#2d2823 0%,#171512 65%,#0d0c0b 100%);

    color:#d8ccb2;

    font-family:"Cormorant Garamond",serif;

    overflow:hidden;
}

.vignette{

    position:fixed;

    inset:0;

    pointer-events:none;

    box-shadow:
        inset 0 0 250px rgba(0,0,0,.85),
        inset 0 0 120px rgba(0,0,0,.75);

}

.menu{

    width:540px;

    padding:50px;

    text-align:center;

    background:rgba(28,24,20,.86);

    border:1px solid #6f5a3d;

    box-shadow:
        0 0 60px rgba(0,0,0,.8),
        inset 0 0 60px rgba(255,255,255,.03);

    position:relative;
}

.menu::before{

    content:"";

    position:absolute;

    inset:10px;

    border:1px solid rgba(180,154,99,.25);

    pointer-events:none;
}

h1{

    font-family:"Cinzel",serif;

    font-size:58px;

    font-weight:500;

    letter-spacing:8px;

    color:#b49a63;

    margin-bottom:40px;

    text-shadow:
        0 0 15px rgba(180,154,99,.15);
}

#deadlineBox{

    margin-bottom:45px;

    padding:22px;

    border:1px solid #5f4d34;

    background:rgba(0,0,0,.18);

    box-shadow:
        inset 0 0 30px rgba(255,255,255,.03);
}

.deadlineTitle{

    font-size:28px;

    color:#b49a63;

    margin-bottom:12px;

    letter-spacing:1px;
}

#countdown{

    font-family:"Cinzel",serif;

    font-size:46px;

    color:#f1e2b8;

    letter-spacing:2px;

    margin-bottom:10px;

    text-shadow:
        0 0 10px rgba(255,226,184,.08);
}

#deadlineDate{

    font-size:22px;

    color:#a89674;
}

.menuButton{

    display:block;

    margin:18px 0;

    padding:22px;

    text-decoration:none;

    font-size:34px;

    color:#d8ccb2;

    background:#2a241f;

    border:1px solid #5d4a37;

    transition:
        background .25s,
        color .25s,
        transform .25s,
        box-shadow .25s,
        border-color .25s;
}

.menuButton:hover{

    background:#4a2924;

    border-color:#b49a63;

    color:#f1e2b8;

    transform:translateX(10px);

    box-shadow:
        0 0 18px rgba(180,154,99,.28),
        inset 0 0 20px rgba(255,255,255,.03);
}

.menuButton:active{

    transform:translateX(6px) scale(.98);
}

.footer{

    margin-top:35px;

    color:#7f735f;

    font-size:22px;

    letter-spacing:2px;
}

@media (max-width:700px){

    .menu{

        width:92%;

        padding:30px 20px;
    }

    h1{

        font-size:42px;

        letter-spacing:5px;
    }

    .deadlineTitle{

        font-size:22px;
    }

    #countdown{

        font-size:34px;
    }

    #deadlineDate{

        font-size:18px;
    }

    .menuButton{

        font-size:28px;

        padding:18px;
    }

}