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

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

body{

    font-family:'Cinzel', serif;

    background-image:url('../img/background.jpg');
    background-position:center;
    background-size:cover;
    background-attachment:fixed;

    color:#d7b06b;

    min-height:100vh;
}

.overlay{

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

    min-height:100vh;

    padding:40px 20px;
}

.hero{

    max-width:1100px;
    margin:auto;
    margin-bottom:40px;
}

.hero-content{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;
}

.logo{

    width:180px;
    max-width:40vw;
}

.hero h1{

    font-size:4rem;
    line-height:1;
    text-shadow:0 0 15px rgba(255,160,50,.3);
}

.hero p{

    margin-top:10px;
    font-size:1rem;
    letter-spacing:2px;
}

.taproom{

    max-width:1100px;
    margin:auto;
}

.taproom h2{

    text-align:center;

    margin-bottom:20px;

    letter-spacing:4px;
}

table{

    width:100%;

    border-collapse:collapse;

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

    border:2px solid #b97c28;

    box-shadow:
        0 0 30px rgba(255,140,0,.15);
}

th{

    background:rgba(185,124,40,.15);

    font-size:1rem;

    padding:15px;
}

td{

    height:52px;
}

th,
td{

    border:1px solid rgba(185,124,40,.35);

    padding:12px;
}

tbody tr:hover{

    background:rgba(255,180,50,.04);
}

footer{

    margin-top:50px;

    text-align:center;
}

.crew-btn{

    display:inline-block;

    padding:14px 32px;

    text-decoration:none;

    color:#d7b06b;

    border:2px solid #b97c28;

    transition:.25s;

    letter-spacing:2px;
}

.crew-btn:hover{

    background:rgba(185,124,40,.15);

    box-shadow:0 0 20px rgba(255,160,50,.2);
}

footer p{

    margin-top:15px;

    font-size:.9rem;

    opacity:.8;
}

@media(max-width:768px){

    .hero-content{

        flex-direction:column;
    }

    .logo{

        width:140px;
    }

    .hero h1{

        font-size:2.3rem;

        text-align:center;
    }

    .hero p{

        text-align:center;
    }

    table{

        font-size:.8rem;
    }

    th,
    td{

        padding:8px;
    }

}


.chalkboard{

    max-width:1000px;

    margin:auto;
    margin-top:20px;

    padding:35px;

    background:
        radial-gradient(circle at 20% 30%,
        rgba(255,255,255,.03) 0%,
        transparent 25%),

        radial-gradient(circle at 80% 70%,
        rgba(255,255,255,.025) 0%,
        transparent 30%),

        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.004) 0px,
            rgba(255,255,255,.004) 2px,
            transparent 2px,
            transparent 4px
        ),

        #0d0f10;

    border:14px solid #4b2f1b;

    border-top-color:#5d3b22;
    border-left-color:#5d3b22;

    border-right-color:#2b190d;
    border-bottom-color:#2b190d;

    border-radius:3px;

    box-shadow:
        inset 0 0 80px rgba(255,255,255,.03),
        inset 0 0 200px rgba(0,0,0,.7),
        0 8px 25px rgba(0,0,0,.8);

    position:relative;
}



.beer-line{

    min-height:58px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-family:'Patrick Hand', cursive;

    color:#ece5d8;

    font-size:2rem;

    letter-spacing:.5px;

    text-shadow:
        0 0 2px rgba(255,255,255,.25),
        0 0 6px rgba(255,255,255,.05);

    border-bottom:
        1px solid rgba(255,255,255,.04);
}

.beer-line:nth-child(odd){
    transform:rotate(-0.15deg);
}

.beer-line:nth-child(even){
    transform:rotate(0.08deg);
}

.beer-name{
    font-weight:normal;
}

.beer-info{

    color:#d8d2c5;

    font-size:.95em;

    opacity:.9;
}



.beer-line:last-child{

    border-bottom:none;
}

.beer-name{

    transform:rotate(-0.2deg);
}

.beer-info{

    opacity:.9;

    white-space:nowrap;

    transform:rotate(0.15deg);
}

.empty{

    color:transparent;
}

.empty::after{

    content:"";

    width:100%;

    border-bottom:1px dashed rgba(255,255,255,.08);
}

@media(max-width:768px){

    .beer-line{

        flex-direction:column;

        align-items:flex-start;

        gap:4px;

        font-size:1.5rem;

        padding:8px 0;
    }

    .beer-info{

        font-size:1rem;
    }

}

.status-ok{

    color:#8fd18f;

    font-size:0.8em;

    margin-left:15px;

    font-family:'Cinzel', serif;
}

.status-low{

    color:#d8b26a;

    font-size:0.8em;

    margin-left:15px;

    font-family:'Cinzel', serif;
}

.status-out{

    color:#c96a6a;

    font-size:0.8em;

    margin-left:15px;

    font-family:'Cinzel', serif;
}


.reserve-btn{
    margin-left:15px;
    padding:8px 16px;
    border:none;
    border-radius:8px;
    background:#2ca84f;
    color:#fff;
    cursor:pointer;
    font-weight:bold;
    transition:.2s;
}

.reserve-btn:hover{
    background:#22863d;
}


.incoming{
    opacity:.85;
}

.progress{
    width:100%;
    height:6px;
    background:#333;
    border-radius:20px;
    overflow:hidden;
    margin:8px 0;
}

.progress-bar{
    height:100%;
    background:#d4af37;
    border-radius:20px;
}

.status-coming{
    color:#d4af37;
    font-size:.85rem;
    font-weight:bold;
}

.taproom + .taproom {
    margin-top: 50px;
}