html, body{
    outline: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
body{
    background-color: #121212;
    color: #fff;
    font-family: sans-serif;
}

.wrapper{
    display: grid;
    min-height: 100%;
    grid-template: auto 1fr auto / auto 1fr auto;
}

.header{
    text-transform: capitalize;
    height: 120px;
    grid-column: 1 / 4;
}
.header h1{
    margin-left: 1rem;
}

.filter{
    grid-column: 1 / 2;
    padding: 1rem;
}
    .filter ul{
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

.main{
    font-size: 24px;
    grid-column: 2 / 3;
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    grid-template-rows: repeat(auto-fit, minmax(200px, min-content));
}
    .main .beer{
        background-color: rgba(6,6,6,0.66);
        display: grid;
        grid-gap: 1.5rem;
        grid-template-columns: repeat(2, auto);
        font-size: 1.5rem;
        padding: 1.5rem;
    }
        .main .beer-image{
            display: grid;
            align-content: center;
        }
            .main .beer-image img{
                width: 100px;
                display: grid;
            }
        .main .beer-description{
            display: grid;
            grid-template-rows: auto 1fr auto;
            align-content: center;
        }
        .main .beer-header h2{
            margin: 0px;
            font-size: 2rem;
        }
        .main .beer-article{
            font-size: 1.2rem;
        }
        .main .beer-footer{
            font-size: 1rem;
        }
        .main .beer-footer span:before{
            content: " | ";
            color: #212121 !important;
            font-size: 1.2rem;
            font-weight: bold;
            vertical-align: bottom;
        }
        .main .beer-footer span:first-child:before{
            content: ""!important;
        }

.footer{
    height: 45px;
    grid-column: 1 / 4;
    padding: 1rem;
    background: grey;
}

.menu{
    display: grid;
}

    .menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }
    
    .menu li {
        float: left;
    }
    
    .menu li a {
        display: block;
        color: white;
        text-align: center;
        padding: 11px 16px;
        text-decoration: none;
    }
    .menu .active {
        background-color: lightseagreen;
      }



.color-darkorange{
    color: darkorange;
}
.color-red{
    color: red;
}
.color-seagreen{
    color: seagreen;
}