/************* 
* Box Sizing *
**************/
html {
  box-sizing: border-box;
  tab-size: 2;
  overflow-wrap: break-word;
}

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

/*********************
* Remove default margin and paddings *
*********************/
* {
  margin: 0;
  padding: 0;
  border-width: 0;
  border-style: solid;
}

pre {
  white-space: pre-wrap;
}

/*********************
* Avoid text overflows *
*********************/
:target {
  scroll-margin: 2rlh;
}

/* Chilled out text underlines */
/* https://frontendmasters.com/blog/chilled-out-text-underlines/ */
a {
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, currentcolor, transparent 33%);
}

/*********************
* Lists *
*********************/
ul {
  list-style: none;
}

/*********************
* Better defaults for media elements *
*********************/
img,
video,
object,
embed,
svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

picture {
  display: flex;
  justify-content: center;
}

/* These elements should not have height:auto */
iframe,
canvas {
  display: block;
  max-width: 100%;
}

svg {
  flex-shrink: 0; /* Prevents SVG from being squished when used as flexbox descendant */
  box-sizing: content-box; /* Prevents SVG from being squished when adding padding values */

  /* Default SVG dimensions. Override as necessary */
  width: var(--svg-width, auto);
  height: var(--svg-height, auto);
}

hr {
  height: 1px;
  background-color: var(--border-color, black);
}

/*********************
* The hidden attribute *
*********************/
[hidden] {
  display: none !important;
  opacity: 0;
  visibility: hidden;
}

/*********************
* Noscript *
*********************/
noscript {
  display: block;
  margin-block: 1em;
}