@charset 'UTF-8';

@import 'reset';

@viewport {
  width: device-width;
}

html {
  // display
  display: var(--display);
}

*, :after, :before {
  // color
  color: var(--color);
  
  // background
  background-attachment: var(--background-attachment); 
  background-blend-mode: var(--background-blend-mode); 
  background-clip: var(--background-clip); 
  background-color: var(--background-color);
  background-image: var(--background-image, none);
  background-origin: var(--background-origin); 
  background-position: var(--background-position); 
  background-repeat: var(--background-repeat); 
  background-size: var(--background-size); 
  
    // font 
  font-style: var(--font-style);
  font-variant: var(--font-variant);
  font-weight: var(--font-weight);
  font-size: var(--font-size);
  font-family: var(--font-family);
  font-size-adjust: var(--font-size-adjust);

  // text-decoration
  text-decoration-line: var(--text-decoration-line);
  text-decoration-style: var(--text-decoration-style);
  text-decoration-color: var(--text-decoration-color);

  // margin & padding
  margin: var(--margin);
  padding: var(--padding);
  
  // border
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--border-color);
  border-radius: var(--border-radius);

  // column
  column-rule-width: var(--column-rule-width);
  column-rule-style: var(--column-rule-style);
  column-rule-color: var(--column-rule-color);
  column-gap: var(--column-gap); 
  column-span: var(--column-span); 
  column-width: var(--column-width);
  column-count: var(--column-count);

  // list
  list-style-type: var(--list-style-type); 
  list-style-position: var(--list-style-position);
  list-style-image: var(--list-style-image);

  // autre
  hyphens: var(--hyphens);
  letter-spacing: var(--letter-spacing);
  word-spacing: var(--word-spacing);
  white-space: var(--white-space);
  line-height: var(--line-height);
  overflow: var(--overflow, auto);
  vertical-align: baseline;

}

body {
  min-height: 90vh;
}

article, aside, details, div, figcaption, figure, footer,
header, main, menu, nav, section, summary {
  --display: block;
}

canvas, iframe, img, svg, video  {
  --border-style: none;
  --display: inline-block;
  width: 100%;
  height: auto;
}

h1 { --margin: 0; }