@font-face {
  font-family: 'Alagard';
  src: url(/fonts/alagard.ttf);
}

@font-face {
  font-family: 'Consolas';
  src: url(/fonts/consolasmono.ttf);
}

@font-face {
  font-family: 'Cute';
  src: url(/fonts/CutePixel.ttf);
}

@font-face {
  font-family: 'Mleitoid';
  src: url(/fonts/mleitoid.ttf);
}

@font-face {
  font-family: 'Emoji';
  src: url("https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji/font/OpenMoji-color-glyf_colr_0/OpenMoji-color-glyf_colr_0.woff2"), url(/fonts/NotoEmoji-661A.ttf);
}

.lite {
  --headerbox-style: #273175;
  --header-div-style: linear-gradient(to bottom, rgba(207,27,165,0) 25%, rgba(207,27,165,1) 50%, rgba(207,27,165,0) 75%) 1;
  --topnavbutton-style: #ff9442;
  
  --accent-style: rgba(207,27,165,1);
  --select-style: #ff9bd3;
  --visited-style: #6C2843;
  
  --button-hover-style: #14183a;
  --button-style: #A91972;
  --nearground-style: #ffd39b;
  --divider-grad-style: linear-gradient(to bottom, var(--nearground-style) 0%, #2b024d 50%, var(--nearground-style) 100%) 1;
  --visible-text-style: #2E3491;
}

.dark {
  --headerbox-style: #d8d;
  --header-div-style: linear-gradient(to bottom, var(--headerbox-style) 25%, #444 50%, var(--headerbox-style) 75%) 1;;
  --topnavbutton-style: #000;
  
  --accent-style: #d8d;
  --select-style: #c70;
  --visited-style: #a50;
  
  --button-hover-style: #fff;
  --button-style: #ddd;
  
  --nearground-style: #101;
  --divider-grad-style: linear-gradient(to bottom, var(--nearground-style) 0%, #ddd 50%, var(--nearground-style) 100%) 1;
  --visible-text-style: #fff;
}

body {
  font-family: "Consolas", "Emoji";
  padding: 0;
  margin: 0;
  max-width: 100%;
  background: var(--nearground-style);
  /*background: var(--nearground-grad);*/
  color: var(--visible-text-style);
}

p, label {font-family: "Consolas", "Emoji"; text-indent: 2ch; color: var(--visible-text-style); width: 70%; margin-left: 15%; margin-right: auto;}
h1 {font-family: "Alagard", "Emoji"; font-size: 300%; line-height: 1ex; color: var(--visible-text-style); text-align: center;}
h2, h3, h4 {font-family: "Alagard", "Emoji"; font-size: 200%; line-height: 0.1; text-indent: 2ch; color: var(--visible-text-style)}
h5, h6, b, button {font-family: "Cute", "Emoji"; font-size: 300%; line-height: 0; font-weight: normal; color: var(--visible-text-style)}
button {line-height: 1; text-indent: 0; border: none; background-color: var(--button-style); color: var(--topnavbutton-style)}
button:hover {background-color: var(--button-hover-style);}
img {max-width: 100%; max-height: 75vh;}

.colcontainer {display: flex}
.colleft {width: 48%}
.colright {
    padding-left: 1%;
    width: 48%;
    border-image: var(--divider-grad-style);
    border-left-width: 1%;
    border-left-style: solid;
    }
a img:hover {
    opacity: 0.7;
    transition: .2s ease;
}
::selection {background: var(--select-style)}
::-moz-selection {background: var(--select-style)}
a:hover {opacity: 0.5; transition: ease .2s}
a {color: var(--accent-style); text-decoration: none}
a:visited {color: var(--visited-style);}
#header {
    background: var(--headerbox-style);
    /*background: var(--headerbox-grad);*/
    width: 100%;
    color: var(--topnavbutton-style);
    margin: 0 0 0 0;
    padding: 0;
    font-size: 24pt;
    display: inline-block;
    font-family: "Mleitoid", "Emoji";
    line-height: auto;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
#header span {color: var(--topnavbutton-style);}
#header span span:hover {
    background-color: var(--button-hover-style);
    transition: .2s ease;
    cursor: pointer;
}
#header span span {
    padding: 0 10px 0 10px;   
}
#header span:first-child span:not(:first-child) {
    border-image: var(--header-div-style);
    border-left-width: 1%;
    border-left-style: solid;
}
#header span:last-child span:not(:last-child) {
    border-image: var(--header-div-style);
    border-right-width: 1%;
    border-right-style: solid;
}

/* grid display style */

.grid-item img {border-radius: 15px}

/* LARGE MOBILE TEXT*/
@media only screen and (max-device-width: 480px) {body {font-size: 1.5rem; color: var(--visible-text-style);} #header {top:10px; padding-top: 10px;}}