/* TODO: resize on mobile -> left-right margins? nav?*/

:root {
    /* fonts */
    --serif-font: sans-serif;
    /* --mono-font: monospace; */
    
    /* colors */
    --text-color: #303036;
    --bg-color: #ffffff;
    --bg-alt-color: #eff3ff;
    --border-color: #979797;
    
    --color1: #0074e8;
    --color2: #0088ff;
    --color3: #48a9ff;
    --color4: #bde0ff;
    --color5: #46a8ff;
    --color6: #73beff;
    --color7: #e0f3ff;    /*light */
    
    --tc-color: #f19e6d;

    --link-color: var(--color1);
    
    --special-color: var(--color2);
    --stripe1-color: var(--color4);
    --stripe2-color: var(--color6);     /* that one: soft */
    --stripe2-color: var(--color2);   /* or that one: flashy */
    
    /* --bg-pattern-color1: var(--color2); */
    --bg-pattern-color1: #ffffff;
    /* --bg-pattern-color2: var(--color6); */
    --bg-pattern-color2: var(--color4);
    
    --back-bg-color: var(--color4);
    
    --content-border-color: var(--color7);
}

html {
    font-family: var(--serif-font);
    color: var(--text-color);
}


/* layout: use a 3-cols grid, and put everything inside column 2 */
body {
    font-size: 1.1rem;
    line-height: 1.45;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr min(45rem, 90%) 1fr;
    background: url("rect_8-2_light.png");
    background-position-x: center;
}

/* layout on mobile: expand middle column */
/* @media only screen and (max-width: 720px) { */
/* @media only screen and (max-width: 400px) { */
/* @media only screen and (max-width: 1200px) { */
@media only screen and (max-device-width: 600px) {
  body {
    font-size: 2rem;
    line-height: 1.45;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 95% 1fr;
  }
}


body > * {
    grid-column: 2;
}


body > header {
    /* background-color: var(--bg-alt-color); */
    /* border-bottom: 1px solid var(--border-color); */
    /* /* grid-column: 1 / -1; */
    /* text-align: center; */
    
    text-align: center;
    border: 10px solid var(--stripe1-color);
    border-image: repeating-linear-gradient(
        45deg,
        var(--stripe1-color),
        var(--stripe1-color) 10px,
        var(--stripe2-color) 10px,
        var(--stripe2-color) 20px)
         10;
    padding: 10px;
    background-color: var(--bg-color);
}

body > header h1 {
  max-width: 1200px;
  font-weight: bold;
  margin: 0rem auto;
}

body > header p {
  max-width: 40rem;
  margin: 0.2rem auto 0.5rem auto;
}

body > header > nav {
    font-size: 1rem;
    /* padding: 1rem 0 1rem 0; */
    padding: 0.5rem 0 0.5rem 0;
}

@media only screen and (max-device-width: 600px) {
  body > header > nav {
      font-size: 2rem;
      /* padding: 1rem 0 1rem 0; */
      padding: 0.5rem 0 0.5rem 0;
  }
}

body > header > nav a {
    display: inline-block;
    /* margin: 0 0.5rem 0rem 0.5rem; */
    padding: 0.3rem 1rem;
    /* border: 1.5px solid var(--link-color); */
    /* text-decoration: none; */
}

body > main {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2rem;
    padding-bottom: 2rem;
    background-color: var(--bg-color);
    border-left: 2px solid var(--content-border-color);
    border-right: 2px solid var(--content-border-color);
}

body > footer > .footer-inner
{
    /* note: color order inverted to start with light, as the external border */
    border-top: 10px solid var(--stripe1-color);
    border-image: repeating-linear-gradient(
        45deg,
        var(--stripe2-color),
        var(--stripe2-color) 10px,
        var(--stripe1-color) 10px,
        var(--stripe1-color) 20px)
         10;
}

body > footer {
    background-color: var(--bg-color);
    /* border-top: 10px solid var(--stripe1-color); */
    /* border-image: repeating-linear-gradient( */
        /* 45deg, */
        /* var(--stripe1-color), */
        /* var(--stripe1-color) 10px, */
        /* var(--stripe2-color) 10px, */
        /* var(--stripe2-color) 20px) */
         /* 10; */
    text-align: center;
    font-size: 0.9rem;
    border-left: 2px solid var(--content-border-color);
    border-right: 2px solid var(--content-border-color);
    border-bottom: 2px solid var(--content-border-color);
}

footer * {
    font-size: 0.85rem;
    /* color: var(--border-color); */
}


h1, h2, h3, h4, h5 {
    font-weight: normal;
    margin-bottom: 1rem;
}


h2:first-letter {
    /* color: var(--color2); */
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2.4rem;
}

h3 {
    font-size: 1.8rem;
}

h4 {
    font-size: 1.4rem;
    font-style: italic;
}


/* mobile: increase sizes */
@media only screen and (max-device-width: 600px) {
  
  footer * {
    font-size: 1.5rem;
    /* color: var(--border-color); */
  }


  h1, h2, h3, h4, h5 {
      font-weight: normal;
      margin-bottom: 1rem;
  }

  h1 {
      font-size: 4rem;
  }
  
  h2 {
      font-size: 3.4rem;
  }
  
  h3 {
      font-size: 2.8rem;
  }
  
  h4 {
      font-size: 2.4rem;
      font-style: italic;
  }
}



a {
    color: var(--link-color);
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* change the look of the link when it is hovered */
a:hover {
    text-decoration: none;
}

.back-to-top {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

/* custom style for specific elements */

.firstname {
    /* color: var(--color1); */
    color: var(--color2);
    /* color: var(--color3); */
    /* color: var(--color4); */
}