@import url("https://rsms.me/inter/inter.css");
@import url("https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.css");

* {box-sizing: border-box;}

p {
    margin: 1em 0 1em 0;
}
/* Root variables */
:root {
    --header-font-size: 2.2rem;
    --content-font-size: 1.5rem;
    --footer-font-size: 1rem;

    /* Set base colors */
    --color-dark: #0c0e10;
    --color-light: #e5e5dd;
    --color-red: #e64959;
    --color-util: #a6a7a7;
}

/* Dark and light mode color choices */
.dark {
    --color-1: var(--color-dark);
    --color-2: var(--color-light);
    --color-3: var(--color-red);
    --color-4: var(--color-util);
}
.light {
    --color-1: var(--color-light);
    --color-2: var(--color-dark);
    --color-3: var(--color-red);
    --color-4: var(--color-util);
}

/* Base styling */
html, body {
    height: 100%;
    margin: 0;
    border: 0;
}

html {
    /* Style the font. See the note about clamp and the calculation below */
    font-size: clamp(12px, 0.357142857143vw + 10.8571428571px, 16px);

    /* Fallback font to sans-serif*/
    font-family: Inter, sans-serif;
    /* TODO: Use this as the fallback */
    /*font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif */
    /* https://github.com/sindresorhus/modern-normalize/tree/main */

    font-weight: 300;

    /* Used https://rsms.me/inter/lab/ to figure out preferences*/
    letter-spacing: -0.018em;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "case", "dlig", "tnum", "zero", "ss01", "calt", "ccmp", "locl", "kern";

    /* Make content easier to read */
    line-height: 1.5;
}

/* Show Inter font with configuration */
@supports (font-variation-settings: normal) {
    html { 
        font-family: InterVariable, sans-serif;
    }
}

body {
    /* Use flexbox on body to have nice UI */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;

    background-color: var(--color-1);
}

/* Header styling */
h1, h2, h3, h4 { font-weight: 600; }
/* These are all relative to --content-font-size or --header-font-size */
h1 { font-size: 1.3em; }
h2 { font-size: 1.2em; }
h3 { font-size: 1.1em; }
h4 { font-size: 1em; }


/* Header */
header {
    /* 
        For some reason, the height gets messed up when switching from home to projects 
        I fixed this by removing the height for the header.
    */
    /*height: 15%*/
    font-size: var(--header-font-size);
    color: var(--color-3);
    /*
    display: flex;
    justify-content: center;
    */

    margin: 15px 0 15px 0;;
}

header {
    text-align: center;
}
/* Header navbar */
header nav {
    /*float: right;*/

    display: flex;
    justify-content: space-evenly;
    gap: 1rem;
    flex-wrap: wrap;
}

@media (min-width: 515px) {
    header nav {
        float: right;
    }
    header > span {
        float: left;
    }
}

#theme-toggle {
    /* Remove all button styling */
    all: unset;

    cursor: pointer;
    user-select: none;
}

a, #theme-toggle {
    /* Color and underline all links */
    color: var(--color-3);
    text-decoration: underline;
}

/* Have the main content take up all the remaining space*/
main {
    flex-grow: 1;
    color: var(--color-2);
    font-size: var(--content-font-size);

    margin: 15px 0 15px 0;
}


/* Margin around each one
TODO: CHeck if can be done on body
*/
footer {
    margin: 15px;
}

/* Since main is a flexbox, use a content-wrapper to align content*/
body, .content-sizing {
    /* 
    Kinda complicated to calculate the proper value to make this design scale
    responsively.

    Narrow screen --> Wide screen
        320px = 86vw      1440px = 70vw
    
    Need to make a function that will take in pixels (actually 100vw) and output pixels
        w(320) = 0.86vw(320px)
               = 275.2 px
        w(1440) = 0.7vw(1440)
                = 1008 px
    
    Now, the inputs and outputs of w are pixels.
    Create a linear equation that goes to these two points
        m = (1008 - 275.2) / (1440 - 320)
          = 732.8 / 1120
        
        w(p) = m(p - 320) + 275.2
             = (732.8/1120)(p-320) + 275.2
             = (732.8/1120)p - (7328/35) + 275.2
             = 0.654285714286p - 209.371428571 + 275.2
             = 0.654285714286p + 65.828571429

    However, we want this to be responsive. If 1vw = p/100, then multiply the
    the slope of the equation by 100 (all constant remains unchanged) to get 100vw.
        w(p) = 0.654285714286(100)p + 65.828571429 px 
             = 65.4285714286 + 65.828571429 px
    
    100vw is the entire screen. Therefore the equation just simplifies to:
        65.4285714286 vw + 65.828571429 px
    
    NOTE: You can round these values.

    Since this calculation is complicated, I made a generic calculator.
        https://www.desmos.com/calculator/vpyewvohlp

    The clamp function can also be used with this.
        eg: clamp(70%, 65.42857vw + 65.82857px, 90%)

        This calculates the prefered value (middle). If it's less than the minimum
        value (left), then the minimum value is used. If it's greater than the
        maximum value, the maximum value is used.

    NOTE: This is very helpful because the calculation doesn't use percentages,
    thus meaning that it can be applied to a lot more elements.
    */
    /* Use clamp to make sure the sizes never go out of bound*/
    /*width: clamp(70vw, 65.4285714286vw + 65.828571429px, 86vw);*/
    width: calc(46.42857vw + 131.42857px);
    /*margin: auto;*/
    margin-left: auto;
    margin-right: auto;
}

/* Make footer go in the center */
footer {
    color: var(--color-2);
    font-size: var(--footer-font-size);

    display: flex;
    flex-direction: column;
    align-items: center; /* use align items instead of justify-content because of row mode */

    padding-bottom: 1em;
}


/* TODO: Should this be pre:has(code) or just pre code or just pre */

pre {
    border: 4px solid var(--color-3);
    overflow-y: scroll;
    padding: 10px;
}

pre > code {
    /* Only small font when not inline */
    font-size: 0.7em;
}

code {
    /*font-family: 'Courier New', Courier, monospace;*/
    font-family: "Fira Code", monospace;
}
@supports (font-variation-settings: normal) {
    code {
        font-family: "Fira Code VF", monospace;
    }
}



form > div {
    display: flex;
    gap: 1em;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

label {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;

    text-align: center;
}

input {
    all: unset;
    border: 4px solid var(--color-4);
    background-color: unset;
    color: inherit;

    text-align: center;

}

input[type=submit] {
    width: 100%;
    cursor: pointer;
}

/* Build script processes latex equations to MathML*/
.math-block {
    text-align: center;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    box-sizing: border-box;
}

.math-block math {
    display: inline-block;
    margin: 0.5em 0 0.5em 0;
}

/* TODO: Align divider in blog */

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
}

.grid > .item {
    outline: 4px solid var(--color-4);
    /*padding: 1em;*/
    padding: 0.5em;
    border-radius: 10px;
    /*text-align: center;*/

    cursor: pointer;
}

.grid > .item:hover {
    /* https://getcssscan.com/css-box-shadow-examples */
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.item-title {
    margin: 0;
}
.item-tags {
    font-size: 1.2rem;
}
.item-contents {
    margin-bottom: 5px;
}
.item-contents p {
    margin: 0;
}

.item-tags > code {
    background: var(--color-3);
    border-radius: 5px;
    padding: 0.2em;
    
}