@ Rules

@import url('fonts.css');

@charset "iso-8859-1";

@font-face {
  font-family: Santiago;
  src: local("Santiago"), url("santiago.tt") format("truetype");
  src: url("santiago.woff2"); /* supported everywhere */
  unicode-range: U+??,U+100-220;
  font-size: all;
  font-family: sans-serif;
  font-display: swap;
}

@keyframes fade-in {
  to { opacity: 1; }
}

@supports (hover: hover) { 
  
}

@supports (aspect-ratio: 1 / 1) { 
  .square {
    aspect-ratio: 1 / 1;
  }
}

@supports (display: grid) {

}

@supports selector(:focus-visible) {
   
}

@supports (-webkit-hyphens: none) { /* Safari only */ }
@supports (-moz-appearance: none) { /* Firefox only */ }
@supports (-webkit-tap-highlight-color: black) { /* Chrome, Edge, Opera only */ }

@media (dynamic-range: high) {
   @supports (color(display-p3 0 .5 1)) {
     :where(html) {
       --link: color(display-p3 0 .5 1);
       --link-visited: color(display-p3 .6 .2 1);
     }
   }
}

@supports selector(:focus-visible) {
  .custom-button:focus {
    /* Remove the focus indicator on mouse-focus for browsers
       that do support :focus-visible */
    outline: none;
    background: transparent;
  }
}

@media screen and (max-aspect-ratio: 3/4) {  }
@media screen and (orientation: landscape) {  }

@media (prefers-reduced-motion: no-preference) {}
@media (prefers-reduced-motion: reduce) {}

@media (prefers-reduced-transparency: no-preference) {}
@media (prefers-reduced-transparency: reduce) {}

@media (prefers-reduced-data: no-preference) {}
@media (prefers-reduced-data: reduce) {}

@media (prefers-contrast: more) {}
@media (prefers-contrast: less) {}

@media (prefers-color-scheme: dark) {}
@media (prefers-color-scheme: light) {}

@media (orientation: portrait) {}
@media (orientation: landscape) {}

@media (inverted-colors) {}

@media (dynamic-range: high) {}

@media (pointer: fine) { /* ok to use small buttons/controls */ }
@media (hover: hover) { /* ok to use :hover-based menus */ }
@media (pointer: coarse) { /* make buttons and other “touch targets” bigger */ }
@media (hover: none), (hover: on-demand) { /* suppress :hover-based menus */ }

/* It targets only the app used within the browser */
@media (display-mode: browser) {  }
/* It targets only the app used with a system icon in standalone mode */
@media (display-mode: standalone) {  }
/* It targets only the app used with a system icon in all modes */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {  }

.card {
  contain: size layout;
}

@container (max-width: 850px) {
  .links {
    display: none;
  }

  .time {
    font-size: 1.25rem;
  }

  /* ... */
}

.card-container {
  contain: inline-size / card-wrap;
}

@container card-wrap size(min-width: 850px) {
  .card {
    /* ... */
  }
}

1qw
1qh
1qi
1qb
1qmin
1qmax

@layer A, B;

@import url('framework.css') layer(A.nested-layer);

@layer A {
  section {
    background-color: red;
  }
}
@layer B {
  section {
    background-color: red;
  }
}

@scroll-timeline scolling {
  source: selector(body);
  scroll-offsets: selector(#horizontal-move) start 1,
              selector(#horizontal-move) end 1;
  start: 0;
  end: 100%;
  time-range: 1s;
}

@keyframes move {
  to {
    transform: translateX(calc(-100% + 100vw));
  }
}

#horizontal-move {
  animation: 1s move forwards;
  animation-timeline: scrolling;
}