/* 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!
*/

/* -------------- [MAIN] -------------------------------------------- */

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

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

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






/* ------ [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/gallery/archive/0000/syout/includes/assets/background.jpg');
    background-repeat: repeat;
    background-attachment: fixed;
    background-color: var(--darkest-color); /*That way, when loading bg image, you aren't getting flashed with white. */
}


/* ------ [VARIOUS BACKGROUNDS] ------------------------------------------------- */


@media only screen and (max-width: 675px) {
    body {
            background-image: none;
            background-color: var(--darkest-color);
        }
}


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

    background-color: var(--darkest-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: 'IBM Plex Mono', monospace;
    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: 155px;

    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;

    /*Fade-in on load animation for content on pages. */
    animation: fadeInAnimation ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/*Related to the fade-in on load animation for content on pages. */
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.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]-------------------------------------------------------- */
        /*
          RandomIV - 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://www.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: 'RandomIV';
    src: url('https://www.tombofnull.art/includes/assets/fonts/RandomIV-Bold.eot');
    src: url('https://www.tombofnull.art/includes/assets/fonts/RandomIV-Bold.eot?#iefix') format('embedded-opentype'),
            url('https://www.tombofnull.art/includes/assets/fonts/RandomIV-Bold.woff2') format('woff2'),
            url('https://www.tombofnull.art/includes/assets/fonts/RandomIV-Bold.woff') format('woff'),
            url('https://www.tombofnull.art/includes/assets/fonts/RandomIV-Bold.ttf') format('truetype'),
            url('https://www.tombofnull.art/includes/assets/fonts/RandomIV-Bold.svg') format('svg');
font-weight: bold;
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://www.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://www.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: 'IBM Plex Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 3em;
    color: var(--lightest-color) ;
}

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

h3 {
    font-family: 'IBM Plex Mono', monospace;
    font-style: bold;
    color: var(--lighter-color);
}

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

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

ol {
    margin-bottom: 15px;
}

ul {
    margin-bottom: 15px;
}

li {
    margin-bottom: 3px;
    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', monospace;
    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;
}

.imgFlipY {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

.imgFlipX {
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}


/* -------------- [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);
}

/* -------------- [Adjusting 404 Images]---------------------------- */

.img404 img {
    width:100%; max-width:400px;
}