/* ============== FONTS ============== */
/* 01 - MS UI Gothic */ @font-face {
      font-family: "MS UI Gothic", Verdana, serif;
      src: url("/fonts/MSGothic.ttf");}
/* 02 - Pixel Operator */ @font-face {
      font-family: "Pixel Operator";
      src: url("/fonts/PixelOperator.ttf");
        font-weight: normal;
        font-style: normal;}      
    /* 02 - Pixel Operator Bold*/ @font-face {
        font-family: "Pixel Operator";
        src: url("/fonts/PixelOperator-Bold.ttf");
            font-weight: bold;
            font-style: normal;}
      
/* 03 - Karla */ @font-face {
      font-family: "Karla";
      src: url("/fonts/Karla.ttf");}
/* 04 - OpenDyslexic */ @font-face {
      font-family: "OpenDyslexic";
      src: url("/fonts/OpenDyslexic-Regular.otf");
        font-weight: normal;
        font-style: normal;}
    /* 04 - OpenDyslexic Italic */ @font-face {
        font-family: "OpenDyslexic";
        src: url("/fonts/OpenDyslexic-Italic.otf");
            font-weight: italic;
            font-style: italic;}
    /* 04 - OpenDyslexic Bold */ @font-face {
        font-family: "OpenDyslexic";
        src: url("/fonts/OpenDyslexic-Bold.otf");
            font-weight: bold;
            font-style: normal;}
    /* 04 - OpenDyslexic Bold Italic */ @font-face {
        font-family: "OpenDyslexic";
        src: url("/fonts/OpenDyslexic-BoldItalic.otf");
            font-weight: bold;
            font-style: italic;}


/* ============= Root ================= 
    Variables.
=====================================*/
:root {
    
    /*=======================/* BODY */
    --bg:   #000;
        --bg-img: url("/gallery/assets/background01.png");
        --bg-filter: none;
        --header-filter: none;
    --text: #e2e2e2;
        --font-01: "Pixel Operator";
        --font-02: "MS UI Gothic";
        --font-size: 1.15rem;
        --line-height: 1.20rem;
    --text-shadow: #585858;
        --txt-shadow: 1rem;

    --link:               #21ff58;
    --link-shadow:        #139e36;
    --link-hover:         #9a9dff;
    --link-hover-shadow:  #696fff;
        --link-decor: none;
        --transition: 0.20s;

        --bolded:           #6D72FC;          
        --italicized:       #827C7C;
        --strikethrough:    #535353;

        --selection-bg:     #2e2eff;
        --selection-text:   #ffffff;

    /*=======================/* CONTAINER */
    --container-bg:     #08080827;
    --container-text:   #e2e2e2;
    --container-border: #2e2eff80;
        --gradient-01: rgba(54, 41, 102, 0.247);
        --gradient-02: rgba(0, 0, 0, 0.336);

    --hr-line:  #38396196;
    --hr-flair: #2e2eff;

    --box-01-text:       #6D72FC;
    --box-01-shadow:     #240769;
    --box-01-bg:         #191730;
    
        --fun-01:    lime;
        --fun-02:    cyan;
        --sub-yes:   lime;
        --sub-no:    orange;

    /*=======================/* Config */
    --config-bg:        #282858;
    --config-text:      #d9d9ff;
    --config-border:    #45457a;

    /*=======================/* Gallery */  
    --transp-bg: url('/gallery/assets/transpblack.png');
    --transp-toggle: #fff;
    --gallery-title: var(--container-text);
    --gallery-title-bg: none;
        --tag-text: #858585;
        --tag-bg: #47474769;
        --tag-link: var(--link);        
            --tag-hover: var(--link-hover);
        --tag-shadow: none;

        --pagination-text: #858585;
    
}

body {
  background:
    var(--bg)
    var(--bg-img)
    no-repeat
    center top;
    backdrop-filter: var(--bg-filter);

    color: var(--text);
        font-family: var(--font-01);
        font-size: var(--font-size);
        line-height: var(--line-height);
    text-shadow: 0px 0px 1.05rem var(--text-shadow);
}


/* Body | ===== TEXT ================= 
    Page formatting.
=====================================*/

a {
    color: var(--link);
    text-shadow: 0px 0px 0px var(--link-shadow);
    text-decoration: var(--link-decor);}
a:hover {
    color: var(--link-hover);
    text-shadow: 0px 0px 1rem var(--link-hover-shadow);
    transition: color var(--transition);
    text-decoration: underline;}

    .a-dim {color: var(--strikethrough);}

b {color: var(--bolded);}
i {color: var(--italicized);}
s {color: var(--strikethrough); text-shadow: none;}

    *::selection {background: var(--selection-bg); color: var(--selection-text);}
    *::-moz-selection {background: var(--selection-bg); color: var(--selection-text);}
    *::-webkit-selection {background: var(--selection-bg); color: var(--selection-text);}

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

/* Body | ===== Container ============
    Contains everything.
=====================================*/

.container {
    background-color: none;
    display: grid;
    grid-template-areas:
        "header header header"
        "l-content content r-content"
        "footer footer footer";
    grid-template-columns: 1fr 3fr 1fr;
    gap: 0.2rem;
    padding: 0.6rem; 
}

.overlay { /* CONTAINER GRADIENT */
  background-color: none;
  background-image: linear-gradient(to top, var(--gradient-01), var(--gradient-02));
}

.span { /* Used when there is no rightside content. */
      grid-template-areas:
        "header header header"
        "l-content content content"
        "footer footer footer";
    }    

.nav { /* Left content only. */
  grid-template-areas:
  "l-content l-content l-content";
}

    .container div {
    background-color: var(--container-bg);
        color: var(--container-text);

        overflow: auto;
        padding: 1rem;
        font-size: var(--font-size);
    }

    /* Body | ============== Grid ============== */
    
    .container div.header {
        grid-area: header;
        text-align: center;
        padding: 0rem;
        background-color: var(--bg);
        border: 1px double var(--container-border);}

    .container div.header img {-webkit-filter: var(--header-filter); filter: var(--header-filter);}

    .container div.footer {
        grid-area: footer;
        text-align: center;
        font-size: calc(var(--font-size) + .50rem);
        padding: 1.25rem;
        border: 1px double var(--container-border);}

    .container div.l-content { 
        grid-area: l-content;
        text-align: left;
        font-size: 1rem;
        padding-top: 3rem;
        overflow: clip;
        border: 1px double var(--container-border);}

    .container div.content { /* Padding removed in the event the full dividers are wanted. */
        grid-area: content;
        text-align: left;
        min-height: 60vh;
        max-height: 89vh;
        padding-top: 2rem;
            padding-left: 0rem;
            padding-right: 0rem; 
            order: 1px double var(--container-border);}

    .container div.r-content { /* Padding removed in the event the full dividers are wanted. */
        grid-area: r-content;
        text-align: left;
        font-size: 1rem;
        padding-top: 3rem;
            padding-left: 0rem;
            padding-right: 0rem;
            border: 1px double var(--container-border);}


/* Body | ===== Lists ============
    ...Lists!
=====================================*/


    .ul2 {
        list-style-type: square;
        overflow: hidden;
        text-transform: none;
    }

    .ul2 li {padding: 5px;}
    .li-sub {font-size: .95em;}

    .li-sub::before {
        content: " ";
        border-right: 2px solid var(--italics);
        padding-left: 1em;
        margin-right: 1em;
    }


    /* ======// [PAGE:Art Usage] //====== */
    .ul-usage {text-transform: none;}

    .li-usage::before {
        font-size: .80em;
        content: "➔ ";
        padding-left: 1em;
        margin-right: 1em;  
    }

    .yes::before {color: var(--sub-yes);}

    .no::before {
        font-size: .80em;
        content: "➔ ";
        padding-left: 1em;
        margin-right: 1em;
        color: var(--sub-no);
    }

/* Body | ===== The Rest ============
    Contains the other everythings.
=====================================*/

    /* HR | Text Dividers and More... //====== */

        .hr-00, .hr-01 { /* Main Divider */
            border: none; border-top: 0.20rem double var(--hr-line);
                overflow: visible;
                text-align: center;
                height: 5px;
        }

        .hr-01:after { /* Main Divider: Decoration */
            background: none;
                padding: 0 4px;
                position: relative;
            content: "✦";
                color: var(--hr-flair);
                font-family: calibri;
        }

        .hr-01:after {top: -0.75rem;}


    /* Boxes | Fieldsets //====== */

        .fs-01 {
            text-transform: uppercase;
            color: var(--bolded);
            border: 0.05rem dashed var(--container-border);
        }

        .fs-01 option:before {color: var(--bolded); content: ">"; margin-right: 0.45rem;}

        .fs-02 { /* Navigation */
            text-transform: normal;
            color: var(--bolded);
            border: 0.05rem none var(--container-border);
        }

        .fs-02 ul {list-style: none; font-size: 1.25rem; padding-left: 1rem;}
        .fs-02 li:before {color: var(--bolded); content: ">"; margin-right: 0.45rem;}

        .fs-config {
            color: var(--link);
            border: 0.05rem solid var(--container-border);
            margin-left: 0.5rem;
            margin-right: 0.5rem;
        }        


    /*  Collapsibles //===== */
        .collapsible {
            cursor: pointer;
            padding: 1px;
            width: 100%;
            border: none;
            text-align: center;
            outline: none;
            font-size: 16px;
            font-family: var(--font);
        }

        .active, .collapsible:hover {color: var(--link-hover);}
        
        .collapse-title {text-transform: uppercase;}
        .collapse-title:hover {cursor: pointer; text-decoration: underline;}

        .collapse-content {
            padding: 0 18px;
            max-height: 0px;
            overflow: hidden;
            transition: max-height 0.1s ease-out;
            background: none;
        }


    /* MISC */
    .ps1 {
        font-weight: bold;
        background-color: var(--box-01-bg);
        color: var(--box-01-text);
        text-shadow: 0px 0px 10px var(--box-01-shadow);
        padding: 4px;
    }

/* Config | ===== Important! ===========
    user Preferences
=====================================*/
    .user-configure {
        background: none;
        color: cyan;
    }

    .user-select {position: sticky; top: 0; z-index: 25;}

    .user-select select {
        appearance: none;
        position: relative;
        font-family: var(--font-02);
            color: var(--config-text);
            text-align: center;

        border: 1px solid var(--config-border);
        background-color: var(--config-bg);
        width: 100%;
        cursor: pointer;
    }


/* Table | ===== Commissions ===========
    ...for commissions. Yes.
=====================================*/

    .status {
        width: 100%;
        border: 1px solid var(--hr-line);
        border: none;
        padding: 15px;
    }

    .status th, td {padding: 15px;}
    .status th {
        text-transform: uppercase;
        text-align: center;
        font-weight: bold;
        color: var(--box-01-text);
        
        font-size: 20px; background-color: var(--box-01-bg);}
    .status td {vertical-align: text-top;}
    .status li {list-style-type: none; padding: 0px; border: none; padding: 5px;}

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


/* =========== GALLERY:Toggle =========== */

/* https://alvaromontoro.com/blog/68017/creating-a-css-only-toggle-switch
Toggle */


input:where([type="checkbox"][role="switch"]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: sticky;
    top: 0;
    z-index: 999;    
  color: gray;
  background-color: var(--bg);
  font-size: inherit;
  width: 2em;
  height: 1em;
  box-sizing: content-box;
  border: 1px solid;
  vertical-align: text-bottom;
  margin: auto;

  cursor: pointer;
}

input:where([type="checkbox"][role="switch"])::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  box-sizing: border-box;
  width: 0.7em;
  height: 0.7em;
  margin: 0 0.15em;
  border: 1px solid;
  background: currentcolor;
  z-index: 999;
}

input:where([type="checkbox"][role="switch"]):checked::before {
  left: 1em;
  color: var(--box-color-01);
  background-color: var(--box-01-text);
}

input:where([type="checkbox"][role="switch"]):disabled {
  opacity: 0.4;
}

#lightswitch-label {
  font-family: Pixel Operator;
  font-smooth: var(--font-smooth);
  color: var(--box-01-text); margin: 1em;
    background-color: var(--box-color-01);
    padding: 4px;
  position: sticky;
    top: 0; z-index: 999;
}

/* ENABLE */
input#lightswitch:checked ~ .view img {
  background-color: var(--transp-toggle);
  z-index: -1;
  /* transition: background-color 0.5s ease-in; */
}

input#lightswitch:checked ~ .navigation {
  color: #000000;
  text-shadow: 0px 0px 15px #000000;
}

/* ? check -> https://codepen.io/designcouch/pen/eYaZKg */    


/* MEDIA | ===== View Settings ======== 
    For different devices.
=====================================*/
                
    /* View | Desktop/Wide */ @media (min-width: 961px) {}

    /* View | Mobile/Small */ @media (max-width: 980px) {

    .container {
        grid-template-areas:
            "header header"
            "l-content content"
            "r-content content"
            "footer footer";
        grid-template-columns: 1fr 2fr;
        padding: 0rem;
        }

    .span {
        grid-template-areas:
            "header header header"
            "l-content content content"
            "footer footer footer";
        }

    }

    /* View | Mobile/Smaller */ @media (max-width: 600px) {

    .container {
        display: grid;
        grid-template-areas:
            "header header header"
            "l-content l-content l-content"
            "content content content"
            "r-content r-content r-content"
            "footer footer footer";
        grid-template-columns: 1fr 3fr 1fr;
        padding: 0rem;
        } 
    
    .span {
        grid-template-areas:
            "header header header"
            "l-content l-content l-content"
            "content content content"
            "footer footer footer";        
        }

    }


/* Miscellaneous Credit/Attribution 
===============================================================================================================

    While I did use these, I cannot say that you should or should not use them.
    It is also rather scary that you inspected the source and went this far down to read this.
    ...I do the same a lot, though.

    Hi.


    [*] Visual Studio Code (Live Server Extension)
    [*] W3Schools: https://www.w3schools.com/ (this is always a great source)
    [*] Website Favicon (the icon that appears beside the website): https://realfavicongenerator.net/

===============================================================================================================
*/