* {
    box-sizing: border-box;
}

body {
    background-image: url("../images/pizza.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Open Sans Condensed', sans-serif;
}
.row::after {
    content: "";
    clear: both;
    display: block;
}

[class*="col-"] {
    float: left;
    padding: 0.5em;
}

section.col-12{
    margin:0;
    padding:0;
}

legend {
    font-size: 1.5em;
}

form, footer {
    font-size: 1.25em;
}

.row {
    margin-bottom: 0.5em;
}

#quantity {
    width: 50px
}

header div.col-2 {
    padding-top: 1em;
}

section .col-12, .col-s-12 {
    padding: 0;
    margin:0;
}

section .col-6, .col-s-6 {
    padding: 0;
    margin:0;
}
a {
    text-decoration: none;
    text-align: center;
    color:  black;
    font-size: 1.25em
}

a:hover {
    color: blue;
}

h1 {
    font-size: 1.5em;
    font-family: 'Cinzel', serif;
    text-align: center;
    padding-bottom: .25em;
    margin: 0;
    border-bottom: 1px solid black;
    
}

div.col-12, div.col-2 {
    text-align: center;
}

fieldset div.col-6, fieldset div.col-12{
    text-align: center;
    padding-bottom: 1em;
}

button {
    padding:5px 15px; 
    background: blue; 
    border:0 none;
    cursor:pointer;
    margin: 0.25em;
    color: white;
    border-radius: 5px; 
    width: 135px;
    height: 40px;
}

fieldset {
    margin: 2em 0em;
    background-color: rgba(255, 255, 255, 0.5); 
}

footer {
    color: black;
    text-align: center;
}

/* mobile device */
[class*="col-"] {
    width: 100%;
}

/* tablets: */
@media only screen and (min-width: 600px) and (max-width: 767px) {
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}

    h1 {
        font-size: 2.5em;
    }
}

/* laptop or desktop: */
@media only screen and (min-width: 768px) {
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}

    .row {
        margin-bottom: 0.5em;
    }
    h1 {
        font-size: 3.25em;
    }
}