/*
  inspiration:
  1. https://www.joshwcomeau.com/css/custom-css-reset/
  2. https://piccalil.li/blog/a-more-modern-css-reset/
 */


/*
  Remove default margin
  Use a more-intuitive box-sizing model
*/
*
{
  margin: 0;
  box-sizing: border-box;
}

/*
  Use a more-intuitive box-sizing model.
*/
*::before, *::after
{
  box-sizing: border-box;
}

/*
  Templates are always invisible
 */
template
{
  display: none;
}

/*
  Typographic tweaks!
  Add accessible line-height
  Improve text rendering
*/
body
{
  line-height: 1.5;
  /*-webkit-font-smoothing: antialiased;*/
  width: 100%;
  max-width: 100%;
  text-rendering: optimizelegibility;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  font-feature-settings: "lnum";
  font-variant-numeric: lining-nums;
  overflow-wrap: anywhere;
  /*hyphens: auto;*/
}

/*
  Prevent font size inflation
  Smooth scrolling (for anchor navigation)
 */
html
{
  text-size-adjust: none;
  scroll-behavior: smooth;
}

/*
  Improve media defaults
*/
img, picture, video, canvas, svg, object, embed, iframe
{
  display: inline-block;
  width: auto;
  height: auto;
  max-width: 100%;
}

/*
  Remove built-in form typography styles
*/
input, button, textarea, select
{
  font: inherit;
}

/*
  Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6
{
  overflow-wrap: break-word;
}

/*
  Balance text wrapping on headings
*/
h1, h2, h3, h4, h5, h6
{
//text-wrap: balance;
}

/*
  Remove default margin in favour of better control in authored CSS
*/
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd
{
  margin-block-end: 0;
}

/*
  Anything that has been anchored to should have extra scroll margin
*/
:target {
  scroll-margin-block: 5ex;
}

/*
  Text color for links
*/
a, a:any-link
{
  color: inherit;
}

/*
  Hidden attribute
*/
[hidden]
{
  display: none !important;
}

/*
  Show help cursor for abbrevations with an explanation
*/
abbr[title]
{
  cursor: help;
}

/*
  Remove default style for dialogs
*/
dialog
{
  margin: 0;
  padding: 0;
  border: none;
  max-width: none;
  max-height: none;
}

/*
  Disable animations for preferred reduced motion
 */
@media (prefers-reduced-motion: reduce)
{
  *, *::before, *::after
  {
    animation: none !important;
    transition-duration: 0s !important;
  }
}


:root {
  --color-text: #000;
  --color-text-dim: #555b5d;
  --color-bg: #0C4A4C;
  --color-accent: #6ea542;
  --font: 'Roboto';
  --font-size: min(calc(12px + 1vw), 17px);
}

@font-face
{
  font-family: 'Roboto';
  font-weight: 100 900;
  font-display: block;
  src: url('/assets/roboto.woff2') format("woff2");
}

html, body
{
  font-size: var(--font-size);
}

body
{
  color: var(--color-text);
  font-family: var(--font), sans-serif;
  line-height: 1.7;
  background: #eee;
  width: 100%;
  text-rendering: optimizelegibility;
  scroll-behavior: smooth;
  overflow-wrap: anywhere;
  height: 100%;
  min-height: 100lvh;
  font-feature-settings: "lnum";
  font-variant-numeric: lining-nums;
  display: flex;
  align-items: stretch;
}

p
{
  line-height: 1.7;
}

.logo
{
  width: 460px;
  max-width: 80vw;
  padding: 0 5rem;
  background: var(--color-bg);
}

.content
{
  width: 100%;
  background: white;
  padding: 7rem;
  max-width: 800px;
}

.block
{
  p
  {
    padding-left: 1em;
    border-left: 1px solid #ddd;
  }

  & + .block
  {
    margin-top: 2rem;
  }
}

a:any-link
{
  text-decoration-style: dotted;
}

h1
{
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-accent);
  margin-bottom: 2.5em;
  line-height: 1.3;
}

h2
{
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.5em;
}

@media (max-width: 1000px)
{
  body
  {
    flex-direction: column;
  }
  .logo
  {
    width: 100%;
    max-width: 100%;
    height: 90px;
    padding: 1.5rem 5rem;
  }
  .content
  {
    width: 100%;
    padding: 2.5rem 2rem;
    max-width: 100%;
  }
  h1
  {
    font-size: 1.25rem;
    margin-bottom: 1.5em;
  }
}