/*****************************
* SIZE
*****************************/

/* Standard screen size is based on 1728x1117 screen. */
:root {
     --text-min-size: 8px;
     --text-variable-size: 0.7vw;
     --full-width: 100vw;
     --half-width: 50vw;
     --third-width: 33.3vw;
     --quarter-width: 25vw;
     --fifth-width: 20vw;
     --full-height: 100vh;
     --half-height: 50vh;
     --third-height: 33.3vh;
     --quarter-height: 25vh;
     --fifth-height: 20vh;
     --horizontal-spacing: 0.3vw;
     --vertical-spacing: 0.45vh;
}

/* Font sizes */
.md-typeset {
     p {
          font-size: max(calc(var(--text-variable-size) + 3px), var(--text-min-size));
     }

     figcaption {
          font-size: max(calc(var(--text-variable-size)), var(--text-min-size));
     }

     h1,
     h2,
     h3,
     h4,
     h5,
     h6 {
          letter-spacing: normal;
          margin: 0 0 5px 0;
     }
}

.md-typeset {
     h1 {
          font-size: max(calc(var(--text-variable-size) * 6), calc(var(--text-min-size) + 6px));
     }

     h2 {
          font-size: max(calc(var(--text-variable-size) * 6), calc(var(--text-min-size) + 5px));
     }

     h3 {
          font-size: max(calc(var(--text-variable-size) * 4), calc(var(--text-min-size) + 4px));
     }

     h4 {
          font-size: max(calc(var(--text-variable-size) * 3), calc(var(--text-min-size) + 3px));
     }

     h5 {
          font-size: max(calc(var(--text-variable-size) * 2), calc(var(--text-min-size) + 2px));
     }

     h6 {
          font-size: max(calc(var(--text-variable-size) + 8px), calc(var(--text-min-size) + 1px));
     }
}

/* Default padding and margins */
div {
     margin: calc(var(--vertical-spacing) * 2) 0;
     padding: calc(var(--vertical-spacing) * 2) 0;
}
