@layer base {
    * {
        @apply antialiased;
    }

    div, section, header, footer, main {
        @apply border border-black border-solid;
    }
}
html {
    font-size: 18px;
}

body {
    font-family: 'Bliss', sans-serif;
}

@font-face {
    font-family: 'Bliss';
    src: url('../webfonts/bliss/Bliss.woff2') format('woff2'),
    url('../webfonts/bliss/Bliss.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.section-with-pattern {
    position: relative;
    z-index: 0;
}

.section-with-pattern::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    height: 30px;
    background-color: #ffffff;
    background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'>\
  <g fill='%23E56A1F'>\
    <!-- rotate whole mark to match screenshot -->\
    <g transform='rotate(-35 13 13)'>\
      <!-- LEFT (2 bars) -->\
      <rect x='2'  y='11'   width='9' height='2.4' rx='1.2'/>\
      <rect x='2'  y='14.6' width='9' height='2.4' rx='1.2'/>\
      <!-- RIGHT (2 bars) -->\
      <rect x='15' y='11'   width='9' height='2.4' rx='1.2'/>\
      <rect x='15' y='14.6' width='9' height='2.4' rx='1.2'/>\
      <!-- MIDDLE (2 diagonal bars) -->\
      <rect x='9.0'  y='8.2' width='2.4' height='9.6' rx='4.2' transform='rotate(180 13 13)'/>\
      <rect x='12.6' y='8.2' width='2.4' height='9.6' rx='4.2' transform='rotate(180 13 13)'/>\
    </g>\
  </g>\
</svg>");
    background-repeat: repeat;
    opacity: 0.88;
    pointer-events: none;
}


.top-pattern {
    position: relative;
    overflow: hidden;
}

.top-pattern::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:20px;
    background:#ffffff;
    background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'>\
  <g fill='%23E56A1F'>\
    <!-- rotate whole mark to match screenshot -->\
    <g transform='rotate(-35 13 13)'>\
      <!-- LEFT (2 bars) -->\
      <rect x='2'  y='11'   width='9' height='2.4' rx='1.2'/>\
      <rect x='2'  y='14.6' width='9' height='2.4' rx='1.2'/>\
      <!-- RIGHT (2 bars) -->\
      <rect x='15' y='11'   width='9' height='2.4' rx='1.2'/>\
      <rect x='15' y='14.6' width='9' height='2.4' rx='1.2'/>\
      <!-- MIDDLE (2 diagonal bars) -->\
      <rect x='9.0'  y='8.2' width='2.4' height='9.6' rx='4.2' transform='rotate(180 13 13)'/>\
      <rect x='12.6' y='8.2' width='2.4' height='9.6' rx='4.2' transform='rotate(180 13 13)'/>\
    </g>\
  </g>\
</svg>");
    background-repeat: repeat;
    /* density: smaller = tighter */
    background-size: 22px 22px;
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
    /*-webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);*/
    /*mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);*/
}
.top-pattern > * {
    position: relative;
    z-index: 1;
}