/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* End of CSS Reset */
.main {
    display: flex;
    justify-content: center;
}

.grid-container {
    display: grid;
    grid-template-areas:
        "header header header header header"
        "p1 p2 p3 p4 p5"
        "p6 p7 p8 p9 p10"
        "p11 p12 p13 p14 p15"
        "p16 p17 p18 p19 p20"
        "p21 p22 p23 p24 p25"
        "footer footer footer footer footer";
}

div {
    border:1px solid black;
    text-align: center;
}
.header {
    grid-area: header; 
    grid-column: 1 / span 4;
    grid-row: 1 / span 1;
    display: flex;
    text-align: center;
    justify-content: center;
}
.footer { 
    grid-area: footer; 
    grid-column: 1 / span 5;
    grid-row: 5 / span 2;
    font-size: small;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    padding: 20px;
}
header {
    background: #35424a;
    color: #ffffff;
    padding: 10px 0;
    text-align: center;
    margin-bottom: 20px;
}
header h1 {
    margin: 0;
}
nav a {
    color: #ffffff;
    margin: 0 15px;
    text-decoration: none;
}
nav a:hover {
    text-decoration: underline;
}
.container {
    max-width: 1200px;
    margin: auto;
    overflow: hidden;
}
#products {
    margin: 20px 0;
}
.product-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}
.product-list div {
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    width: 200px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.product-list h3 {
    margin-top: 0;
}
.product-list button {
    background: #35424a;
    color: #ffffff;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
}
.product-list button:hover {
    background: #1f2a30;
}
#cart {
    background: #ffffff;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
#cart h2 {
    margin-top: 0;
}
#cart ul {
    list-style: none;
    padding: 0;
}
#cart li {
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}
#cart button {
    background: #e8491d;
    color: #ffffff;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
}
#cart button:hover {
    background: #cf3c0f;
}
.p1 { 
    grid-area: p1; 
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
}
.p2 { 
    grid-area: p2; 
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
}
.p3 { 
    grid-area: p3; 
    grid-column: 3 / span 1;
    grid-row: 1 / span 1;
}
.p4 { 
    grid-area: p4; 
    grid-column: 4 / span 1;
    grid-row: 1 / span 1;
}
.p5 { 
    grid-area: p5; 
    grid-column: 5 / span 1;
    grid-row: 1 / span 1;
}
.p6 { 
    grid-area: p6; 
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
}
.p7 { 
    grid-area: p7; 
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
}
.p8 { 
    grid-area: p8; 
    grid-column: 3 / span 1;
    grid-row: 2 / span 1;
}
.p9 { 
    grid-area: p9; 
    grid-column: 4 / span 1;
    grid-row: 2 / span 1;
}
.p10 { 
    grid-area: p10; 
    grid-column: 5 / span 1;
    grid-row: 2 / span 1;
}
.p11 { 
    grid-area: p11; 
    grid-column: 1 / span 1;
    grid-row: 3 / span 1;
}
.p12 { 
    grid-area: p12; 
    grid-column: 2 / span 1;
    grid-row: 3 / span 1;
}
.p13 { 
    grid-area: p13; 
    grid-column: 3 / span 1;
    grid-row: 3 / span 1;
}
.p14 { 
    grid-area: p14; 
    grid-column: 4 / span 1;
    grid-row: 3 / span 1;
}
.p15 { 
    grid-area: p15; 
    grid-column: 5 / span 1;
    grid-row: 3 / span 1;
}
.p16 { 
    grid-area: p16; 
    grid-column: 1 / span 1;
    grid-row: 4 / span 1;
}
.p17 { 
    grid-area: p17; 
    grid-column: 2 / span 1;
    grid-row: 4 / span 1;
}
.p18 { 
    grid-area: p18; 
    grid-column: 3 / span 1;
    grid-row: 4 / span 1;
}
.p19 { 
    grid-area: p19; 
    grid-column: 4 / span 1;
    grid-row: 4 / span 1;
}
.p20 { 
    grid-area: p20; 
    grid-column: 5 / span 1;
    grid-row: 4 / span 1;
}
.p21 { 
    grid-area: p21; 
    grid-column: 1 / span 1;
    grid-row: 5 / span 1;
}
.p22 { 
    grid-area: p22; 
    grid-column: 2 / span 1;
    grid-row: 5 / span 1;
}
.p23 { 
    grid-area: p23; 
    grid-column: 3 / span 1;
    grid-row: 5 / span 1;
}
.p24 { 
    grid-area: p24; 
    grid-column: 4 / span 1;
    grid-row: 5 / span 1;
}
.p25 { 
    grid-area: p25; 
    grid-column: 5 / span 1;
    grid-row: 5 / span 1;
}
.header {
    grid-area: header; 
    grid-column: 1 / span 5;
    grid-row: 1 / span 1;
    display: flex;
    text-align: center;
    justify-content: center;
}
.footer { 
    grid-area: footer; 
    grid-column: 1 / span 5;
    grid-row: 5 / span 1;
    font-size: small;
    line-height: 1.5;
    text-align: center;
    padding: 10px 0;
    background: #35424a;
    color: #ffffff;
    margin-top: 20px;
}
.footer a {
    color: #ffffff;
    text-decoration: none;
}
.footer a:hover {
    text-decoration: underline;
}
p {
    margin: 10px 0;
    font-size: 0.5em;
}
.product-list div {
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    transition: transform 0.2s;
}
.product-list div:hover {
    transform: scale(1.05);
}
.product-list h3 {
    margin-top: 0;
}
.product-list button {
    background: #35424a;
    color: #ffffff;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
}
.product-list button:hover {
    background: #1f2a30;
}
.product-list div {
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    width: 200px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.product-list h3 {
    margin-top: 0;
}
.product-list button {
    background: #35424a;
    color: #ffffff;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
}
.product-list button:hover {
    background: #1f2a30;
}
.product-list div {
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    width: 200px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}