@font-face {
    font-family: "JetBrains Mono";
    src:         url("res/font/JetBrainsMono-Regular.woff2");
}

@font-face {
    font-family: "Nunito";
    src:         url("res/font/Nunito-VariableFont_wght.ttf");
}

:root {
    /*
     * Due to conflicts with chrome extensions (Web Highlights - PDF & Web Highlighter), I have to
     * prefix all of my CSS variable names to avoid conflict.
     */
    --njj-highlight-color: #48f;
    --njj-bg-color:        #ffffff;
    --njj-fg-color:        #000000;
    --njj-aux-color:       #000000;

    --njj-small-font-size: 14pt;
    --njj-font-size:  15pt;
    --njj-large-font-size: 20pt;
}

@media only screen and (max-device-width: 1080px) {
    :root {
        --njj-small-font-size: 10pt;
        --njj-font-size:  11pt;
        --njj-large-font-size: 14pt;
    }
}

/*@media (prefers-color-scheme: dark) {*/
/*    :root {*/
/*        --njj-highlight-color: #6cf;*/
/*        --njj-bg-color:        #181818;*/
/*        --njj-aux-color:       #555555;*/
/*        --njj-fg-color:        #ffffff;*/
/*    }*/
/*}*/

body {
    background:     var(--njj-bg-color);

    color:          var(--njj-fg-color);
    font-family:    "Nunito", monospace;
    font-size:      var(--njj-font-size);

    display:        flex;
    align-items:    center;
    flex-direction: column;
    text-align:     justify;
    line-height:    1.2;

}

section, .divider::after {
    width:     calc(100vw - var(--njj-font-size) * 4);
    max-width: calc(var(--njj-large-font-size) * 35);
    position:  relative;
}

a {
    color:           var(--njj-highlight-color);
    text-decoration: none;
    font-weight:     normal;
}

a:hover {
    text-decoration: underline;
}

p {
    margin-top:    var(--njj-font-size);
    margin-bottom: var(--njj-font-size);
}

p:first-child {
    margin-top: calc(var(--njj-font-size) / 3);
}

p:last-child {
    margin-bottom: calc(var(--njj-font-size) / 3);
}

ul {
    list-style-type:      none;
    padding-inline-start: 0;
    padding-inline-end:   0;
}

h2 {
    border-bottom: 1px solid var(--njj-aux-color);
}

h3 {
    margin-top: 0;
    padding-right: 40px;
    font-size:  var(--njj-large-font-size);
    text-align: left;
}

li {
    outline:       1px solid var(--njj-aux-color);
    padding:       calc(var(--njj-font-size) * 2 / 3) calc(var(--njj-font-size) * 2 / 3) calc(var(--njj-font-size) / 3);
    margin-bottom: calc(var(--njj-font-size) * 4 / 3);
    position:      relative;
}

li > a:is(.link-to-github, .link-to-project) {
    position:        absolute;
    display:         block;
    background-size: cover;
}

li > a.link-to-github {
    top:              9px;
    right:            30px;
    width:            16px;
    height:           16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='14px' height='14px' viewBox='0 -0.5 48 48' version='1.1'%3E%3Cg id='Icons' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Color-' transform='translate(-700.000000, -560.000000)' fill='%2348F'%3E%3Cpath d='M723.9985,560 C710.746,560 700,570.787092 700,584.096644 C700,594.740671 706.876,603.77183 716.4145,606.958412 C717.6145,607.179786 718.0525,606.435849 718.0525,605.797328 C718.0525,605.225068 718.0315,603.710086 718.0195,601.699648 C711.343,603.155898 709.9345,598.469394 709.9345,598.469394 C708.844,595.686405 707.2705,594.94548 707.2705,594.94548 C705.091,593.450075 707.4355,593.480194 707.4355,593.480194 C709.843,593.650366 711.1105,595.963499 711.1105,595.963499 C713.2525,599.645538 716.728,598.58234 718.096,597.964902 C718.3135,596.407754 718.9345,595.346062 719.62,594.743683 C714.2905,594.135281 708.688,592.069123 708.688,582.836167 C708.688,580.205279 709.6225,578.054788 711.1585,576.369634 C710.911,575.759726 710.0875,573.311058 711.3925,569.993458 C711.3925,569.993458 713.4085,569.345902 717.9925,572.46321 C719.908,571.928599 721.96,571.662047 724.0015,571.651505 C726.04,571.662047 728.0935,571.928599 730.0105,572.46321 C734.5915,569.345902 736.603,569.993458 736.603,569.993458 C737.9125,573.311058 737.089,575.759726 736.8415,576.369634 C738.3805,578.054788 739.309,580.205279 739.309,582.836167 C739.309,592.091712 733.6975,594.129257 728.3515,594.725612 C729.2125,595.469549 729.9805,596.939353 729.9805,599.18773 C729.9805,602.408949 729.9505,605.006706 729.9505,605.797328 C729.9505,606.441873 730.3825,607.191834 731.6005,606.9554 C741.13,603.762794 748,594.737659 748,584.096644 C748,570.787092 737.254,560 723.9985,560' id='Github'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

li > a.link-to-project {
    top:              10px;
    right:            10px;
    width:            14px;
    height:           14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewbox='0 0 16 16'%3E%3Cpath d='M 5 1 L 4 1 A 3 3 0 0 0 1 4 L 1 12 A 3 3 0 0 0 4 15 L 12 15 A 3 3 0 0 0 15 12 L 15 11' stroke='%2348f' stroke-linecap='square' stroke-linejoin='round' stroke-width='2' fill='none'/%3E%3Cpath d=' M 10 1 15 1 L 15 6 M 8 8 L 15 1' stroke='%2348f' stroke-linecap='square' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}

@supports (-webkit-mask: none) {
    li > a:is(.link-to-github, .link-to-project) {
        -webkit-mask-size:   cover;
        -webkit-mask-repeat: no-repeat;
        background-color:    var(--njj-highlight-color);
    }

    li > a.link-to-github {
        background-image:   none;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='14px' height='14px' viewBox='0 -0.5 48 48' version='1.1'%3E%3Cg id='Icons' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Color-' transform='translate(-700.000000, -560.000000)' fill='%2348F'%3E%3Cpath d='M723.9985,560 C710.746,560 700,570.787092 700,584.096644 C700,594.740671 706.876,603.77183 716.4145,606.958412 C717.6145,607.179786 718.0525,606.435849 718.0525,605.797328 C718.0525,605.225068 718.0315,603.710086 718.0195,601.699648 C711.343,603.155898 709.9345,598.469394 709.9345,598.469394 C708.844,595.686405 707.2705,594.94548 707.2705,594.94548 C705.091,593.450075 707.4355,593.480194 707.4355,593.480194 C709.843,593.650366 711.1105,595.963499 711.1105,595.963499 C713.2525,599.645538 716.728,598.58234 718.096,597.964902 C718.3135,596.407754 718.9345,595.346062 719.62,594.743683 C714.2905,594.135281 708.688,592.069123 708.688,582.836167 C708.688,580.205279 709.6225,578.054788 711.1585,576.369634 C710.911,575.759726 710.0875,573.311058 711.3925,569.993458 C711.3925,569.993458 713.4085,569.345902 717.9925,572.46321 C719.908,571.928599 721.96,571.662047 724.0015,571.651505 C726.04,571.662047 728.0935,571.928599 730.0105,572.46321 C734.5915,569.345902 736.603,569.993458 736.603,569.993458 C737.9125,573.311058 737.089,575.759726 736.8415,576.369634 C738.3805,578.054788 739.309,580.205279 739.309,582.836167 C739.309,592.091712 733.6975,594.129257 728.3515,594.725612 C729.2125,595.469549 729.9805,596.939353 729.9805,599.18773 C729.9805,602.408949 729.9505,605.006706 729.9505,605.797328 C729.9505,606.441873 730.3825,607.191834 731.6005,606.9554 C741.13,603.762794 748,594.737659 748,584.096644 C748,570.787092 737.254,560 723.9985,560' id='Github'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    li > a.link-to-project {
        background-image:   none;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewbox='0 0 16 16'%3E%3Cpath d='M 5 1 L 4 1 A 3 3 0 0 0 1 4 L 1 12 A 3 3 0 0 0 4 15 L 12 15 A 3 3 0 0 0 15 12 L 15 11' stroke='%2348f' stroke-linecap='square' stroke-linejoin='round' stroke-width='2' fill='none'/%3E%3Cpath d=' M 10 1 15 1 L 15 6 M 8 8 L 15 1' stroke='%2348f' stroke-linecap='square' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    }
}

img#pfp {
    border-radius: 50%;
}

#page-select {
    display:       flex;
    flex-grow:     1;
    position:      relative;
    border-top:    1px solid var(--njj-aux-color);
    border-bottom: 1px solid var(--njj-aux-color);
}

/* Customize the label (the#page-select>label) */
#page-select > span {
    display:             flex;
    justify-content:     center;
    align-items:         center;
    position:            relative;
    cursor:              pointer;
    width:               6em;
    flex-grow:           1;
    text-align:          center;
    padding:             calc(var(--njj-font-size) * 0.6) calc(var(--njj-font-size) * 2 / 3);
    -webkit-user-select: none;
    -moz-user-select:    none;
    -ms-user-select:     none;
    user-select:         none;
    font-size: min(var(--njj-font-size), 5vw);
}

#page-select > span:hover {
    text-decoration: underline;
}

#page-select::after {
    content:        "";
    position:       absolute;
    display:        block;
    width:          calc(var(--njj-font-size) * 0.8 + 100% / var(--njj-num-pages));
    height:         100%;
    outline:        1px solid var(--njj-aux-color);
    outline-offset: calc(var(--njj-font-size) * -0.6);
    left:           calc(var(--njj-font-size) * -0.6 + 100% / var(--njj-num-pages) * var(--njj-current-page-number));
}

h1 {
    margin-top:    10px;
    margin-bottom: 10px;
    font-family:   "JetBrains Mono", monospace;

    font-size:     min(calc(var(--njj-font-size) * 1.5), 6vw)
}

h1 > span {
    display: block;
}

#left {
    display:         flex;
    align-items:     center;
    justify-content: left;
}

#header > * {
    flex-grow: 0;
}

img#pfp {
    height:       50px;
    margin-right: 10px;
}

body {
    --njj-current-page-number: 0;
    --njj-num-pages:   1;
    margin:        0;
    padding:       13px 13px 0;
    position:      absolute;
    top:           0;
    left:          0;
    width:         100vw;
    height:        100vh;
    overflow:      hidden;
    transition:    --njj-current-page-number .5s;
    box-sizing:    border-box;
}

#sliding-pages {
    padding-bottom: 10px;
    width:      100vw;
    overflow-x: hidden;
    overflow-y: scroll;
}

#sliding-pages > div {
    width:          100vw;
    min-width:      100vw;
    display:        flex;
    flex-direction: column;
    align-items:    center;
}

#sliding-pages::-webkit-scrollbar {
    display: none;
}

@property --njj-current-page-number {
    syntax:        "<number>";
    inherits:      true;
    initial-value: 0;
}

.project-tag {
    user-select:    none;
    margin-left:    10px;
    font-size:      var(--njj-small-font-size);
    background:     var(--njj-highlight-color);
    color:          var(--njj-bg-color);
    border-radius:  var(--njj-large-font-size);
    padding:        1pt calc(var(--njj-small-font-size) / 2);
    vertical-align: calc(var(--njj-small-font-size) * 0.15);
    white-space:    nowrap;
}

.project-img-caption {
    display:    inline-block;
    width:      100%;
    text-align: center;
    margin:     calc(var(--njj-font-size) / 3);
}

.project-img {
    /* This shouldn't conflict with anyone... hopefully? */
    --w:      1;
    width:    calc(var(--w) * 100%);
    height:   auto;
    position: relative;
    left:     calc((1 - var(--w)) * 50%);
}

.divider {
    display:         flex;
    justify-content: center;
    align-items:     center;
    height:          calc(var(--njj-small-font-size) * 1.4);
    width:           100%;
}

.divider::after {
    content:    "";
    height:     1px;
    background: var(--njj-aux-color);
}

audio {
    max-width: 100%;
}