/* Figozo Static Site - Base CSS */
/* This file will be replaced with compiled Tailwind CSS */

/* Custom font-face for GD Boing Bold */
@font-face {
  font-family: 'GD Boing Bold';
  src: url('../fonts/2d8cf0a1ae3cf90fc45730a9e56b1db2.eot');
  src:
    url('../fonts/2d8cf0a1ae3cf90fc45730a9e56b1db2.eot?#iefix') format('embedded-opentype'),
    url('../fonts/2d8cf0a1ae3cf90fc45730a9e56b1db2.woff2') format('woff2'),
    url('../fonts/2d8cf0a1ae3cf90fc45730a9e56b1db2.woff') format('woff'),
    url('../fonts/2d8cf0a1ae3cf90fc45730a9e56b1db2.ttf') format('truetype');
}

/* Scrollbar styles */
.slimscroll::-webkit-scrollbar {
  width: 6px;
}
.slimscroll::-webkit-scrollbar-thumb {
  border-radius: .75rem;
  background: rgba(0, 0, 0, 0.1);
}

/* Mask utilities */
.mask {
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
.mask-hexed {
  mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgyIiBoZWlnaHQ9IjIwMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNLjMgNjUuNDg2YzAtOS4xOTYgNi42ODctMjAuMDYzIDE0LjIxMS0yNS4wNzhsNjEuODYtMzUuOTQ2YzguMzYtNS4wMTYgMjAuODk5LTUuMDE2IDI5LjI1OCAwbDYxLjg2IDM1Ljk0NmM4LjM2IDUuMDE1IDE0LjIxMSAxNS44ODIgMTQuMjExIDI1LjA3OHY3MS4wNTVjMCA5LjE5Ni02LjY4NyAyMC4wNjMtMTQuMjExIDI1LjA3OWwtNjEuODYgMzUuOTQ1Yy04LjM2IDQuMTgtMjAuODk5IDQuMTgtMjkuMjU4IDBsLTYxLjg2LTM1Ljk0NUM2LjE1MSAxNTcuNDQuMyAxNDUuNzM3LjMgMTM2LjU0VjY1LjQ4NnoiLz48L3N2Zz4=');
}
.mask-blob {
  mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAweiIvPjwvc3ZnPg==');
}

/* Placeload animation */
.placeload {
  position: relative;
  background: linear-gradient(to right, rgb(0 0 0 / 7%) 8%, rgb(0 0 0 / 15%) 18%, rgb(0 0 0 / 7%) 33%);
  background-size: 800px 104px;
  color: transparent !important;
  animation: placeload 1s linear infinite forwards;
}
.dark .placeload {
  background: linear-gradient(to right, rgb(255 255 255 / 15%) 8%, rgb(255 255 255 / 24%) 18%, rgb(255 255 255 / 15%) 33%);
}
@keyframes placeload {
  0% { background-position: -468px 0; }
  100% { background-position: 468px 0; }
}

/* Accessibility focus styles */
.tw-accessibility:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}