/* 
Author: Honey Negroiu
Course: ITWP 1000
File: style.css
Date: 2026-02-03
Information on using external CSS style sheet is located in Chapter 3. Information on media queries is located
in Chapter 7. Information on tables and CSS formatting for tables is located in Chapter 8.

/* ==============================
   Basic Page Styles
   ============================== */
body {
    margin: 1em;
    margin-bottom: auto;
    font-family: Arial, sans-serif;
}

h1 {
    text-align: center;
    font-size: 2.5em;
}

p, div {
    
    margin: 10px;
    padding: 20px;
    line-height: 1.5em;
}

/* ==============================
   Header Image
   ============================== */
header {
    text-align: center;
}

/* ==============================
   Table Styling (Matches Reference)
   ============================== */
/* Table Styling (Matches Reference) */
table {
    margin: auto;
    border: 5px solid #3f2a14;   /* outer table border only */
    width: 100%;                /* prevent inner borders */
    border-spacing: 0;          /* remove gaps between cells */
                                
}
td, th {
    border-style:none;
    padding: 0.5em;
    width:auto;
    
}
tfoot td {
    font-size: 9px;
    font-style: italic;
    text-align: center;
}
tr:nth-of-type(even) {
    background-color:#eaeaea;
}
thead:first-of-type {
    background-color:#3f2a14;
    color: #FFF;
}
caption {
    font-family: Impact, "Franklin Gothic Bold", "Arial Black", sans-serif;
    font-weight: bold;
    font-size: 1.75em;
    padding-bottom: 0.5em;
}
.responsive {
    max-width: 100%;
    height: auto;
    border: 1px solid #51471A;
    border-radius: 10px;
}
td.price {
    white-space: nowrap;
}
td.specialty {
     white-space: nowrap;
}

td.description {
    text-align: left;
}

/* ==============================
   Footer
   ============================== */

#validation {
    text-align: center;
    margin-top: 2em;
    padding-bottom: 1em;
}

/* ==============================
   Media Query
   ============================== */
@media only all and (max-width: 550px) {
    img {
        display: none;
 }
}