/*
IDEA:
* the black of the screen is litteraly the absence of light,
then the serif in white become an exact representation of the changing pattern
of moonlight through the tree
*/

:root{
  /* --- COLORS --- */

  /* --c-dark: hsl(60, 2%, 18%);
  --c-soft: hsl(60, 6%, 68%);
  --c-light: hsl(96, 18%, 92%); */

  /* from image sampling */
  /* char: low contrast, background on which we can put white */
  /* still we could switch the hue to either a blue or a redish */
  --c-dark: hsl(62, 8%, 16%); /* darker than sampling feel */
  --c-soft: hsl(62, 30%, 88%); /* back lit turn off on dark feel */
  --c-soft-text: hsl(62, 4%, 68%); /* back lit turn off on dark feel */
  --c-light: hsl(92, 36%, 90%);

  /* old color theme */
  /* --c-light: hsl(34, 44%, 82%);
  /* --c-light: hsl(48, 36%, 86%); */

  /* inverted */
  /* --c-dark: hsl(96, 20%, 94%);
  --c-soft: hsl(60, 6%, 40%);
  --c-light: hsl(60, 2%, 25%); */

  /* --- FONT-SIZES --- */
  --fs-display: clamp(3rem, 8vw, 7rem);

  /* --fs-big: 2.35rem; */
  --fs-big: 2.4rem;
  --fs-up: 1.35rem;

  --fs-mono-big: calc(var(--fs-big) * 1);  /* match title size */
  --fvs-mono-big: 'wght' 220, 'wdth' 100;

  --fs-mono: 0.725rem;
  /* --fs-mono: 0.75rem; */
  --fvs-mono: 'wght' 420, 'wdth' 140;

  --lh: 1.35rem;

  /* --- SPACES --- */
  /* --border-width: 0.08rem; */
  --border-width: 1.5px;
  --border: var(--border-width) solid var(--c-dark);
}

html{
  background: var(--c-light);

  /* background: linear-gradient(to bottom, var(--c-light), hsl(34, 44%, 82%)); */
  color: var(--c-dark);

  font-family: "unoversoneueGX";
  /* bigger than default (16px --> 20px) */
  font-size: 1.25em;
}

body{
  font-size: inherit;
  line-height: var(--lh);
}

/* link */
a,
a:visited{
  color: currentColor;
  /* text-decoration-thickness: var(--border-width); */
  text-decoration-thickness: 1px;
}
:is(a, a:visited):hover{
  text-decoration: none;
}

/* selection */
*::selection{
  background: white;
  color: var(--c-dark);
}

/* CONSTANT VERTICAL RYTHM
 =========================================================================== */

.text-content :is(h1,h2,h3,h4,h5,h6){
  margin: calc(var(--lh) * 2) 0 calc(var(--lh) * 0.5);
  font-size: var(--fs-big);
  line-height: calc(var(--lh) * 2);
}
.text-content p{
  margin: calc(var(--lh) * 1) 0;
}
.text-content :is(h1,h2,h3,h4,h5,h6) + p{
  margin: calc(var(--lh) * 0.5) 0;
}
.text-content ul{
  margin: calc(var(--lh) * 1) 0;
  padding-left: calc(var(--lh) * 1);
}
.text-content :is(p,blockquote):first-child{
  margin-top: 0;
}
.text-content :is(h1,h2,h3,h4,h5,h6):first-child{
  margin-top: calc(var(--lh) * 0.5);
}
.text-content :is(h1,h2,h3,h4,h5,h6,p,blockquote):last-child{
  margin-bottom: 0;
}

.text-content{
  max-width: 36em;
}

/* FONTS UTILITIES
 =========================================================================== */

/* mono */
.mono{
  font-family: 'Inconsolata', monospace;
  font-variation-settings: var(--fvs-mono);
  font-size: var(--fs-mono);
  line-height: 1.25;
}
.mono-big{
  font-family: 'Inconsolata', monospace;
  font-size: var(--fs-mono-big);
  font-variation-settings: var(--fvs-mono-big);
  line-height: calc(var(--lh) * 1.5);
}

/* bigger text */
.font-up{
  font-size: var(--fs-up);
}
.font-big{
  font-size: var(--fs-big);
  line-height: calc(var(--lh) * 1.5);
}

/* SECTIONS TITLES
 =========================================================================== */

/* section title */
section.data-section{
  position: relative;
  box-sizing: border-box;
  border-top: var(--border);
  padding: calc(var(--lh) * 2) 0 calc(var(--lh) * 3);
}
section.data-section::before{
  font-family: 'Inconsolata', monospace;
  /* font-variation-settings: 'wght' 460, 'wdth' 150; */
  font-variation-settings: var(--fvs-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
section.data-section::before {
	content: attr(data-box-title);
	background: var(--c-dark);
	color: var(--c-light);
	position: absolute;
	top: calc(-1 * var(--border-width));
	left: 0;
	padding: 0.2em calc(var(--lh) / 2);
	display: flex;
	align-items: center;
	outline: calc(var(--lh) / 2) solid var(--c-light);
  line-height: 1.25;
}

/* INTRO TEXT
 =========================================================================== */

/* first sentence */
#about-section .about-box > p:first-child{
  font-size: var(--fs-up);
  margin-bottom: 0;
  line-height: 1.1;
}

#about-section .bio-box > p:first-child{
  margin-top: calc(var(--lh) * 1);
}

/* FOOTER
 =========================================================================== */

body > footer{
  background: var(--c-soft);
  font-size: 0.625rem !important;
  border-top: var(--border);
  /* text-align: right; */
  
  display: grid;
  grid-template-columns: 1fr 1fr;
}
body > footer > .additionnal-info{
  border-right: var(--border);
  color: var(--c-soft-text);
}
body > footer > *{
  padding: var(--lh);
}

@media only screen and (max-width: 600px) {
  body > footer{
    grid-template-columns: 1fr;
  }
  body > footer > .additionnal-info{
    border-right: none;
    border-bottom: var(--border);
  }
}

/* RESPONSIVENESS
 =========================================================================== */

@media only screen and (max-width: 600px) {
  html{
    font-size: 1.125em;
  }
}