/* 
todo
    Use less hard borders, use more subtle color changes.
    Try gradients everywhere!
 */

:root {
    --ring-color: #b3dcfd;
    --dark-ring-color: #7bbcf1;
    --active-ring-color: #4dafff;
    --arms-color: #5c5790;
    --light-arms-color: #aea8f3;
    --active-arms-color: #b689ff;
    --blood-moon-color: #F0AAAA;
    --border-color: var(--arms-color);
    --background-color: black;
    --light-background-color: #0f131f;
    --highlight-color: #35363b;
    --highlight-color-2: #26252b;
    --button-color: var(--ring-color);
    --text-color: white;
    --hover-color: #5a6669;
    --press-color: #615e70;
    --site-scale: 1;
    --header-height: calc(60px * var(--site-scale));
    --nav-width: calc(200px * var(--site-scale));
    --general-border-size: calc(5px * var(--site-scale));
    --general-border-color: var(--arms-color);
    --general-border: var(--general-border-size) solid var(--general-border-color);
    --general-border-radius: calc(10px * var(--site-scale));
    /* --ring-border: var(--border-size) solid var(--dark-ring-color);
    --ring-outline: var(--border-size) solid var(--ring-color); */
    --ring-border: calc(var(--general-border-size) / 1.5) solid var(--dark-ring-color);
    --ring-outline: calc(var(--general-border-size) / 1.5) solid var(--ring-color);
    --general-padding: calc(10px * var(--site-scale));
    --general-margin: calc(15px * var(--site-scale));
    --icon-size: calc(40px * var(--site-scale));
    --default-drop-shadow: 0 3px 3px;
    --default-text-shadow: -1px -1px 1px #000, 1px -1px 1px #000,
        -1px 1px 1px #000, 1px 1px 1px #000;
    --site-left-padding: calc(16vw * var(--site-scale));
    --text-scale: 1;
    --text-smaller: calc(10pt * var(--text-scale));
    --text-small: calc(12pt * var(--text-scale));
    --text-medium: calc(14pt * var(--text-scale));
    --text-large: calc(16pt * var(--text-scale));
    --text-larger: calc(20pt * var(--text-scale));
    --text-x-large: calc(24pt * var(--text-scale));
    --text-xx-large: calc(30pt * var(--text-scale));
    --main-width: calc(100% - var(--nav-width) - (var(--site-left-padding) * 2));
}

* {
    padding: 0;
    margin: 0;
}

p {
    font-size: var(--text-small);
}

i {
    color: var(--ring-color);
}

h1 {
    font-size: var(--text-x-large);
}

h2 {
    font-size: var(--text-larger);
}

h3 {
    font-size: var(--text-large);
}

h4 {
    font-size: var(--text-medium);
}

h1,
h2,
h3,
h4 {
    text-shadow: var(--default-text-shadow);
}

/* Custom bullet color */

ul {
    list-style: none;
    /* Remove default bullets */
}

ul li::before {
    content: "\2022";
    /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: var(--ring-color);
    /* Change the color */
    font-weight: bold;
    /* If you want it to be bold */
    display: inline-block;
    /* Needed to add space between the bullet and the text */
    position: absolute;
    /* Fixes content size taking up space. */
    --distance-from-text: 1em;
    width: var(--distance-from-text);
    margin-left: calc(var(--distance-from-text) * -1.0);
    /* Also needed for space (tweak if needed) */
}

/* End custom bullet color */

blockquote {
    background-color: var(--highlight-color-2);
}

button {
    color: var(--text-color);
    text-shadow: var(--default-text-shadow);
    font-size: var(--text-medium);
    font-weight: bold;

    padding: var(--general-padding);
    margin: var(--general-margin);
    border-radius: var(--general-border-radius);
    border-color: var(--button-color);

    background-color: var(--button-color);
    filter: drop-shadow(var(--default-drop-shadow) var(--button-color));
}

button:hover {
    --button-color: var(--dark-ring-color);
    transition: 0.1s;
}

button:active {
    --button-color: var(--active-ring-color);
    transition: 0.1s;
}

a:link,
a:link:hover,
a:visited,
a:visited:hover {
    transition: 0.1s;
}

a:link {
    color: var(--ring-color);
}

a:link:hover {
    color: var(--dark-ring-color);
}

a:link:active {
    color: var(--active-ring-color);
}

a:visited {
    color: var(--light-arms-color);
}

a:visited:hover {
    color: var(--active-arms-color);
}

body {
    color: var(--text-color);
    /* text-shadow: var(--default-text-shadow); */
    background-color: var(--background-color);
    padding: 0;
    margin: 0;
}

/* Site side borders */
body::before {
    content: "";

    position: fixed;
    height: 100%;
    width: calc(100vw - (var(--site-left-padding) * 2) + (var(--general-border-size) * 2));
    top: 0;
    left: calc(var(--site-left-padding) - var(--general-border-size));

    background-color: var(--border-color);
}

header {
    position: fixed;
    top: 0;
    height: var(--header-height);
    width: calc(100vw - (var(--site-left-padding) * 2));
    left: var(--site-left-padding);
    contain: strict;
    z-index: 2;
}

header img {
    padding: var(--general-padding);
    height: calc(var(--header-height) - 10px);
}

header img:hover {
    background-color: var(--hover-color);
}

header img:active {
    background-color: var(--press-color);
}

main {
    top: var(--header-height);
    left: calc(var(--nav-width) + var(--site-left-padding));
    width: var(--main-width);
    position: relative;

    background-color: var(--background-color);
}

/* Main Background */
main::before {
    content: "";

    position: fixed;
    top: 0;
    height: 100vh;
    width: var(--main-width);

    background-color: black;
}

main section {
    --margin-size: calc(var(--general-margin) * 1.5);
    --border-size: var(--general-border-size);

    padding: var(--general-padding);
    margin: var(--margin-size);
    border: var(--ring-border);
    /* border-color: var(--ring-color); */
    border-width: var(--general-border-size);
    border-radius: var(--general-border-radius);

    background-color: var(--highlight-color);
    filter: drop-shadow(var(--default-drop-shadow));

    /* Outer Title */
    margin-top: calc(var(--general-margin) * 2.0 + var(--general-padding) * 2.0);
}

/* Outer Title */
main section::before {
    content: "<br><br>";
}

main section:not(:last-child) {
    margin-bottom: 0;
}

main section>* {
    padding: var(--general-padding);
    margin: var(--general-margin);
}

main section hr {
    color: var(--ring-color);

    margin: calc(var(--general-padding) / 2.0) var(--general-margin);
    padding: 0;
}

main section button {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

main section>h1 {
    /* Inner Title */
    /* text-align: center;
    text-overflow: "...";
    overflow: auto;

    padding: 0; */

    /* Outer Title */
    position: absolute;

    overflow: hidden;
    text-align: center;
    bottom: calc(100% - var(--general-margin) * 2.0 - var(--general-padding) * 2.0);
    background-color: var(--highlight-color-2);
    display: block;
    border: var(--ring-border);
    border-radius: var(--general-border-radius);
    outline: var(--ring-outline);
    /* outline: var(--general-border-radius); */
    margin: var(--general-margin);
    padding: var(--general-padding);
    left: calc(var(--general-padding) * -0.5);
    max-width: calc(100% - var(--general-padding) * 2.0 - var(--general-margin) * 2.0);
}

main section>h2 {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Inner Title */
/* main section>h1::after {
    content: "";

    display: block;
    margin: var(--general-margin);
    width: calc(100% - var(--general-margin * 2));
    height: 5px;
    margin-bottom: var(--margin-size);

    border-radius: var(--general-border-radius);

    background-color: var(--ring-color);
    filter: drop-shadow(var(--default-drop-shadow));
} */

main section li:not(:last-child) {
    margin-bottom: var(--general-margin);
}

main section>img.big_image {
    display: block;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

#pkmncc_birthdays {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

#pkmncc_birthdays>* {
    margin: 0;
    padding: 0;
}

#pkmncc_double_column {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}

#pkmncc_double_column>section {
    display: block;
    margin-right: 0;
    width: calc(50% - ((var(--margin-size) + var(--border-size)) * 2) - var(--general-padding));
}

#pkmncc_double_column_uneven {
    display: flex;
    flex-wrap: wrap;
}

/* Outer Title */
#pkmncc_double_column_uneven > div:nth-child(2) > section {
    margin-top: calc(var(--general-margin) * 4.0 + var(--general-padding) * 4.0);
}

/* #pkmncc_double_column_uneven > div {
    
} */

/* Left side */
#pkmncc_double_column_uneven>div:nth-child(1) {
    width: 67%;
}

/* #pkmncc_double_column_uneven > div:nth-child(1) > section {
    border: none;

    filter: drop-shadow(var(--default-drop-shadow) var(--highlight-color));
} */

/* Right side */
#pkmncc_double_column_uneven>div:nth-child(2) {
    width: 33%;
}

#pkmncc_double_column_uneven>div:nth-child(2)>section {
    margin-left: 0;
}

/* Nav */

nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

#pkmncc_top_nav {
    display: flex;
    align-items: center;
    justify-content: right;
    contain: strict;
    height: var(--header-height);
    width: calc(100% - (var(--site-left-padding) * 2));
    left: var(--site-left-padding);
    position: fixed;
    border-bottom: var(--general-border);
    background-image: url("../img/header_image.png");
    background-size: 100%;
}

#pkmncc_top_nav>* {
    padding: var(--general-padding);
    margin: 3px;

    display: block;
    border: var(--general-border);
    border-radius: var(--general-border-radius);

    background-color: white;
}

#pkmncc_top_nav>h4 {
    background-color: var(--highlight-color);
}

#pkmncc_top_nav>*:nth-child(even) {
    background-color: var(--highlight-color-2);
}

#pkmncc_top_nav>a {
    height: var(--icon-size);
    width: var(--icon-size);

    padding: 0;
}

#pkmncc_top_nav>a>img {
    height: var(--icon-size);
    width: var(--icon-size);
    border-radius: var(--general-border-radius);

    background-color: white;
}

#pkmncc_left_nav {
    height: calc(100% - var(--header-height));
    overflow-x: hidden;
    overflow-y: visible;
    display: block;
    contain: strict;
    top: var(--header-height);
    left: var(--site-left-padding);
    width: var(--nav-width);
    position: fixed;
    border-right: var(--general-border);

    z-index: -1;
}

/* Nav Catagory */

.pkmncc_nav_cat {
    display: block;
    user-select: none;
    width: 100%;
    border-top: var(--general-border);
    /* border-color: var(--ring-color); */

    background-color: var(--background-color);
}

.pkmncc_nav_cat>input {
    display: none;
}

.pkmncc_nav_cat>h3 {
    display: block;
    padding: var(--general-padding);
}

.pkmncc_nav_cat div {
    /* background-color: var(--highlight-color); */
    margin: 0;
    position: relative;
}

.pkmncc_nav_cat h3,
.pkmncc_nav_sub_cat a {
    padding: var(--general-padding);
}

/* Nav Catagory Dropdown Input */

.pkmncc_nav_cat input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
}

/*  */

.pkmncc_nav_cat_title {
    display: inline;
}

.pkmncc_nav_drop {
    display: inline;
}

/* Sub Navigator Catagory */

.pkmncc_nav_sub_cat {
    background-color: var(--highlight-color);
}

.pkmncc_nav_sub_cat:nth-child(even) {
    background-color: var(--highlight-color-2);
}

.pkmncc_nav_sub_cat:hover,
.pkmncc_nav_sub_cat:focus-within {
    background-color: var(--hover-color) !important;
}

.pkmncc_nav_sub_cat:active {
    background-color: var(--press-color);
}

.pkmncc_nav_sub_cat a {
    --left-offset: 5px;
    left: var(--left-offset);

    position: relative;
    display: block;
    width: 100%;
}

.pkmncc_nav_sub_cat a:link,
.pkmncc_nav_sub_cat a:visited {
    color: var(--text-color);
    text-decoration: none;
}

/* Line through sub catagories with no link. */
.pkmncc_nav_sub_cat a:not([href]) {
    text-decoration: line-through;
}

/* This was a bullet point but it be actin funny. */
/* .pkmncc_nav_sub_cat a::before {
    content: "";
} */

/* Device specific  */

/* Small width (mobile, IPad, small monitor) */
@media only screen and (min-width: 0px) and (max-width: 1300px) {
    :root {
        --site-left-padding: 1vw;
    }
}

/* Very small width (select mobile devices) */
/* This isn't working well right now and I'm not sure if it'll ever work well. */
/* @media only screen and (min-resolution: 3dppx) and (orientation: portrait) {
    :root {
        --text-scale: 2.5;
        --site-scale: 1.65;
    }

    #pkmncc_double_column_uneven>div:nth-child(1),
    #pkmncc_double_column_uneven>div:nth-child(2) {
        flex-wrap: wrap;
        width: 100%;
    }

    #pkmncc_double_column_uneven > div:nth-child(2) > section {
        margin-left: calc(var(--general-margin) * 1.5);
    }
} */