:root {
    --bs-body-bg: var(--bs-gray-100);
}

body{
    background-image: url("../images/blue-checker-bg-gVhBIBN.svg");
    background-size: 200px 200px;
}

.card{
    z-index: 60;
}

.beer-shield{
    max-width: 300px;
}

#main-banner{
    z-index: 100;
    position: relative;
}

#information-text{
    margin-bottom: 25px;
}

#information-text p{
    font-size: 20pt;
    font-weight: bold;
}

#information-text .lead{
    font-size: 40pt;
    font-weight: bold;

}

#program-text p{
    font-size: 20pt;
    font-weight: normal;
}

#program-text .lead{
    font-size: 40pt;
    font-weight: bold;

}

#program-table tr{
    border-style: hidden;
}

#program-table th{
    text-align: right;
    padding: 10px;
    width: 40%
}

#program-table td{
    text-align:left;
    padding: 10px;
    width: 60%
}




h1{
    font-family: 'TaylorGothic', Arial, sans-serif;
    color: #FBB040;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
    font-size: 100pt;

}

@font-face {
    font-family: 'TaylorGothic';
    src: url("../fonts/TaylorGothic-E5qZxiS.woff2") format('woff2'),
    url("../fonts/TaylorGothic-k9TTZWf.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}


@media only screen and (min-width : 390px) {
    h1{
        font-family: 'TaylorGothic', Arial, sans-serif;
        color: #FBB040;
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: black;
        font-size: 60pt;

    }

    .beer-shield{
        max-width: 150px;
    }
}



@media only screen and (min-width : 800px) {
    h1{
        font-family: 'TaylorGothic', Arial, sans-serif;
        color: #FBB040;
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: black;
        font-size: 100pt;

    }
    .beer-shield{
        max-width: 300px;
    }
}