/* Colors sourced from: https://www.iamsajid.com/colors/ */

@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');

.preload *
{ 
    transition: none !important;
    animation-duration: 0s !important; 
}

:root 
{    
    --ff: "Syne", sans-serif;
    --ff2: "Fira Code", monospace;
    --h1: 800 2rem/1.2em var(--ff);
    --h1-header-footer: 800 1rem/1.2em var(--ff);
    --p: 400 1rem/1.5em var(--ff);
    --p-code: 300 .7rem/2em var(--ff2);
    --hue: 0;
    --color-primary: hsl(259, 50%, 10%);
    --color-secondary: hsl(259, 50%, 90%);
    --color-tertiary: hsl(264, 64%, 74%);
    --color-accent: hsl(125, 80%, 80%);
    --color-accent-darker: hsl(125, 31%, 61%);
    --color-sidebar: hsl(259, 50%, 15%);
    --color-header-footer: hsl(260, 67%, 16%);

    --color-info: hsl(207, 100%, 30%);
    --background-info: hsl(195, 100%, 87%);  

    --color-success: hsl(103, 100%, 23%);
    --background-success: hsl(82, 66%, 85%);  

    --color-warning: hsl(36, 100%, 31%);
    --background-warning: hsl(48, 97%, 85%);

    --color-error: hsl(357, 100%, 42%);
    --background-error: hsl(0, 100%, 86%);

    --color-tooltip: hsl(207, 100%, 30%);
    --background-tooltip: hsl(195, 100%, 87%);  

    --sb-width: 18rem;
}

.light-mode
{
    --color-primary: hsl(259, 50%, 90%);
    --color-secondary: hsl(259, 50%, 15%);
    --color-tertiary: hsl(264, 34%, 57%);
    --color-accent: hsl(182, 42%, 43%);
    --color-sidebar: hsl(264, 41%, 83%);
    --color-header-footer: hsl(263, 82%, 89%);
    --color-tooltip: hsl(207, 100%, 30%);
    --background-tooltip: hsl(195, 100%, 87%); 
}

html
{
    scroll-behavior: smooth;
}

/* Set transition times for most of the site */
body,
template-header,
template-footer,
.sidebar
{
    transition:
        width 0.3s ease,
        height 0.3s ease,
        visibility 0.2s ease,
}

body 
{
    background: var(--color-primary);
    color: var(--color-secondary);
    font-family: var(--ff);
    font: var(--p);
    margin: 0;
}

/* Grid class to be used alongside grid layouts*/
.grid
{
    display: grid;    
}

.auto-fit
{
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}
.auto-fill
{
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

/* Grid layouts */
.main-container
{
    min-height: 100vh;
    grid-template-rows: auto 1fr;
    grid-template-columns: auto 1fr;
}

.column-container
{
    > div 
    {
        border: 1px solid var(--color-accent);
        border-radius: 1em;
        margin: 20px 10px;
        padding: 0 1em 1em;
    }
}

.column-connected-container
{
    grid-auto-flow: column;
    grid-auto-rows: 0fr;
    margin: 20px 10px;

    > div 
    {
        border: solid var(--color-tertiary);
        border-width: 1px 0px 1px 1px;
        padding: 0 1em;
    }
    > div:first-child
    {
        border-radius: 1em 0em 0em 1em;
    }
    > div:last-child
    {
        border-radius: 0em 1em 1em 0em;
        border-width: 1px;
    }
}

/* Header and Footer */
template-header,
template-footer 
{
    width: auto;
    padding-left: 1rem;
    min-height: 5vh;
    z-index: 2;

    background: var(--color-header-footer);
    color: var(--color-secondary);

    main
    {
        padding: 0 1rem;
    }
    
    h1
    {
        font: var(--h1-header-footer);
        padding: 0.25rem 2rem;
    }
}

template-header 
{
    grid-column: span 3;
    inset: 0 auto 0 0;
    position: sticky;
    align-self: start;
    top: 0;

    img
    { 
        display: block;
        float: left;
        margin: 5px 20px 0px 35px;
        width: 20px; 
        height: 20px; 
    }
}

template-footer
{
    grid-column: span 3;
}

/* Content */
main 
{
    grid-column: span 2;
    display: block;
    width: auto;

    > div:not(.grid):not(.no-border), section:not(.grid):not(.no-border)
    {
        border: 1px solid var(--color-accent);
        border-radius: 1em;
        margin: 20px 10px;
        padding: 0 1em 1em;
    }
}

a
{
    font: 800 1rem/1em var(--ff);
    color: var(--color-accent);
    text-underline-offset: 4px;
}

h1 
{
    font: var(--h1);
}