* {
        margin: 0;
        padding: 0;
      }
      
      body {
        color: #fff2e8;
        background-color: #0a0404;
        background-image: url('/SiteImages/HYPERFIXTLiquidWebsiteBackground.png');
        background-size: cover;
        background-attachment: fixed;
        scrollbar-color:#eb7e2a rgb(10 4 4 / 20%);
        font-size: 18px;
        font-family: "BrainWants", sans-serif;
      }
      
      .layoutGrid {
        display: grid;
        grid-template-columns: [leftbar] 2fr [leftgap] 55px [body] 6fr [rightgap] 55px [rightbar] 2fr;
        grid-template-rows: [row-a] 1fr;
        min-height: 100vh;
      }
      
      a:link {
        color: #ffcb3b;
        background-color: transparent;
        text-decoration: none;
      }
      
      a:visited {
        color: #eb7e2a;
        background-color: transparent;
        text-decoration: none;
      }
      
      a:hover {
        color: #fff1cc;
        background-color: transparent;
        text-decoration: underline dotted #fff1cc;
      }
      
      
      .mainBody {
        display: flex;
        flex-flow: column;
        align-items: center;
        gap: 25px;
        grid-column-start: body;
        grid-column-end: rightgap;
        grid-row-start: row-a;
        grid-row-end: row-b;
        margin: 20px auto;
      }
      
      .textWindow {
        background: #0a0404;
        background-color: rgb(10 4 4 / 80%);
        background-attachment: local;
        border: 5px solid #4a1508;
        padding: 15px;
        text-align: center;
        flex-grow: 1
      }
      
      .textWindow > p {
        padding: 0.75em 0;
        line-height: 1.5;
        position: relative;
      }
      
      .textWindow > img {
        width: 95%;
        max-width: 700px;
        border-style: solid;
        border-width: 5px;
        border-color: #4a1508;
      }
      
      .videoPlayer {
        border: 5px groove #4a1508;
        aspect-ratio:16/9;
      }
      
      .textWindow > .imgSide {
        width: 55%;
        max-width: 450px;
      }
      
      .textWindow > .imgWide {
        width: 95%;
        max-width: 1000px;
      }
      
      .textLeft {
        text-align: left;
      }
      
      .textRight {
        text-align: right;
      }
      
      .hoverText {
        color: #ffdf88;
      }
      
      .hoverImage {
        position: absolute;
        z-index: 2;
        left: 50%;
        transform: translate(-50%, calc(-100%));
        border: 5px solid #ffdf88;
        background: rgb(10 4 4 / 90%);
        backdrop-filter: blur(1px);
        display: none;
      }
      
      .hoverImage:has(+ .hoverText:hover) {
        display: inline;
      }
      
      .addWindow {
        border: 5px solid #4a1508;
        margin: 0.5em 0;
        background-color: rgb(10 4 4 / 0%);
      }
      
      .addWindowHeader {
        text-align: left;
        background-color: #4a1508;
        padding: 5px;
      }
      
      .addWindowMain {
        padding: 15px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        gap: 1em;
      }
      
      .addWindowMain > span {
        line-height: 1.5;
      }
      
      .windowCaption {
        width: 95%;
        max-width: 700px;
        margin: 0.5em auto;
      }
      
      .buttonRow {
        display: flex;
        justify-content: space-evenly;
        margin: 0.5em 0;
      }
      
      .buttonGeneric {
        width: 25%;
        font-family: "BrainWants", sans-serif;
        font-size: 1em;
        padding: 0.5em;
        color: #ffcb3b;
        background-color: #4a1508;
        border: 2px solid;
        border-color: rgb(154 68 30 / 0%);
        transition-delay: 0.025s;
        transition-duration: 0.25s;
      }

      .buttonGeneric:hover {
        color: #fff1cc;
        border: 2px solid;
        border-color: #eb7e2a;
      }
      
      .sidebarLeft {
        background: #0a0404;
        background-color: rgb(10 4 4 / 90%);
        background-attachment: local;
        border-style: none solid none none;
        border-width: 0 5px 0 0;
        border-color: #4a1508;
        padding: 15px;
        text-align: center;
        grid-column-end: leftgap;
        grid-row-start: row-a;
        grid-row-end: row-b;
      }
      
      .sidebarRight {
        background: #0a0404;
        background-color: rgb(10 4 4 / 90%);
        background-attachment: local;
        border-style: none none none solid;
        border-width: 0 0 0 5px;
        border-color: #4a1508;
        padding: 15px;
        text-align: center;
        grid-column-start: rightbar;
        grid-row-start: row-a;
        grid-row-end: row-b;
      }
      
      .sidebarContain {
        top: 15px;
        position: sticky;
      }
      
      .sidebarContents {
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        min-height: calc(100vh - 15px - 1em);
      }
      
      .navTitle {
        font-size: 2em;
        display: block;
        font-family: "BrainWants", sans-serif;
      }
      
      .navBoxSolo {
        height: 50vh;
        overflow-x: auto;
        overflow-y: scroll;
      }
      
      .navBoxSolo > p {
        padding: 1em;
        line-height: 1.5;
      }
      
      .navBoxMulti {
        height: 30vh;
        overflow-x: auto;
        overflow-y: scroll;
      }
      
      .navBoxMulti > p {
        padding: 1em;
        line-height: 1.5;
      }
      
      .kofiBox {
        height: 20vh;
      }
      
      .kofiBox > p {
        padding: 0 0.5em;
        line-height: 1.5;
        font-size: clamp(0.875rem, 0.125rem + 0.9375vw, 1.25rem);
      }
      
      .kofiBox > img {
        object-fit:contain;
        width:100%;
      }
      
      .navPolyContain {
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        align-items: center;
        height: 60vh;
        padding: 1em;
        gap: 1em;
      }
      
      .navPoly {
        background: #4a1508;
        background-image: none;
        clip-path: polygon(90% 0, 100% 40%, 100% 100%, 10% 100%, 0 60%, 0 0);
        padding: 1em;
        text-align: center;
        transition-delay: 0.025s;
        transition-duration: 0.25s;
        border: 2px solid;
        border-color: rgb(154 68 30 / 0%);
        width: 80%;
        height: 3.5vh;
      }
      
      .navPoly a {
        height: 100%;
        width: 100%;
        font-size: clamp(1.125rem, -0.0978rem + 1.9565vw, 2.25rem);
        display: block;
        font-family: "BrainWants", sans-serif;
      }
      
      .collectNav > a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: clamp(1.125rem, 0.7174rem + 0.6522vw, 1.5rem);
      }
      
      .collectNav > a > span {
        font-size: 66%;
      }
      
      .desktopLogo {
        width: 100%;
      }
      
      .subHeader {
        background: #0a0404;
        background-color: rgb(10 4 4 / 80%);
        padding: 15px;
        border: 5px solid #4a1508;
        width: calc(100% - 40px);
      }
      
      .subBottomRow {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0.5em 0 0;
        gap: 2rem;
      }
      
      .subScrollBar {
        border: 2px solid #4a1508;
        width: 35vw;
        padding: 5px;
        height: 100%;
        overflow: hidden;
        white-space: nowrap;
        display: flex;
      }
      
      .subScrollItem {
        font-family: "FreudianSlit", sans-serif;
        font-size: 2em;
        padding: 5px 0.5em 5px 5px;
        animation: subScrollText 10s linear infinite
      }
      
      @keyframes subScrollText {
        from {
            transform: translateX(0%);
        }
        to {
          transform: translateX(-100%);
        }
		  }
		  
		  @media (prefers-reduced-motion: reduce) {
        .subScrollBar {
          display: none;
        }
      }

/* home page elements */

		  .homeContain {
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
		    height: 100%
		  }
		  
		  .homeNew {
		    display: flex;
		    flex-direction: column;
		    width: 55%;
		  }
		  
		  .homeTitle {
		    font-size: 2em;
        display: block;
        font-family: "BrainWants", sans-serif;
		  }
		  
		  .homeNewHeader > p {
        padding: 0.25em 0;
        line-height: 1.5;
      }
      
      .homeNewScroll {
        display: flex;
        flex-direction: column;
        overflow-y: scroll;
        border: 5px solid #4a1508;
        padding: 5px;
        gap: 1.5em;
        height: 66vh;
      }
      
      .homeNewEntry {
        display: flex;
        justify-content: space-between;
        border: 2px solid #4a1508;
      }
      
      .homeNewEntry > img {
        width: 10vw;
        height: 10vw;
        max-width: 700px;
        border-width: 0 2px 0 0;
        border-style: none solid none none;
        border-color: #4a1508;
      }
      
      .homeNewEntryText {
        padding: 0.5em;
        width: 15vw;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
      }
      
      .homeNewEntryText > p {
        line-height: 1.5;
        padding: 0.5em 0 0;
        font-size: clamp(0.875rem, 0.375rem + 0.625vw, 1.125rem);
      }
      
      .homeNewTitle {
        font-size: clamp(1.125rem, 0rem + 1.4063vw, 1.6875rem);
        display: block;
        font-family: "BrainWants", sans-serif;
      }
      
		  .homeText {
		    width: 40%;
		  }
		  
		  .homeText > p {
        padding: 0.75em 0;
        line-height: 1.5;
      }
      
/* zone navigational page elements */

      .zoneContain {
        display: flex;
        flex-direction: column;
        overflow-y: scroll;
        padding: 5px;
        gap: 1.5em;
        height: 66vh;
      }
      
      .zoneContain > a:nth-child(even) .zoneEntry {
        flex-direction: row-reverse;
      }

      .zoneContain > a:nth-child(even) .zoneEntry > img {
        border-width: 0 0 0 5px;
        border-style: none none none solid;
        border-color: #4a1508;
      }
      
      .zoneContain > a:nth-child(even) .zoneEntry > .zoneEntryText > .zoneEntryHeader {
        align-self: flex-end;
        text-align: end;
      }
      
      .zoneEntry {
        display: flex;
        justify-content: space-between;
        border: 5px solid #4a1508;
      }
      
      .zoneEntry > img {
        width: 200px;
        height: 200px;
        border-width: 0 5px 0 0;
        border-style: none solid none none;
        border-color: #4a1508;
      }
      
      .zoneEntryText {
        padding: 0.5em;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
      }
      
      .zoneEntryHeader {
        align-self: flex-start;
        text-align: start;
      }
      
      .zoneEntryTitle {
        font-size: clamp(1.125rem, 0rem + 1.4063vw, 1.6875rem);
        display: block;
        font-family: "BrainWants", sans-serif;
      }
      
      .zoneEntryText > p {
        line-height: 1.5;
        padding: 0.5em 0 0;
        font-size: clamp(0.875rem, 0.375rem + 0.625vw, 1.125rem);
      }
      
/* mobile elements */     
 
      .mobileHeader {
        background: #0a0404;
        background-color: rgb(10 4 4 / 90%);
        background-attachment: local;
        border: 5px solid #4a1508;
        top: 0;
        height: 5.75vh;
        padding: 5px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        z-index: 2;
      }

      .mobileLogo {
        max-width: 66%;
        max-height: 100%;
      }
      
      .mobileButton {
        width: 25%;
        height: 66%;
        font-family: "BrainWants", sans-serif;
        font-size: clamp(1rem, 0.7595rem + 0.9792vw, 1.5rem);
        color: #ffcb3b;
        background-color: #4a1508;
        border: 1px solid;
        border-color: rgb(154 68 30 / 0%);
        transition-duration: 0.25s;
      }
      
      .mobileImageContain {
        background: #0a0404;
        background-color: rgb(10 4 4 / 90%);
        background-blend-mode: overlay;
        backdrop-filter: blur(1px);
        min-height: 100vh;
        min-width: 100vw;
        z-index: 3;
        position: fixed;
        top: 0;
        left: 0;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        display: none;
      }
      
      .mobileImage {
        text-align: center;
      }
      
      .mobileImage > img {
        object-fit: contain;
        border: 5px solid #4a1508;
        max-width: 95vw;
        max-height: 60vh;
      }
      
      .mobileImage > p {
        font-size: 16px;
        padding: 0.5rem 1rem;
        line-height: 1.5;
      }
      
      .mobileNav {
        background: #0a0404;
        background-color: rgb(10 4 4 / 90%);
        background-blend-mode: overlay;
        backdrop-filter: blur(1px);
        min-height: 100vh;
        min-width: 100vw;
        z-index: 1;
        position: fixed;
        top: 0;
        left: 0;
        display: none;
      }
      
      .mobileNavContain {
        position: fixed;
        top: 7.75vh;
        padding: 15px 0;
        flex-direction: column;
        justify-content: center;
        display: flex;
      }
      
      .navBoxMobile {
        height: calc(92.25vh - 30px);
        overflow-x: auto;
        overflow-y: scroll;
      }
      
      .navBoxMobile > p {
        padding: 1em;
        line-height: 1.5;
      }
      
      .mobileTitle {
        font-size: 1.25em;
      }
      
/* collection page elements */
      
      .collectionHeader {
        margin: 0 0 0.75em 0;
      }
      
      .imageFlex {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
      }
      
      .imageFlex > p {
        padding: 0.75em 0;
        line-height: 1.5;
        width: 40%;
        position: relative;
      }
      
      .imageFlex > span {
        padding: 0.75em 0;
        line-height: 1.5;
        width: 40%;
        position: relative;
      }
      
      .imageFlex img {
        width: 55%;
        max-width: 450px;
        border-style: solid;
        border-width: 5px;
        border-color: #4a1508;
        margin: 0 1em 0 0;
      }
      
      .imageFlex .imgTall {
        width: 35%;
      }
      
      .imageReverse {
        flex-direction: row-reverse;
      }
      
      .imageReverse img {
        margin: 0 0 0 1em;
      }
      
      .imageCaption {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      
      .imageFlex > .imageCaption {
        width: 55%;
        margin: 0 1em 0 0;
      }
      
      .imageCaption > img {
        width: 100%;
        max-width: 450px;
        border-style: solid;
        border-width: 5px;
        border-color: #4a1508;
        margin: 0 0 0 0;
      }
      
      .imageCaption > a {
        padding: 0.75em;
      }
      
      .imageReverse > .imageCaption {
        margin: 0 0 0 1em;
      }
      
      .buttonRow:has(.owlNav) {
        justify-content: space-between
      }
      
      .owlNav {
        width: 1em;
        vertical-align: middle;
      }
      
      .buttonRow:has(.owlNav) > a:nth-child(1) > img {
        transform: rotate(90deg);
      }

       .buttonRow:has(.owlNav) > a:nth-child(3) > img {
        transform: rotate(-90deg);
      }
      
/* full-sized screen rules */     
      @media screen and (width >= 1000px) {
        .mobileHeader {
          display: none;
        }
        
        .mobileNav {
          display: none;
        }
        
        .mobileImageContain {
          display: none;
        }
        
        .navPoly:hover {
        clip-path: polygon(100% 0, 100% 60%, 90% 100%, 0 100%, 0 40%, 10% 0);
        background-color: #9a441e;
        background-image: url('/SiteImages/HYPERFIXTLiquidWebsiteBackground.png');
        background-position: center;
        background-size: cover;
        background-blend-mode: multiply;
        border: 2px solid #eb7e2a;
        }

        .navPoly:active {
          clip-path: polygon(100% 0, 100% 60%, 90% 100%, 0 100%, 0 40%, 10% 0);
        }
  
        .navPoly:focus {
          clip-path: polygon(100% 0, 100% 60%, 90% 100%, 0 100%, 0 40%, 10% 0);
        }

      }
      
/* mobile screen rules */ 
      @media screen and (width < 1000px) {
        body {
          background-image: none;
          background: linear-gradient(#0a0404, #1a0805, #0a0404, #1a0805, #0a0404);
        }
        
        .sidebarLeft {
          display: none;
        }
        .sidebarRight {
          display: none;
        }
        
        .subHeader {
          display: none;
        }
        
        .mainBody {
          grid-column-start: leftgap;
          grid-column-end: rightbar;
        }
        
        .mainBody:nth-child(3) {
          margin: 1em 0;
        }
        
        .desktopLogo {
          display:none;
        }
        
        .textLeft {
          text-align: center;
        }
        
        .textRight {
          text-align: center;
        }
        
        .textWindow img {
          float: none !important;
          width: 95%;
          max-width: 700px;
          margin: 0 !important;
        }
        
        .textWindow > .imgSide {
          width: 95%;
          max-width: 700px;
        }
        
        .textWindow iframe {
          float: none !important;
          width: 95% !important;
          margin: 1em 0 !important;
        }
        
        .hoverText {
          color: #fff2e8;
        }
        
        .hoverImage {
          display: none !important;
        }
        
        .navPoly > a {
          font-size:clamp(1.5rem, 0.5rem + 1.25vw, 2rem);
        }
        
        .homeContain {
          flex-direction: column;
          justify-content: space-evenly;
        }
        
        .homeNew {
          width: auto;
        }
        
        .homeNewHeader > p {
          display: none;
        }
        
        .homeNewScroll {
          height: auto;
          border: none;
        }
        
        .homeNewScroll > a:nth-child(n+2) {
          display: none;
        }
        
        .homeNewEntry {
          flex-direction: column;
          border: 5px solid #4a1508;
        }
        
        .homeNewEntry > img {
          width: 100%;
          height: auto;
          border-width: 0 0 5px 0;
          border-style: none none solid none;
          border-color: #4a1508;
        }
        
        .homeNewEntryText {
          width: auto;
        }
        
        .homeText {
          width: auto;
        }
        
        .zoneEntry {
          flex-direction: column;
        }
        
        .zoneContain > a:nth-child(2n) .zoneEntry {
          flex-direction: column;
        }
        
        .zoneEntry > img {
          width: 100%;
          height: auto;
          border-width: 0 0 5px 0;
          border-style: none none solid none;
          border-color: #4a1508;
        }
        
        .zoneContain > a:nth-child(2n) .zoneEntry > img {
          width: 100%;
          height: auto;
          border-width: 0 0 5px 0;
          border-style: none none solid none;
          border-color: #4a1508;
        }
        
        .zoneEntryText > p {
          font-size: 18px;
        }
        
        .zoneEntryHeader {
          align-self: auto;
          text-align: center;
        }
        
        .zoneContain > a:nth-child(2n) .zoneEntry > .zoneEntryText > .zoneEntryHeader {
          align-self: auto;
          text-align: center;
        }
        
        .diffRating {
          display: none;
        }
        
        .imageFlex {
          flex-direction: column;
          margin: 0 !important;
        }
        
        .imageFlex > p {
          width: auto;
        }
        
        .imageFlex > .imgTall {
          width: 95%;
          max-width: 700px;
        }
        
        .imageFlex > .imageCaption {
          width: 95%;
          max-width: 700px;
          margin: 0 !important;
        }
        
        .imageCaption > a {
          padding: 0.75em 0.75em 0;
        }
        
        .owlNav {
          display: none;
        }

      }