@font-face { 
  font-family: "Singlex"; 
  src: url("Singlex.woff2") format("woff2"); 
  descent-override: 0%;
  ascent-override: 100%;
}
@font-face { 
  font-family: "Singlex-mid"; 
  src: url("Singlex.woff2") format("woff2"); 
}
* {
  margin: 0;
  box-sizing:border-box
}
html, body {
  height:100%;
  font-family:"Singlex";
  letter-spacing:0.1em;
  line-height:1.4;
}
body {
  background:black;
  color:rgb(255, 170, 0);
  height:100%;
  display:flex;
  flex-direction:row-reverse;
}

/* layout */
main,aside {
  height:100%;
}
main {
  overflow:auto;
  width:100%;
  flex:1;
}
aside {
  flex-basis:250px;
}
.content {
  display:grid;
  grid-template-columns: repeat( auto-fill, minmax(var(--grid-size, 200px), 1fr) );
  grid-auto-rows: min-content;
  gap:1rem;
  overflow-y:auto;
  padding:10px;
  &:has(.pan-zoom-image-wrapper) {
    display:block;
  }
}

/* general */

figcaption {
  font-size:0.8rem;
  word-break:break-all;
  color:#aaa;
}
img {
  max-width:100%;
}
a {
  color:#ffee00;
  text-decoration:none;
}
.image {
  img {
    object-fit:contain;
  }
  ul {
    list-style:none;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    li {
      border:1px solid color-mix(in srgb-linear, #ffffff 0%, var(--color, #aaa) 70%);
      border-radius:4px;
      font-size:0.8rem;
      a {
        height:100%;
        width:100%;
        color:white;
        display:flex;
        align-items:center;
        padding:0.5em;
        font-family:"Singlex-mid", monospace;
        span {
          background:white;
          margin-right:10px;
          svg {
            height:16px;
            width:16px;
            display:block;
            fill:red;
          }
          &:hover {
            background:orange;
          }
        }
      }
    }
  }
}

/* sidebar */
aside {
  --localImageCount: 1;
  --globalImageCount: 1;
  .shapeContainer:last-child {
    padding:5px;
    overflow:auto;
  }
  details {    
    margin-top:1rem;
    --groupTotal: 1;
    summary {
      border:1px solid color-mix(in srgb-linear, #ffffff 0%, var(--color, #aaa) 70%);
      background:#333;
      padding:0 4px 2px 4px;
      border-radius:4px;
      cursor:pointer;
    }
    ul {
      list-style:none;
      padding:0;
      li {
        border-bottom:0.5px solid #333;
        text-shadow:0 0 4px black, 0 0 3px black, 0 0 2px black, 0 0 1px black;
        margin-bottom:2px;
        /*background:
          linear-gradient(
            to left,
            color-mix(in srgb-linear, #ffffff 0%, var(--color, #aaa) 50%)  calc(var(--localTagCount) / var(--groupTotal) * 100%), 
            transparent 0 100%
          )
        ;*/
        background:
         linear-gradient(
            to left,
            transparent  calc(var(--localTagCount) / var(--groupTotal) * 100%), 
            black 0 100%
          ),
          linear-gradient(
            color-mix(in srgb-linear, black 50%, var(--color, #aaa) 30%), 
            transparent 30% 70%, 
            color-mix(in srgb-linear, black 50%, var(--color, #aaa) 30%) 
          ),
          repeating-conic-gradient(
            color-mix(in srgb-linear, black 30%, var(--color, #aaa) 100%), 
            black, 
            color-mix(in srgb-linear, black 50%, var(--color, #aaa) 100%) 0.1turn
          )
        ;
        background-size:100% 100%, 25px 100%, 25px 100%;

        span {
          color:#aaa;
          font-size:0.8em;
        }
        &.selected {
          span:first-child {
            background:white;
            svg {
              height:32px;
              width:32px;
              display:block;
              fill:red;
            }
            &:hover {
              background:orange;
            }
          }
          a {
            font-family:"Singlex-mid", monospace;
            display:flex;
            color:white;
            align-items:center;
            gap:10px;
          }
        }
      }
    }
  }
  .logo {
    h1 {
      font-size:1.25rem;
      text-align:center;
      margin:1rem 0;
      span {
        color:#aaa;
        font-size:0.8rem;
      }
    }
  }
}


/* single page */
.pan-zoom-image-wrapper {
  display:flex;
  height:100%;
  width:100%;
}

/* PATTERNS */

.grid-container {
	height: 100%;
	width: 100%;
	display: grid;
	position: relative;
  grid-template-columns: 10px repeat(48, 1fr) 10px; 
  grid-template-rows: 10px repeat(48, 1fr) 10px;
}
.vertical-border {
  background:
    linear-gradient(
      to right,
      black, transparent 30% 70%, black 
    ),
    radial-gradient(
      circle closest-side, 
      white, 
      black, 
      transparent
    ),
    repeating-conic-gradient(
      white, black, white 0.1turn
    )
  ;
  background-size:100% 2rem;
}
.horizontal-border {
  background:
    linear-gradient(
      black, transparent 30% 70%, black 
    ),
    radial-gradient(
      circle closest-side, 
      white, 
      black, 
      transparent
    ),
    repeating-conic-gradient(
      white, black, white 0.1turn
    )
  ;
  background-size:2rem 100%
}
.corner {
  background:
    linear-gradient(
      to right,
      black, transparent 40% 60%, black 
    ),
    linear-gradient(
      black, white 40% 60%, black
    )
  ;
}