/* This is the general stylesheet used on all pages on ToN.art v.4

CONTENTS
    01. GENERAL PAGE FORMATTING
    02. ASSETS
    03. IMAGE STUFF
    04. ETC

*/


/* || [01. GENERAL PAGE FORMATTING] ------------------------------------ */

/* ------ [COLOR STUFF] ------------------------------------------------ */
/*
        BEHOLD! Site colors can be changed on the fly without having to find&replace/sift through messy code!
*/

/* -------------- [SUMMER+SPRING] -------------------------------------------- */

:root {
    --lightest-color: #fdf0d0;
    --lighter-color: #cec1a7;
    --light-color: #ada286;
    --mid-color: #768053;
    --dark-color: #232813;
    --darker-color: #0e100a;
    --darkest-color: #000000;
    --accent-light-color: #d3e379;
    --accent-mid-color: #a6b550;
    --accent-dark-color: #384e04;
    --warning-color: #ee881b;

    --shadow-color: rgba(5, 6, 0, 0.441);
    --glow-color: rgba(217, 255, 0, 0.441);
    --warning-glow-color: rgba(255, 115, 0, 0.403);

    --content-box-color: rgba(2, 2, 2, 0.837);
}


/* -------------- [FALL] -------------------------------------------- */
/*
:root {
    --lightest-color: #fdf0d0;
    --lighter-color: #cec1a7;
    --light-color: #ada186;
    --mid-color: #806d53;
    --dark-color: #281a13;
    --darker-color: #0d0705;
    --darkest-color: #000000;
    --accent-light-color: #e3c379;
    --accent-mid-color: #b06120;
    --accent-dark-color: #4e1b04;
    --warning-color: #ee1b1b;

    --shadow-color: rgba(5, 6, 0, 0.441);
    --glow-color: rgba(255, 162, 0, 0.441);
    --warning-glow-color: rgba(255, 0, 0, 0.403);

    --content-box-color: rgba(5, 6, 0, 0.441);
}
*/

/* -------------- [WINTER] -------------------------------------------- */
/*
:root {
    --lightest-color: #f9f2e0;
    --lighter-color: #d5cebf;
    --light-color: #a9a291;
    --mid-color: #717f76;
    --dark-color: #19281f;
    --darker-color: #050d07;
    --darkest-color: #000000;
    --accent-light-color: #d5f0dd;
    --accent-mid-color: #a0b9a6;
    --accent-dark-color: #414a43;
    --warning-color: #ee371b;

    --shadow-color: rgba(5, 6, 0, 0.441);
    --glow-color: rgba(255, 240, 188, 0.441);
    --warning-glow-color: rgba(255, 115, 0, 0.403);

    --content-box-color: rgba(5, 6, 0, 0.441);
}
*/

/* ------ [BODY] ------------------------------------------------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%; /* NOTE: This is for the full cover background. */
}

body {
    color: var(--light-color);
    font-family: 'IBM Plex Mono', monospace;

    height: 100%; /* NOTE: This is for the full cover background. */
    background-image: url('https://www.tombofnull.art/includes/assets/backgrounds/background1.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-color: var(--darker-color); /*That way, when loading bg image, you aren't getting flashed with white. */
}


/* ------ [VARIOUS BACKGROUNDS] ------------------------------------------------- */
.background2023 {

    height: 100%; /* NOTE: This is for the full cover background. */
    background-image: url('https://www.tombofnull.art/includes/assets/backgrounds/background2022.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-color: #434343; /*That way, when loading bg image, you aren't getting flashed with white. */
}

.background2022 {

    height: 100%; /* NOTE: This is for the full cover background. */
    background-image: url('https://www.tombofnull.art/includes/assets/backgrounds/background2022.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-color: #434343; /*That way, when loading bg image, you aren't getting flashed with white. */
}

.background2021 {

    height: 100%; /* NOTE: This is for the full cover background. */
    background-image: url('https://www.tombofnull.art/includes/assets/backgrounds/background2021.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-color: #434343; /*That way, when loading bg image, you aren't getting flashed with white. */
}

.background2020 {

    height: 100%; /* NOTE: This is for the full cover background. */
    background-image: url('https://www.tombofnull.art/includes/assets/backgrounds/background2020.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-color: #434343; /*That way, when loading bg image, you aren't getting flashed with white. */
}

.background2019 {

  height: 100%; /* NOTE: This is for the full cover background. */
  background-image: url('https://www.tombofnull.art/includes/assets/backgrounds/background2019.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-color: #434343; /*That way, when loading bg image, you aren't getting flashed with white. */
}

.background2018 {

  height: 100%; /* NOTE: This is for the full cover background. */
  background-image: url('https://www.tombofnull.art/includes/assets/backgrounds/background2018.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-color: #0f0f0f; /*That way, when loading bg image, you aren't getting flashed with white. */
}

.background2017 {

  height: 100%; /* NOTE: This is for the full cover background. */
  background-image: url('https://www.tombofnull.art/includes/assets/backgrounds/background2017.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-color: #0f0f0f; /*That way, when loading bg image, you aren't getting flashed with white. */
}

@media only screen and (max-width: 675px) {
    body {
            background-image: url('https://www.tombofnull.art/includes/assets/backgrounds/backgroundMobile.jpg');
            background-repeat: repeat;
            background-attachment: fixed;
        }
}


/* ------ [HEADER+NAV] ------------------------------------------------- */
.mainHeader {
    display: flex;
    justify-content: space-around;
    width: 100%;

    background-color: var(--darkest-color);
    box-shadow: 1px 1px 8px var(--shadow-color);
}

.mainNavbar {
    height: 130px;
    max-width: 1000px;
    width: 100%;

    display: flex;
    justify-content: space-between;
}

.mainNavbar ul {
    list-style-type: none;

   width: 100%;

    display: flex;
    justify-content: space-around;
    align-content: center;
    flex-wrap: wrap;

    font-family: 'Grenze', serif;
    font-size: 1.2em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
   
}

.mainNavbar li {
    margin: 5px;

    text-shadow: 1px 1px 0px none;
    transition: 0.3s;
}

.mainNavbar li:hover {
    text-shadow: 0px 0px 10px var(--glow-color);
}

.mainNavbar li:active {
    text-shadow: 0px 0px 0px none;
}

.mainNavbar .logo {
    width: 170px;

    border-radius: 100%;
    box-shadow: 0px 0px 8px 1px var(--shadow-color);
    transition: 0.3s;
}

.mainNavbar .logo:hover {
    box-shadow: 0px 0px 10px 1px var(--glow-color);
}

.mainNavbar .logo:active {
    box-shadow: 0px 0px 10px 1px var(--dark-color);
}



/* -------------- [HEADER+NAVE FOR SMALL SCREENS]----------------------------------------- */

@media only screen and (max-width: 675px) {

        .mainNavbar {
            padding: 10px 5px 0px 5px;
        }
        .mainNavbar .logo {
            width: 100px;
        
            border-radius: 100%;
            box-shadow: 0px 0px 8px 1px var(--shadow-color);
            transition: 0.3s;
        }

}

/* ------ [MAIN CONTENT] ----------------------------------------------- */
.mainContent {
    /* background-color: var(--content-box-color); */
    max-width: 1000px;
    padding: 10px;
    margin: auto;
}

.mainContent article {
    margin: 5px;
    margin-bottom: 10px;
    padding: 15px;
}


/* -------------- [CONTENT TWEAKS]----------------------------------------- */

    /* To be used on the sections classed as ".mainContent". */
.centerContentFlex {
    display: flex;
    justify-content: center;
}

    /* for use on mostly empty pages. */
.placeholderContent {
    height: 300px;
}

/* ------ [FOOTER] ----------------------------------------------------- */
footer {
    background: var(--darkest-color);
    box-shadow: -1px -1px 8px var(--shadow-color);

    font-family: 'Grenze', serif;
    text-transform: uppercase;

    display: flex;
    justify-content: space-around;

    padding: 20px 30px;
    height: 130px;
}

footer ul {
    list-style-type: none;
}





/* || [02. ASSETS] ----------------------------------------------------- */

/* ------ [FONTS]-------------------------------------------------------- */
        /*
          Grenze Gotisch - R 400: Biggest headers
          Grenze - R 400: Smaller headers, main links, buttons
          IBM Plex Mono: Body text
         */

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('https://www.tombofnull.art/includes/assets/fonts/IBM-Plex-Mono.eot');
    src: url('https://wwww.tombofnull.art/includes/assets/fonts/IBM-Plex-Mono.eot?#iefix') format('embedded-opentype'),
            url('https://www.tombofnull.art/includes/assets/fonts/IBM-Plex-Mono.woff') format('woff'),
            url('https://www.tombofnull.art/includes/assets/fonts/IBM-Plex-Mono.ttf') format('truetype'),
           url('https://www.tombofnull.art/includes/assets/fonts/IBM-Plex-Mono.svg') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
    font-family: 'Grenze Gotisch';
    src: url('https://www.tombofnull.art/includes/assets/fonts/Grenze-Gotisch.eot');
    src: url('https://wwww.tombofnull.art/includes/assets/fonts/Grenze-Gotisch.eot?#iefix') format('embedded-opentype'),
            url('https://www.tombofnull.art/includes/assets/fonts/Grenze-Gotisch.woff') format('woff'),
            url('https://www.tombofnull.art/includes/assets/fonts/Grenze-Gotisch.ttf') format('truetype'),
           url('https://www.tombofnull.art/includes/assets/fonts/Grenze-Gotisch.svg') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
    font-family: 'Grenze';
    src: url('https://www.tombofnull.art/includes/assets/fonts/Grenze.eot');
    src: url('https://wwww.tombofnull.art/includes/assets/fonts/Grenze.eot?#iefix') format('embedded-opentype'),
            url('https://www.tombofnull.art/includes/assets/fonts/Grenze.woff') format('woff'),
            url('https://www.tombofnull.art/includes/assets/fonts/Grenze.ttf') format('truetype'),
           url('https://www.tombofnull.art/includes/assets/fonts/Grenze.svg') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}


/* ------ [LINKS]-------------------------------------------------------- */
a:link {
    color: var(--accent-mid-color);
    text-decoration: none;
    transition: 0.2s;
}

a:visited {
    color: var(--accent-mid-color);
    text-decoration: none;
}

a:hover {
    color: var(--accent-light-color);
    text-decoration: none;
}

a:active {
    color: var(--accent-dark-color);
    text-decoration: none;
}


/* ------ [HEADINGS+TEXT] ----------------------------------------------- */
h1 {
    font-family: 'Grenze Gotisch', serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 3em;
    font-weight: 300;
    color: var(--lighter-color) ;
}

h2 {
    font-family: 'Grenze', serif;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 1.7em;
    color: var(--lighter-color);
}

p {
    line-height: 1.4em;
    margin-bottom: 15px;
}

b {
    color: var(--lighter-color);
}

ol {
    margin-bottom: 10px;
}

ul {
    margin-bottom: 15px;
}

li {
    margin-bottom: 15px;
    list-style-position: inside;
}

.noBullet {
    list-style-type: none;
}


/* -------------- [IMAGE CAPTION]----------------------------------------- */
figcaption {
    color: var(--mid-color);
    font-style: italic;

    background-color: var(--content-box-color);

    padding: 10px;
    margin: 5px;
}


/* -------------- [SPOILER TEXT]----------------------------------------- */
.spoiler {
    background: black;
    color: transparent;
    cursor: pointer;
    user-select: none;
  
    transition: background 0.3s ease 0.2s, color 0.2s ease 0.25s;
  }
  
  .spoiler:hover,
  .spoiler:focus {
    background: none;
    color: inherit;
  }


/* -------------- [WARNING TEXT]----------------------------------------- */
.warningText {
    color: var(--warning-color);
    font-weight: bold;
}


/* ------ [BUTTONS] ----------------------------------------------------- */
button {
    font-family: 'IBM Plex Mono', serif;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.04em;
    cursor: pointer;
    color: var(--darkest-color);
    background: var(--accent-mid-color);
    border: none;
    border-radius: 5px;
    box-shadow: 1px 1px 8px var(--shadow-color);
    transition: 0.2s;

    padding: 15px;
    margin: 5px;
}

button:hover {
    cursor: pointer;
    background:  var(--accent-light-color);
    border-radius: 7px;
    box-shadow: 0px 0px 8px var(--glow-color);
}


/* ------ [FORM INPUTS] ----------------------------------------------------- */
input[type=text] {
    color: var(--darker-color);
    background-color: var(--lighter-color);
    border: 3px soild var(--darkest-color);
    padding: 3px;
    margin: 3px;
    transition: 0.2s;
    outline: none;
}

input[type=text]:focus {
    border: 5px soild var(--mid-color);
}


input[type=button], input[type=submit], input[type=reset] {
    color: var(--darker-color);
    background: var(--lighter-color);
    border-width: 1px;
    border-radius: 2px;
    border-color: var(--accent-mid-color);
    transition: 0.2s;

    padding: 3px;
    margin: 3px;
}

input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
    color: var(--mid-color);
    background: var(--lightest-color);

    
}


/* ------ [DETAILS] ----------------------------------------------------- */
details {
    cursor: pointer;
}

/* || [03. IMAGE STUFF] -------------------------------------------------- */

/* -------------- [PLACEMENT]---------------------------- */
.imgFlexContainer {
    display: flex;
}

.imgBlockCenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    margin-top: 10px;
}

.imgBlockRight {
    display: block;
    float: right;
    margin: 10px;
}


/* -------------- [SIZING]---------------------------- */
.imgLarge {
    width: 100%;
}

.imgMedium {
    max-width: 400px;
}

.imgSmall {
    max-width: 200px;
}

.imgTiny {
    max-width: 100px;
}


/* -------------- [REVEAL IMG ON SCROLL STUFF]---------------------------- */
                    /* Fade in animation. Works with fadeInScript.js */

.reveal {
    position: relative;
    transform: translateY(10px);
    opacity: 0;
    transition: 1.5s all ease;
}

.reveal.active {
    transform: translateY(0);
    opacity: 1;
}


/* -------------- [OTHER FX]---------------------------- */

.imgGlowLink {
    box-shadow: 1px 1px 8px var(--shadow-color);
    transition: 0.2s;
}

.imgGlowLink:hover {
    cursor: pointer;
    color:  var(--accent-light-color);
    border-radius: 5px;
    box-shadow: 0px 0px 8px var(--glow-color);
}

.imgGlowLinkRound {
    border-radius: 100%;
    box-shadow: 1px 1px 8px var(--shadow-color);
    transition: 0.2s;
}

.imgGlowLinkRound:hover {
    border-radius: 100%;
    cursor: pointer;
    color:  var(--accent-light-color);
    box-shadow: 0px 0px 8px var(--glow-color);
}


.imgGreyscaleHoverFX {
    filter: grayscale(80%);
    transition: 0.4s;
}

.imgGreyscaleHoverFX:hover {
    filter: grayscale(0%);
}


/* || [04. ETC] -------------------------------------------------- */


/* -------------- [Fontawesome Stuff]---------------------------- */

.faBig {
    font-size: 3em;
}

/* -------------- [FX]---------------------------- */

.glowOnHover {
    box-shadow: 1px 1px 8px var(--shadow-color);
    transition: 0.2s;
}

.glowOnHover:hover {
    cursor: pointer;
    color:  var(--accent-light-color);
    border-radius: 5px;
    box-shadow: 0px 0px 8px var(--glow-color);
}