/*
* This stylesheet defines THEMATIC formatting rules for the document.
* For formatting rules regarding document structure, please refer to the
* STYLE.CSS stylesheet.
*
* For consistency and clarity, it is important that the stylesheet retain
* the structure in which it is written!!
* 
* The code written below can be modified to fit various theming styles and
* formats. This is a friendly reminder that this stylesheet should NOT be
* used for structural formatting -- to amend the structural formatting,
* please refer to STYLE.CSS!
*
* The following source code may be used in accordance to the licensing
* terms as provided in the GNU General Public License, provided that credit
* is provided to Jeff Walker. For more information, please feel free to
* send an email to info@jeffwalker.dev.
*/

@import url('https://fonts.googleapis.com/css?family=Red+Hat+Display');
@import url('https://fonts.googleapis.com/css?family=Ubuntu+Mono');

/* Document at-large */
*
{
    
}

::selection
{
    background: rgba(255, 255, 255, .75);
    color: black;
}

html, body
{
    background: #111;
    /*font-family: Varela, Tahoma, Geneva, Verdana, sans-serif;*/
    font-family: Red Hat Display, sans-serif;
}

div.wrapper
{
    background: #222;
    color: white;
}

div.article,
article
{
    background: inherit;
    color: inherit;
}

div.section,
section
{
    /* Nothing to see here */
}

/* Document header */
div.header,
header
{
    background: rgba(0, 0, 0, .85);
    color: white;

    font-size: .8em;;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition: .35s !important;
}

/*div.header > a:link[href="/andromeda/index.html"] { background: url('img/icons/48/andromeda-logo-white.png'); }
div.header > a:link[href="/universe/index.html"] { background: url('img/icons/48/shopping-bag-white.png'); }
div.header > a:link[href="/support/index.html"] { background: url('img/icons/48/cross-white.png'); }
div.header > a:link[href="/news/index.html"] { background: url('img/icons/48/newspaper-white.png'); }
div.header > a:link[href="/sites/index.html"] { background: url('img/icons/48/map-white.png'); }*/

div.header.default > a:hover,
div.header > a:focus,
header.default > a:hover,
header > a:focus
{
    background: rgba(255, 255, 255, .25);
    border-color: rgba(255, 255, 255, .5);
}

header > a:nth-child(1):hover { border-color: rgb(240, 0, 0); }
header > a:nth-child(2):hover { border-color: rgb(240, 128, 0); }
header > a:nth-child(3):hover { border-color: rgb(240, 192, 0); }
header > a:nth-child(4):hover { border-color: rgb(0, 224, 0); }
header > a:nth-child(5):hover { border-color: rgb(0, 192, 240); }
header > a:nth-child(6):hover { border-color: rgb(192, 0, 240); }

/*
div.rainbow > div:nth-child(1) { background: rgb(240, 0, 0); }
div.rainbow > div:nth-child(2) { background: rgb(240, 128, 0); }
div.rainbow > div:nth-child(3) { background: rgb(240, 192, 0); }
div.rainbow > div:nth-child(4) { background: rgb(0, 240, 0); }
div.rainbow > div:nth-child(5) { background: rgb(0, 192, 240); }
div.rainbow > div:nth-child(6) { background: rgb(192, 0, 240); }*/

header.mobile > a:not(.home):hover,
header.titlebar > a:not(.home):hover
{
    background: rgba(255, 255, 255, .25);
}

/* Dropdown and contents */
div.dropdown
{
    background: rgba(0, 0, 0, .8);
    color: white;

    font-size: .8em;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition: .35s;
}

div.header *,
header *,
div.dropdown *
{
    color: white;
    transition: .35s;
}

div.dropdown *:hover,
div.dropdown input:hover,
div.dropdown input:focus
{
    background: rgba(255, 255, 255, .25);
    outline: none;
}

div.dropdown a:hover
{
    background: rgba(255, 255, 255, .25);
}

div.dropdown > *
{
    background: transparent;
}

/* Dropdown menu icon */
div.header > a.menu > div.container > div,
header > a.menu > div.container > div
{
    background: white;
}

/* Searchbox */
header > input:hover,
header > input:focus
{
    border-bottom-color: rgb(192, 0, 240);
}

div.dropdown > input.search
{
    background: rgba(0, 0, 0, .125);
    border: none;
}

div.dropdown > input.search:hover,
div.dropdown > input.search:focus
{
    background: rgba(255, 255, 255, .25);
}

div.header > input:hover,
div.header > input:focus,
header > input:hover,
header > input:focus
{
    background: rgba(255, 255, 255, .25);
}

div.header > input.search::placeholder,
header > input.search::placeholder
{
    color: white;
}

div.dropdown > input.search::placeholder,
.dropdown > input.search::placeholder
{
    color: rgba(255, 255, 255, .65);
}

/* Breadcrumb trail */
.breadcrumb
{
    background: linear-gradient(180deg, rgb(96, 96, 96), rgb(92, 92, 92));
}

/* Headings and paragraphs */
h1
{
    /* Nothing to see here */
}

h2
{
    /* Nothing to see here */
}

h3
{
    /* Nothing to see here */
}

h4
{
    /* Nothing to see here */
}

h5
{
    /* Nothing to see here */
}

h6
{
    /* Nothing to see here */
}

p
{
    /* Nothing to see here */
}

p img.icon
{
    height: 1em;
}

/* Inputs */
input[type="button"]
{
    background: rgb(96, 144, 192);
    color: white;
}

.tilegroup > a:focus,
input[type="button"]:focus
{
    background: rgb(128, 192, 255);
    border: 3px solid rgb(255, 192, 0);
}

.tilegroup > a:hover,
input[type="button"]:hover
{
    background: rgb(128, 192, 255);
    color: white;
}

.tilegroup > a:active,
input[type="button"]:active
{
    background: rgb(64, 96, 128);
    color: rgba(255, 255, 255, .5);
}

/* Other content elements */
hr
{
    background: rgba(255, 255, 255, .2);
    border: none;
    height: 1px !important;
    max-height: 1px !important;
}

a, button, input
{
    transition: .35s;
}

a, a:link, a:visited
{
    color: rgb(128, 192, 255);
    text-decoration: none;
}

a:hover
{
    color: rgb(128, 240, 255);
}

a:active,  a:focus
{
    color: rgb(255, 192, 0);
}

.tilegroup > a
{
    background: rgba(255, 255, 255, .125);
    border: 3px solid transparent;
    outline: none;
}

.tilegroup > a:hover
{
    background: rgb(96, 144, 192);
}

.tilegroup > a:active
{
    background: rgb(48, 72, 96);
}

/*a:visited
{
    color: rgb(192, 128, 255);
}*/

/* Tables */
table
{
    display: inline-table;
    border: 1px solid rgba(255, 255, 255, .5);
    border-collapse: collapse;
    text-align: left;
    margin: 0;
    margin-bottom: 1em;
    padding: 0;
    width: auto;
    width: 100%;
    overflow-x: auto;
}

table *
{
    transition: .35s;
    word-wrap: break-word;
}

table > *
{
    border: 0;
}

thead tr
{
    background: rgba(192, 192, 192, .75);
    color: #222;
}

tbody tr:nth-child(even)
{
    background-color: rgba(128, 128, 128, .5);
}

th
{
    white-space: nowrap;
}

th, td
{
    padding: 1em;
    vertical-align: top;
    width: auto;
}

th:not(:first-child),
td:not(:first-child)
{
    border: 0;
    border-left: 1px solid rgb(128, 128, 128);
}

th:first-child,
td:first-child
{
    padding-left: 40px !important;
}

th:last-child,
td:last-child
{
    padding-right: 40px !important;
}

/* UI icons */
div.iconbox a
{
    display: inline-block;
    border: 3px solid transparent;
    color: white;
    text-decoration: none;
    border-radius: 3px;
    margin: 10px;
    outline: none;
    padding: 10px;
    transition: .35s;
}

div.iconbox a img
{
    transition: .35s;
}

div.iconbox a:focus
{
    border: 3px solid rgb(255, 192, 0);
    background: rgba(128, 192, 255, .5);
}

div.iconbox a:focus img
{
    filter: brightness(125%);
}

div.iconbox a:hover
{
    background: rgba(255, 255, 255, .25);
}

div.iconbox a:hover img
{
    filter: brightness(125%);
}

div.iconbox a:active
{
    background: rgba(0, 0, 0, .5);
}

div.iconbox a:active img
{
    filter: brightness(75%);
}

div.iconbox a *
{
    display: block;
}

/* Modals */
div.modal a
{
    color: #0ac;
    text-decoration: none;
}

div.modal a:hover
{
    color: #0cf;
    text-decoration: none;
}

/* Custom classes and names */
.blurred
{
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.tinted
{
    background-color: rgba(0, 0, 0, .5);
}

.tinted:not(.noshadow)
{
    text-shadow: 0 8px 24px black;
}

.tinted:not(.noshadow) img
{
    filter: drop-shadow(0 8px 24px black);
}

/* Footer */
div.footer,
footer
{
    background: #333;
    color: white;
    font-size: .8em;
    padding: 10px 20px;
    position: relative;
    width: calc(100% - 40px);
}

footer a
{
    color: rgb(216, 216, 216);
}

div.footer hr,
footer hr
{
    background: rgba(0, 0, 0, .15);
    height: .1px;
}

div.footer div.column:not(:first-child),
footer div.column:not(:first-child)
{
    border-left: 1px solid rgba(0, 0, 0, .15);
}

div.rainbow > div:nth-child(1) { background: rgb(240, 0, 0); }
div.rainbow > div:nth-child(2) { background: rgb(240, 128, 0); }
div.rainbow > div:nth-child(3) { background: rgb(240, 192, 0); }
div.rainbow > div:nth-child(4) { background: rgb(0, 240, 0); }
div.rainbow > div:nth-child(5) { background: rgb(0, 192, 240); }
div.rainbow > div:nth-child(6) { background: rgb(192, 0, 240); }

/* Scrollbars */
:hover::-webkit-scrollbar
{
    display: initial;
}

::-webkit-scrollbar-track:horizontal
{
    border-top: 1px solid #ccc;
}

::-webkit-scrollbar-track:vertical
{
    border-left: 1px solid #ccc;
}

::-webkit-scrollbar,
::-webkit-scrollbar-corner
{
    background-color: transparent;
    backdrop-filter: blur(10px);
}

::-webkit-scrollbar:horizontal
{
    height: 7px;
}

::-webkit-scrollbar:vertical
{
    width: 7px;
}

/*::-webkit-scrollbar-track
{
    background-color: transparent;
}*/

::-webkit-scrollbar-track:horizontal
{
    border-top: 0;
}

::-webkit-scrollbar-track:vertical
{
    border-left: 0;
}

::-webkit-scrollbar-track:hover
{
    background-color: rgba(128, 128, 128, .25);
    backdrop-filter: blur(10px);
}

::-webkit-scrollbar-thumb
{
    background-color: rgba(0, 0, 0, .5);
    border: 1px solid rgba(255, 255, 255, .25);
    backdrop-filter: blur(10px);
}

::-webkit-scrollbar-thumb:hover
{
    background-color: #444;
}

::-webkit-scrollbar-thumb:active
{
    background-color:#999;
}