@font-face {
  font-family: 'Thermoset';
  font-style: normal;
  font-weight: 600;
  font-stretch: normal;
  font-display: swap;
  src: url('thermoset.woff') format('woff');
}
* { box-sizing: border-box; }
body { margin: 0; padding: 0; background-color: black; font-family: Arial; }
#bg { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: -1; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 0.8; }
nav a:first-child {
  background-color: rgb(160,160,110); display: inline-block;
  background-image: url('phenolic.png'), linear-gradient(183deg, transparent 10%, rgba(255,255,255,0.2) 53%, transparent 54%), linear-gradient(45deg, rgb(160,160,110) 25%, transparent 25%, transparent 75%, rgb(160,160,110) 75%), linear-gradient(45deg, rgb(160,160,110) 25%, transparent 25%, transparent 75%, rgb(160,160,110) 75%), linear-gradient(to bottom, rgb(160,160,110), rgb(150,150,110));
  background-position: top right, 0px 0px, 0px 0px, 5px 5px, 0px 0px;
  background-repeat: no-repeat, no-repeat, repeat, repeat, repeat;
  box-shadow: 0px 1px rgb(110,110,60), 1px 0px rgb(180,180,130), 1px 2px rgb(110,110,60), 2px 1px rgb(180,180,130), 2px 3px rgb(110,110,60), 3px 2px rgb(180,180,130), 3px 4px rgb(110,110,60), 4px 3px rgb(180,180,130), 4px 5px rgb(110,110,60), 5px 4px rgb(180,180,130), 0px 0px 12px rgb(0,0,0), 5px 5px 12px rgb(0,0,0);
  color: rgb(0,130,80); font-family: Thermoset, Arial; text-decoration: none;
}
nav a:first-child:hover { color: rgb(40,80,40); }
nav a:first-child div { letter-spacing: 0.66px; padding-left: 2px; transition-delay: 0.2s; }
nav a:first-child, nav a:first-child * { transition: color 0.3s ease; }
#cart { position: absolute; top: 8px; right: 10px; cursor: pointer; }
#cart svg { width: 32px; height: 32px; stroke: black; fill: black; transition: all 0.3s; }
#cart svg:hover { width: 40px; height: 40px; stroke: rgb(40,80,40); fill: rgb(40,80,40); }
#cdlg table { margin: 0; text-align: center; }
#cbtns a { background: rgb(95,95,80); color: white !important; text-decoration: none; margin: 5px; padding: 3px 12px; }
#cbtns a:hover { background: rgb(130,130,100); }
.aside { text-align: right; font-family: Tahoma, Arial; font-size: 10pt; font-weight: bold; position: relative; top: 15px; }

#content { text-align: center; position: relative; }
h1, h2, h3, #content > :first-child { margin: 0; }
h1, h2 { font-family: 'Sheet', Arial; font-size: 32px; margin-bottom: 36px !important; }
table { display: inline-table; margin: 20px 0; }
.wbg { display: inline-block; background: white; box-shadow: 0 0 15px 15px white; margin: 15px; }
#content a, #content a * { color: brown !important; }
#content a:hover, #content a:hover * { color: green !important; }
#content table { border: none !important; border-spacing: 6px; }
#content td, th { border: none !important; background-color: rgba(255,255,255,0.5) !important; padding: 6px 12px; text-align: center; }
#content tr:first-child td, #content th { background-color: rgba(100,80,0,0.3) !important; font-weight: bold; }
#content .products a[href$='.jpg'], #content .products a[href$='.JPG'], #content .products a[href$='.png'], #content .products a[href$='.PNG'] { padding-right: 22px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 548.176 548.176'%3E%3Cpath d='M534.75,68.238c-8.945-8.945-19.694-13.417-32.261-13.417H45.681c-12.562,0-23.313,4.471-32.264,13.417 C4.471,77.185,0,87.936,0,100.499v347.173c0,12.566,4.471,23.318,13.417,32.264c8.951,8.946,19.702,13.419,32.264,13.419h456.815 c12.56,0,23.312-4.473,32.258-13.419c8.945-8.945,13.422-19.697,13.422-32.264V100.499 C548.176,87.936,543.699,77.185,534.75,68.238z M511.623,447.672c0,2.478-0.899,4.613-2.707,6.427 c-1.81,1.8-3.952,2.703-6.427,2.703H45.681c-2.473,0-4.615-0.903-6.423-2.703c-1.807-1.813-2.712-3.949-2.712-6.427V100.495 c0-2.474,0.902-4.611,2.712-6.423c1.809-1.803,3.951-2.708,6.423-2.708h456.815c2.471,0,4.613,0.905,6.42,2.708 c1.801,1.812,2.707,3.949,2.707,6.423V447.672L511.623,447.672z'/%3E%3Cpath d='M127.91,237.541c15.229,0,28.171-5.327,38.831-15.987c10.657-10.66,15.987-23.601,15.987-38.826 c0-15.23-5.333-28.171-15.987-38.832c-10.66-10.656-23.603-15.986-38.831-15.986c-15.227,0-28.168,5.33-38.828,15.986 c-10.656,10.66-15.986,23.601-15.986,38.832c0,15.225,5.327,28.169,15.986,38.826C99.742,232.211,112.683,237.541,127.91,237.541z'/%3E%3Cpolygon points='210.134,319.765 164.452,274.088 73.092,365.447 73.092,420.267 475.085,420.267 475.085,292.36 356.315,173.587'/%3E%3C/svg%3E") center right no-repeat; }
#footer { text-align: center; margin: 28px; color: lightgray; }
#footer a { margin: 4px; font-family: 'Sheet', Arial; font-size: 18px; color: bisque !important; }
@media screen and (min-width: 430px) {
 #bg { background-image: url('thermoset-bg.jpg'); }
 nav a:first-child { margin: 32px 0 0 32px; padding: 8px 20px; width: 365px; background-size: 101px 68px, 365px 120px, 10px 10px, 10px 10px, 10px 5px; font-size: 42px; line-height: 56px; }
 #content { margin: 40px 32px 0 32px; padding: 40px; background: rgba(255,255,225,0.65); }
}
@media screen and (max-width: 429px) {
 #bg { background-image: url('thermoset-ios.jpg'); background-position: left; }
 nav a:first-child { margin: 6.9vw 0 0 6.9vw; padding: 1.865vw 4.662vw; width: 85.08vw; background-size: 23.54vw 15.85vw, 85.08vw 27.97vw, 10px 10px, 10px 10px, 10px 5px; font-size: 9.79vw; line-height: 13.05vw; }
 nav a:first-child div { letter-spacing: 0.154vw; padding-left: 1px; }
 #content { padding: 80px 32px 32px 32px; background-color: rgba(255,255,215,0.6); background: linear-gradient(to bottom, transparent, rgba(255,255,215,0.6) 9.5vw); }
 #cart { top: 40px; }
 #footer a { display: block; font-size: 20px; }
}