:root {
   --Anemo: #4CF7D5;
   --Geo: #F7D35C;
   --Electro: #B77BF7;
   --Dendro: #11DA8C;
   --Hydro: #0FE7FD;
   --Pyro: #F96B38;
   --Cryo: #C0FFFF;
}

/* Yeah sooo... I might use Genshin Colours... So what? */

/* FireFox */
* {
   scrollbar-color: #ccc #292929;
}

/* Chrome/Edge/Safari */
*::-webkit-scrollbar-track {
   background: #ccc;
}

*::-webkit-scrollbar-thumb {
   background-color: var(--Electro);
}

body {
   background-color: #191919;
}

/* Top Menu */
#toTop {
   background-color: var(--Geo);
   color: black;
}

#toTop:hover {
   background-color: var(--Pyro);
}

/* Headers & Footers */
header {
   background-color: #292929;
   color: white;
}

footer {
   background-color: #292929;
   color: white;
}

/* Nav Menu */
nav {
   background-color: #292929;
}

nav a {
   color: white;
}

.dropdown .dropbtn {
   color: white;
   background-color: inherit;
}

nav a:hover,
.dropdown:hover .dropbtn {
   background-color: var(--Dendro);
   color: black;
}

.dropdown-content {
   background-color: #ccc;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-content .menuheader {
   background: var(--Electro);
   color: white;
}

.menucolumn {
   background-color: #ccc;
}

.menucolumn a {
   color: #292929;
}

.menucolumn a:hover {
   background-color: white;
}

.singledropdownbut {
   color: white;
}

nav a:hover,
.singledropdown:hover .singledropdownbut {
   background-color: var(--Dendro);
   color: black;
}

.singledropdown-content {
   background-color: #ccc;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.singledropdown-content a {
   color: black;
}

.singledropdown-content a:hover {
   background-color: var(--Cryo);
}

/* Links */
a {
   color: var(--Pyro);
}

a:hover {
   color: var(--Geo);
}

/* Cards */
.card,
.cardstatic {
   background-color: #292929;
   color: white;
}

.card {
   box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
}

.card:hover {
   box-shadow: rgba(2, 8, 20, 0.1) 0px 0.35em 1.175em, rgba(2, 8, 20, 0.08) 0px 0.175em 0.5em;
}

/* HR Tags */
hr:before {
   background: linear-gradient(to right, transparent, #191919, transparent);
}

/* Tabs */
.tab {
   border-color: transparent;
   background-color: #292929;
   color: white;
}

.tab input[type=button] {
   background-color: inherit;
   color: white;
}

.tab input[type=button]:hover {
   background-color: var(--Pyro);
   color: black;
}

.tab input[type=button].active {
   background-color: var(--Hydro);
   color: black;
}

.tabcontent {
   border-color: transparent;
   background-color: #292929;
   color: white;
}

.vertab {
   border-color: transparent;
   background-color: #f1f1f1;
}

.vertab input[type=button] {
   background-color: inherit;
}

.vertab input[type=button]:hover {
   background-color: var(--Hydro);
}

.vertab input[type=button].active {
   background-color: var(--Pyro);
}

.vertabcontent {
   border-color: white;
}

.TabControl .TabTitle {
   border-color: white;
   background-color: #c0c0c0;
   color: #191919;
}

.TabControl .TabTitle:hover {
   background-color: var(--Electro);
   color: black;
}

.TabControl .TabTitleSelected,
.TabControl .TabTitleSelected:hover {
   background-color: var(--Hydro);
   color: black;
}

.TabControl .TabContents {
   border-color: white;
   background-color: #292929;
   color: white;
}

.TabControl .TabContents .FormContainer {
   border-color: transparent;
   background-color: inherit;
   color: inherit;
}

/* A Table */
.ATable, .ATable th, .ATable td, .ATable tr {
   border-color: white;
}

.Diffy, .Diffy th, .Diffy td, .Diffy tr {
   border-color: transparent;
}


table th, table td, table tr {
   border-color: transparent;
}

/* Tooltips */
.tooltip .tooltiptext {
   background-color: #555;
   color: #fff;
}

/* Timeline */
.outer {
   border-left: 2px solid #333;
}

.timelinepiece {
   background: #333;
   color: white;
}

.title {
   color: orangered;
}

.title::before {
   background: orangered;
   border: 2px solid orangered;
}

.Active {
   background-color: #300000 !important;
}

.spoiler, .spoiler a { 
   color: transparent; 
   background-color: #300000;
}

.spoiler:hover, .spoiler:hover a {
   color: white;
   background-color: transparent;
}