body{margin:0;padding:0;font-family:Arial,sans-serif;min-height:100vh;display:grid;grid-template-areas:"header" "aside-left" "main" "aside-right" "footer";grid-template-rows:auto auto 1fr auto auto}@media(min-width:1025px){body{grid-template-areas:"header header header" "aside-left main aside-right" "footer footer footer";grid-template-columns:130px 1fr 130px;grid-template-rows:auto 1fr auto}}header{grid-area:header;background-color:#2a1f1f;color:#fff;display:flex;flex-direction:column;h1{ text-align: center; margin-top: 12px; margin-bottom: 0; } .top-logo-row { background-color: #000000; padding-top: 4px; padding-left: 130px; padding-right: 130px; } @media (min-width: 1025px) { .category-description { padding-left: 130px; padding-right: 130px; } } @media (max-width: 1024px) { .category-description { padding-left:40px; padding-right: 40px; } } @media (max-width: 768px) { .category-description { display: none; } h1 { margin-bottom: 20px; } .top-logo-row { padding-left: 16px; padding-right: 0px; } } .hamburger { display: none; background: none; border: none; font-size: 3rem; cursor: pointer; } nav { background-color: rgba(255, 255, 255, 0.1); ul { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: center; li { margin: 0 5px; display: inline-block; a { color: #ffffff; text-decoration: none; font-weight: bold; } a:hover { color: silver; text-decoration: none; } } li.text-link { padding: 10px 0; } } } @media screen and (max-width: 899px) { .hamburger { display: block; color: #ffffff; position: absolute; top: 0; right: 0; } #nav-menu { display: none !important; } #nav-menu.show { display: block !important; } #nav-menu ul { flex-direction: column; background-color: rgba(0, 0, 0, 0.85); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); border-radius: 8px; width: 300px; position: absolute; top: 45px; right: 0; z-index: 100; } #nav-menu li { text-align: center; padding: 0.5rem 0; font-size: 2rem; } } @media screen and (min-width: 900px) { #nav-menu { display: block !important; } #nav-menu ul { display: flex; justify-content: space-around; } }}footer{grid-area:footer;background-color:#2a1f1f;color:#fff;padding-left:20px}h3{margin-top:8px;margin-bottom:6px}aside:nth-of-type(1){grid-area:aside-left;background-color:#e0e0e0}aside:nth-of-type(2){grid-area:aside-right;background-color:#e0e0e0}@media(max-width:1024px){aside{min-height:120px}}main{grid-area:main;background-color:#f2f2f2}.container{display:flex;flex-wrap:wrap;min-width:320px;max-width:1280px;margin:0 auto}.container-home{min-width:320px;max-width:1280px;margin:0 auto;overflow:hidden;padding:0 20px;.image-left { float: left; margin-right: 20px; max-width: 240px; height: auto; }}.category-card{width:50%;padding:12px;box-sizing:border-box}@media(max-width:576px){.category-card{width:100%}}.category-card{img { width: 100%; height: auto; } .card-content { border-radius: 8px; overflow: hidden; padding: 0px; background-color: #f0f0f0; .card-description { min-height: 120px; padding: 0 12px 12px 12px; a { text-decoration: none; } h3 { text-align: center; } p { margin-top: 4px; margin-bottom: 0; } } }}.drop-shadow{box-shadow:0 2px 5px rgba(0,0,0,.2)}.two-cell{display:flex;.cell-left { flex: 3; padding-left: 14px; } .cell-right { flex:1; text-align: right; padding-right: 10px; }}.product-card{width:50%;padding:12px;box-sizing:border-box}@media(max-width:768px){.product-card{width:100%}}.product-card-content{display:flex;border-radius:8px;overflow:hidden;flex-direction:column}.product-card-header{width:100%;background-color:#473d3d;color:#fff;a { color: #ffffff; text-decoration: none; line-height: 36px; }}.product-card-row{display:flex;flex-direction:row}.product-card-image{flex:0 0 33.33%;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden;background-color:#fff;.product-price { text-align: right; padding: 10px 16px 16px 0; color: limegreen; font-weight: bold; letter-spacing: 2px; } .product-image { img { width: 100%; height: auto; object-fit: cover; } }}.product-card-description{flex:0 0 66.66%;background-color:#f5f5f5;min-height:240px;.product-name { padding-left: 14px; } .product-description { padding: 0 14px; margin: 14px 0 0 0; } .product-features { padding-left: 28px; margin-top: 10px; margin-bottom: 0px; }}.product-card-footer{width:100%;min-height:80px;position:relative;background-color:#e0e0e0;.product-links-label { padding-left: 14px; } .product-links { position: absolute; bottom: 8px; right: 10px; .amazon-buy-button { cursor: pointer; border: none; background-color: rgb(255, 216, 20); width: 90px; height: 30px; border-radius: 15px; transition: background-color 0.50s; color: #000000; text-decoration: none; display: inline-block; line-height: 28px; text-align: center; } .amazon-buy-button:hover { background-color: rgb(245, 205, 3); color: #000000; } .thrustmaster-buy-button { cursor: pointer; border: none; background-color: #F93822; width: 110px; height: 30px; border-radius: 4px; transition: background-color 0.50s; color: #ffffff; font-weight: bold; font-size: 12px; text-transform: uppercase; text-decoration: none; display: inline-block; line-height: 28px; text-align: center; } } @media (max-width: 768px) { .product-links { position: relative; text-align: right; .amazon-buy-button { display: block; float: right; } } }}