@import url('/assets/stylesheets/print.css');

/*  Variable overrides */
:root {
  --font-size-base: 18px;

  /* colors */ 
  --link-color: rgb(91, 94, 226);
  --gray: #eceeef;
  --gray-lighter: #f7f7f9;
  --sub-gray: #a0a0a0;
}

/* on desktop, h3 is 172% of font-size-base */

h1,h2,h3,h4,h5,h6, .tooltip {
  font-family:'Overpass', sans-serif;
}

h3 {
  color:var(--gray);
  margin-bottom:0;

  &+ul {
    margin-top:10px;
  }
}

h4 {
  margin-top:0;
}

/* Tooltips */
.tooltip-inner {
  max-width:325px;
  font-size:var(--font-size-base);
  background:rgba(var(--link-color), 0.90);
}

.container {
  width:55%;
  margin:0 auto;
}

/* links */
a {
  text-decoration:none;

  &:hover {
    text-decoration:underline;
  }
}


/* Header */
header {
  a, a:hover {
    text-decoration:none;
    color:#000;
  }

  .portrait {
    width:120px;
    float:left;
    display:block;
    margin-right:20px;
  }

  h1 {
    font-size:64px;
    margin:0px;
  }

  h2 {
    margin-top:0px;
    font-size:32px;
    color:--var(gray);
  }
}

body {
  background-color:#ffffff;
  margin-top:5%;
  font-family: 'PT Sans', sans-serif;
}

section {
  margin-top:25px;
}

.faded, h4 {
  color:lighten(var(--gray), 25%);
  font-size:19px;
}

ul {
  li {
    margin-bottom:10px;
  }
}

/* Furigana */
ruby {
  rp, rt {
    color:var(--sub-gray);
  }
}

.r {
  transform:rotate(90deg);
  font-size:32px;
  color:var(--gray-lighter);
  display:none;
  float:right;
}

footer.row {
  margin-left:0px;
  margin-right:0px;
  border-top:1px solid var(--gray-lighter);
  padding:10px 0px 10px 0px;
  font-size:12px;

  div:nth-child(2) {
    text-align:right;
  }

  ul:nth-child(1) {
    li:last-child {
      padding-right:0;
    }
  }
}

@media screen {
  .print-only {
    display:none;
  }
}


@media (prefers-color-scheme:dark) {
  body {
    background-color: #292e42;
    color:#a9b1d6;
  }

  .container {
  
  }

  h1 {
    a, a:hover {
      color:#c0caf5;/*7dcfff;*/
      cursor:default;
    }
  }

  header h2, h3 {
    color:#7aa2f7;
  }

  h4 {
    color:#3d59a1;
  }

  a {
    color:#bb9af7;

    &:hover {
      color:#9d7cd8;
    }
  }  

  code {
    background-color:#1f2335;
    color:#ff007c;
  }
}