/* ============== FONTS ============== */
@font-face {
      font-family: "MS UI Gothic", Verdana, serif;
      src: url("/fonts/MSGothic.ttf");
      font-smooth: never;
    }
    
@font-face {
      font-family: "Pixel Operator";
      src: url("/fonts/PixelOperator.ttf");
      font-smooth: never;
    }
  
/* =========== GLOBAL ROOT =========== */
/* https://swiftyshq.neocities.org/blog/2025-06-29-Style-Switching-Creating-Themes/ */

:root {
  --bg:    #000;
  --text:  #DBDBDB;
    --font: "MS UI Gothic";
    --font-smooth: never;
    --font-size: 16px;
  --italics: #827C7C;
  --bolded:  #6D72FC;  

  --link: #21ff58;
  --link-shadow: #139e36;
    --link-hover:        #8387ff;
    --link-hover-shadow:      #696fff;

    --box-text-01:          #6D72FC;
    --box-txtsh-01:         #240769;
    --box-color-01:         #191730;

    --contain-bg-01:        #08080827;
    --contain-border-01:    rgb(17, 24, 119);

    --hr-dvd:            #38396196;
    
  --gradient-01: rgba(40, 31, 77, 0.247);
  --gradient-02: rgba(0, 0, 0, 0.336);

  --fun-01: lime;
  --fun-02: cyan;
  --transition: 0.10s;

--sub-yes: lime;
--sub-no: orange;

--highlight-bg: #57598546;
--highlight-txt: #DBDBDB;

  --tag-text: #858585;
  --tag-bg: #47474769;
  --tag-hover: var(--link);
  --tag-shadow: var(--link-shadow);

  /* Theme Names */

  --theme-01: "reverie";
  --theme-02: "equinox (light)";
  --theme-03: "teal";
  --theme-04: "scm";
}


/* .theme-01 {color: #6D72FC; background-color: #191730;} /* REVERIE */
/* .theme-02 {color: #181818; background-color: #ececec;} /* EQUINOX, LIGHT */
/* .theme-03 {color: #6dfcd8; background-color: #080808;} /* TEAL */
/* .theme-04 {color: #A4B4F8; background-color: #4e4e4e;} /* SCM */


body {
  background:
  var(--bg)
  url("/gallery/assets/background01.png")
  no-repeat
  center top;
  
  color: var(--text); text-shadow: 0px 0px 125px #8d6beb;
      font-family: var(--font);
      font-smooth: var(--font-smooth);  
}

.overlay {
  background-color: #080808;
  background-image: linear-gradient(to top, var(--gradient-01), var(--gradient-02));
}

/* =========== BODY:CONTAINER =========== */
.container {
      display: grid;
      grid-template-areas:
        "header header header"
        "menu content content2"
        "footer footer footer";
      grid-template-columns: 1fr 3fr 1fr;
      gap: 3px;
      background-color: none;
      padding: 10px;
    }

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

.container div {
  background-color: var(--contain-bg-01);
    border: 1px double var(--contain-border-01);

    overflow: auto;
      padding: 15px;
      font-size: 1rem;
      text-align: left;
    }


/* =========== CONTAINER:GRID =========== */    
.container div.header {
    grid-area: header;
    text-align: center;
    padding: 0;
  background-color: var(--bg);
  }


.container div.footer {
  grid-area: footer;
  text-align: center;
  font-size: 1.4rem;
}

.footing::after {
  content: "© AUEUA 2026 | All Rights Reserved";
}

.container div.menu {
  grid-area: menu;
  text-align: left;
  padding: 0px;
}


.container div.content {
  grid-area: content;
  text-align: left;
  padding: 2vw;
    min-height: 600px;
    max-height: 100vh;
  line-height: 130%;

  flex-grow: 1;
  overflow-y:auto;
}

.container div.content2 { /* Right Bar*/
  grid-area: content2;
  text-align: left;

  overflow-y:auto;  
}

/* =========== BODY:Text =========== */    
a {color: var(--link);
  text-decoration: none;}

  a:hover {color: var(--link-hover); text-shadow: 0px 0px 10px var(--link-hover-shadow); transition: color var(--transition);}


s {
  color: rgb(83, 83, 83);
  text-shadow: none;
  
}

b {  color: var(--bolded);}
i {color: var(--italics); font-style: normal;}

.ps1 {
  font-weight: bold;
  background-color: var(--box-color-01);
  color: var(--box-text-01);
  text-shadow: 0px 0px 10px var(--box-txtsh-01);
  padding: 4px;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.ps2 {
  background: var(--highlight-bg);
  color: var(--highlight-txt);
  text-shadow: 0px 0px 10px var(--box-txtsh-01);
  padding: 4px;

}


/* ======// DIVIDER:Horizontal Rules //====== */

.hr-01 {
  width: 95%;
  border: none;
  border-top: 3px double var(--hr-dvd);
  overflow: visible;
  text-align: center;
  height: 5px;
}

.hr-01:after {
  background: none;
  font-family: calibri;
  content: "✦";
  padding: 0 4px;
  position: relative;
  top: -13px;
  color: var(--contain-border-01);
}

.hr-02 {
  width: 100%;
  border: none;
  border-top: 3px double var(--hr-dvd);
  overflow: visible;
  text-align: center;
  height: 5px;
}

.hr-02:after {
  background: none;
  font-family: calibri;
  content: "✦";
  padding: 0 4px;
  position: relative;
  top: -13px;
  color: var(--contain-border-01);
}



/* ======// Lists //====== */

ul {
  list-style-type: none;
  overflow: hidden;
  line-height: 150%;
  text-transform: none;
}

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

.ul2 li {
  padding: 5px;
}


.li-sub {
  font-size: 80%;
}

.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: 60%;
  content: "➔ ";
  padding-left: 1em;
  margin-right: 1em;  
}

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

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

/*************************/

/* Regular Device */
@media (min-width: 961px) {
.container div.menu {
  font-size: 1.25rem;
}
}

/* Mobile Device */
@media (max-width: 960px) {
.container {
      grid-template-areas:
        "header header header"
        "menu content content"
        "content2 content content"
        "footer footer footer";
     grid-template-columns: auto minmax(0, 1fr);
      gap: 3px;
      padding: 0px;
    }

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

.nav {
  grid-template-areas:
  "menu menu menu";
}    
}

/* Even Smaller Device */
@media (max-width: 800px) {
.container {
      display: grid;
      grid-template-areas:
        "header header header"
        "menu menu menu"
        "content content content"
        "content2 content2 content2"
        "footer footer footer";
      grid-template-columns: 1fr 3fr 1fr;
      gap: 3px;
      padding: 0px;
    } 
  
.span {
      grid-template-areas:
        "header header header"
        "menu menu menu"
        "content content content"
        "footer footer footer";        
    }

.nav {
  grid-template-areas:
  "menu menu menu";
}    
}



/* =========== FORM:USER SWITCH =========== */
.user-select {position: sticky; top: 0; z-index: 25;}

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

  border: 1px solid var(--box-text-01);
  background-color: var(--box-color-01);

  cursor: pointer;
  margin-top: 6px;
  margin-bottom: 10px;
}
.user-select:before {
  content: ">";
  color: var(--box-text-01);
}

/* =========== COMMISSIONS:Status Table =========== */

.status {
  width: 100%;
  border: 1px solid var(--box-color-01);
  padding: 15px;
}

.status th, td {padding: 15px;}
.status th {
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  color: var(--box-color-01);
  
  font-size: 20px; background-color: var(--box-text-01);}
.status td {vertical-align: text-top;}
.status li {list-style-type: square; 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-text-01);
}

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

#lightswitch-label {
  font-family: Pixel Operator;
  font-smooth: var(--font-smooth);
  color: var(--box-text-01); 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: #ffffff;
  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 */


/* COLLAPSIBLE */
.collapsible {
  cursor: pointer;
  padding: 1px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 16px;
  font-family: MS UI Gothic;
}

.active, .collapsible:hover {
  color: var(--link-hover);
}

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