*,
*::before,
*::after {
  box-sizing:border-box;

  font-family:'Open Sans', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smooth: auto;
  line-height:1.6;
}

*::selection {
  background-color: var(--bg-selection);
  color:var(--clr-selection);
}



/********/
/* HTML */
/********/

html {
  background-color:var(--bg);
  
  color:var(--clr);
  font-size:calc(1em * (1 + var(--setting-fontsize-factor)) );
}

[data-reduced-motion="no-preference"] {
  transition:font-size .2s;
}

body {
  container-type:inline-size;
  container-name:--container--body;
  
  margin:0;

  font-size:clamp(1em, .75em + .75vw, 1.2em);
}






/********/
/* GRID */
/********/

body {
  
  --grid-padding: clamp(1em, 5vw, 3.125em);
  --grid-gap: clamp(1em, 4vw, 2em);
  --grid-inset:3em;
  --grid-small:40em;
  --grid-side:10em;
  

  display: grid;

  grid-template-columns:
      [full-start]
    minmax(var(--grid-padding), 1fr)
      [xlarge-start large-start medium-start small-start] 
    minmax(0, var(--grid-inset))
      [inset-start] 
    min( 
      var(--grid-small) - var(--grid-inset), 
      100% - var(--grid-padding) * 2 
    )
      [small-end]
    minmax(0, var(--grid-gap))
      [side-start side-left-start] 
    minmax(0, var(--grid-side)) 
      [inset-end medium-end side-left-end] 
    minmax(0, var(--grid-gap))
      [side-right-start]
    minmax(0, var(--grid-side)) 
      [large-end side-end side-right-end]  
    minmax(var(--grid-padding), 1fr) 
      [full-end];
}





/****************/
/* SCREENREADER */
/****************/

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}