@font-face {
  font-family: 'G10';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('phenolic.woff') format('woff');
}
@font-face {
  font-family: 'Sheet';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('sheet-rod-tube.woff') format('woff');
}
* { box-sizing: border-box; }
body { margin: 0; padding: 0; background-color: rgb(25,25,0); font-family: Arial; }
#bg { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: -1; background-image: url('phenolic-bg.jpg'); background-size: cover; background-repeat: no-repeat; opacity: 0.8; }
.g10-sheet {
  width: 240px; height: 120px; position: absolute; background-color: rgb(160,160,110); padding-top: 18px;
  background-image: linear-gradient(190deg, transparent 10%, rgba(255,255,255,0.2) 60%, transparent 61%), 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-size: 240px 120px, 10px 10px, 10px 10px, 10px 5px;
  background-position: 0px 0px, 0px 0px, 5px 5px, 0px 0px;
  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);
  transition: color 0.3s ease;
}
.kmac { top: 30px; left: 32px; line-height: 42px; color: rgb(60,100,60); text-align: center; font-family: 'G10', Arial; font-size: 35px; text-decoration: none; z-index: 3; }
.sheets { top: 65px; left: 60px; transform: rotate(8deg); z-index: 2; text-align: right; padding: 88px 10px 0 0; color: rgb(50,90,50); font-family: 'Sheet', Arial; font-size: 20px; transition: top 0.5s ease, padding 0.5s ease; }
.g10-rod, .g10-bar {
  height: 30px; line-height: 28px;
  position: absolute; left: 200px; border-radius: 12px 15px 15px 12px;
  background-color: rgb(160,160,110); color: rgb(60,90,60); font-family: 'Sheet', Arial; font-size: 18px; text-align: right;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.3) 10%, transparent 70%, rgba(0,0,0,0.5)), 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-size: 215px 30px, 10px 10px, 10px 10px, 10px 5px;
  background-position: 0px 0px, 0px 0px, 5px 5px, 0px 0px;
  filter: drop-shadow(1px -2px 3px rgba(0,0,0,0.8)) drop-shadow(1px 2px 3px rgba(0,0,0,0.8));
  transition: left 0.5s ease, padding-right 0.5s ease;
}
.g10-rod { width: 215px; padding-right: 35px; }
.g10-bar { width: 208px; padding-right: 28px; top: 155px; background-size: 215px 38px, 10px 10px, 10px 10px, 10px 5px; }
.rods { top: 55px; }
.tubes { top: 105px; }
.cap { position: absolute; top: 0px; right: 0px; width: 20px; height: 30px; background: linear-gradient(to bottom, rgb(160,160,120), rgb(90,90,50)); border-radius: 50%; }
#bar1, #bar2 { position: absolute; right: -28px; width: 40px; height: 10px; border-top: solid 5px transparent; border-bottom: solid 5px transparent; border-left: solid 15px rgb(120,120,80); }
#bar1 { top: 0px; }
#bar2 { bottom: 0px; }
#bar3 { position: absolute; top: 5px; right: -5px; width: 17px; height: 20px; background: rgb(120,120,80); }
.g10-sheet:hover, .g10-rod:hover, .g10-bar:hover { color: rgb(0,60,0); }
.sheets:hover { top: 110px; padding: 80px 20px 0 0; }
@media screen and (min-width: 475px) {
 .g10-rod:hover, .g10-bar:hover { left: 250px; }
 .rods:hover { padding-right: 70px; }
 .tubes:hover { padding-right: 60px; }
 .g10-bar:hover { padding-right: 65px; }
}
#search { position: absolute; right: 32px; }
@media screen and (min-width: 801px) {
 #search { top: 85px; }
 #q { width: 220px; }
 #cart { width: 321px; }
 #content { margin: 235px 32px 0 32px; }
}
@media screen and (min-width: 436px) and (max-width: 800px) {
 #search { top: 230px; }
 #q { width: 40vw; }
 #cart { width: calc(40vw + 101px); }
 #content { margin: 305px 32px 0 32px; }
}
#search input, #cart { height: 30px; line-height: 30px; border: none !important; outline: 0; margin: 0; padding: 0 8px; font-size: 18px; background: rgba(255,255,220,0.6); }
#search input:hover, #search input:focus, #cart:hover { background: rgb(225,225,200); }
#q { margin: 0 6px 8px 0 !important; }
#q::placeholder { color: rgb(50,50,50); }
#go { width: 95px; cursor: pointer; }
#cart { display: block; cursor: pointer; }
#cl { font-family: 'Sheet'; line-height: 30px; vertical-align: top; }
#cart svg { width: 24px; height: 24px; margin: 3px 8px 0 0; stroke: black; fill: black; }
#cbtns a { background: rgb(95,95,80); color: white !important; text-decoration: none; font-family: 'Sheet'; margin: 5px; padding: 3px 12px; }
#cbtns a:hover { background: rgb(130,130,100); }
.aside { text-align: right; font-size: 10pt; font-family: Tahoma, Arial; font-weight: bold; }
h1, h2, h3, h4, #content > :first-child { margin: 0; }
h1, h2 { font-family: 'Sheet', Arial; font-size: 32px; margin-bottom: 36px !important; }
#content a, #content a * { color: brown !important; }
#content a:hover, #content a:hover * { color: green !important; }
#content * { background: transparent !important; border-color: rgb(200,200,180) !important; }
#content table { border: none !important; border-spacing: 6px; width: auto !important; }
#content td, th { border: none !important; background-color: rgba(255,255,255,0.5) !important; padding: 6px 12px !important; width: auto !important; 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 !important; }
#content .footnote { background: transparent !important; }
#footer { text-align: center; margin: 28px; color: lightgray; }
#footer a { display: block; margin-bottom: 12px; font-family: 'Sheet', Arial; font-size: 18px; color: bisque !important; }
@media screen and (min-width: 436px) {
 #bg { background-position: center; }
 #content { padding: 40px; background: rgba(255,255,220,0.6); }
}
@media screen and (max-width: 435px) {
 #bg { background-position: right; }
 #search { top: 240px; right: 0px; display: flex; justify-content: center; flex-wrap: wrap; }
 #q { width: 60vw; }
 #cart { width: calc(60vw + 101px); }
 #content { margin-top: 120px; padding: 225px 32px 32px 32px; background-color: rgba(255,255,220,0.6); background: linear-gradient(to bottom, transparent, rgba(255,255,220,0.6) 200px); }
 #footer a { font-size: 24px; }
}
@media screen and (min-width: 426px) and (max-width: 435px) {
 body { zoom: 0.975; }
}
@media screen and (min-width: 416px) and (max-width: 425px) {
 body { zoom: 0.95; }
}
@media screen and (min-width: 406px) and (max-width: 415px) {
 body { zoom: 0.925; }
}
@media screen and (min-width: 396px) and (max-width: 405px) {
 body { zoom: 0.9; }
}
@media screen and (min-width: 386px) and (max-width: 395px) {
 body { zoom: 0.875; }
}
@media screen and (min-width: 376px) and (max-width: 385px) {
 body { zoom: 0.85; }
}
@media screen and (min-width: 366px) and (max-width: 375px) {
 body { zoom: 0.825; }
}
@media screen and (min-width: 356px) and (max-width: 365px) {
 body { zoom: 0.8; }
}
@media screen and (min-width: 346px) and (max-width: 355px) {
 body { zoom: 0.78; }
}
@media screen and (min-width: 336px) and (max-width: 345px) {
 body { zoom: 0.76; }
}
@media screen and (min-width: 326px) and (max-width: 335px) {
 body { zoom: 0.74; }
}
@media screen and (max-width: 325px) {
 body { zoom: 0.72; }
}