/*  Created by MarsRed on 11/04/2024
            My Website
            V 0.1
            Changed on 13
            20/04/2024       */

* {
    /*  border: 1px solid red;  */
}

:root {
    --default-font: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace;
    --heading-font: Georgia, Times, Times New Roman, serif; ;

    --heading-title-size:           30px;
    --heading-section-size:         27px;
    --heading-sub-size:             23px;
    --default-font-size:            18px;
    --image-section-height:         200px;

    --brand-color:                  hsl(0,  100%, 30%);
    --hightlight-color-light:       hsl(0,  100%, 50%);
    --hightlight-color-dark:        hsl(0,  100%, 10%);
    --analogus-01:                  hsl(60, 100%, 50%);
    --analogus-02:                  hsl(30, 100%, 50%);
    --base-color-01:                hsl(0,  100%, 100%);
    --base-color-02:                hsl(0,  0%,   80%);
    --base-color-03:                hsl(0,  0%,   60%);
    --base-color-04:                hsl(0,  0%,   40%);
    --base-color-05:                hsl(0,  0%,   20%);
    --base-color-06:                hsl(0,  0%,   0%);
    --shadow-color:                 hsla(0, 0%,   0%,   0.8);
    --shadow-color-white:           hsla(0, 100%, 100%, 0.8);
}

/*####################################################################################################*/
/*  Utility */
.remove_item {
    display: none !important;
}

.no_margin {
    margin: 0 !important;
}

/*####################################################################################################*/
/*  Style - Fonts, Colors and Visuals  */
/*  For hover and other interactions, visit the section, two sections bleow */
header,
main,
footer {
    font-family:        var(--default-font);
}

header,
footer {
    background-color:   var(--brand-color);
    color:              var(--base-color-02);
}

header {
    box-shadow:         0px 30px 20px var(--shadow-color);
}

main {
    background-color:   var(--base-color-05);
    color:              var(--base-color-01);
    text-shadow:        1px 3px var(--base-color-06);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family:        var(--heading-font);
    letter-spacing:     0.2ch;
}

h1 {
    font-size:          var(--heading-title-size);
}

p,
aside,
.text_ul li{
    font-size:          var(--default-font-size);
}

main a {
    color:              var(--analogus-01);
    text-shadow:        none;
}

main a:visited {
    color:              var(--analogus-02);
}

header a,
footer a {
    color:              var(--analogus-01);
}

article {
    margin:             auto;
    background-color:   var(--base-color-05);
}

figcaption,
aside {
    background-color:   var(--base-color-04);
    font-style:         italic;
    font-size:          calc(var(--default-font-size) - 2px);
}

figcaption {
    text-shadow:        none;
}

figcaption a {
    font-weight:        normal;
}

.imageblock_left,
.block_left aside {
    box-shadow:         2px 2px 1px var(--shadow-color);
}

.imageblock_right,
.block_right aside {
    box-shadow:         -2px 2px 1px var(--shadow-color);
}

.block_left aside {
    border-radius:      0 25% 25% 0;
    margin:             auto;
}

.block_right aside {
    border-radius:      25% 0 0 25%;
    margin:             auto;
}

.whitespace {
    background-color:   var(--base-color-02);
    color:              var(--base-color-05);
    text-shadow:        1px 3px var(--base-color-01);
    border:             0.1px solid var(--base-color-02);
}

.whitespace a {
    color:              var(--brand-color);
}

.whitespace a:visited {
    color:              var(--base-color-06);
}

.whitespace ul::marker {
    text-shadow:        none;
}

div .media_copyright {
    display:            none;
}

div:hover .media_copyright {
    display:            block;
}

.media_copyright {
    background-color:   var(--shadow-color-white);
}

.media_copyright,
.media_copyright a,
.media_copyright a:visited {
    color:              var(--base-color-06);
    text-shadow:        none;
    font-weight:        bold;
}

/*####################################################################################################*/
/*  Layout - Positioning, Size, Breaks etc.  */

header {
    position:           sticky;
    top:                0px;
    z-index:            1;
}

body {
    display:            flex;
    flex-direction:     column;
    max-width:          100%;
    margin:             auto;
}

main {
    width:              100%;
    margin:             auto;
}

footer {
    padding:            2ch 1ch;
}

section {
    margin-bottom: 3.5ch;
}

header nav ul li{
    display: inline-block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    padding:            1ch 1ch;
    text-align:         center;
}

p,
aside,
small,
figcaption,
.text_ul li  {
    max-width:          85ch;
    line-height:        1.5;
    min-width:          400px;
}

p,
aside
{
    padding:            1ch 1ch;
}

a {
    font-weight:        bold;
}

aside {
    text-align:         center;
    padding:            3ch 2ch 0 2ch;
    width:              80%;
}

figure {
    width:              400px;
    height:             auto;
    overflow:           hidden;
    padding:            0;
    margin:             0;
}

img {
    max-width:          100%;
    height:             auto;
    display:            block;
}

figcaption {
    width:              400px;
}

footer small {
    display:            block;
    width:              fit-content;
    text-align:         center;
    margin:             auto;
    min-width:          fit-content;
}

.section_layer_02,
.center_like_section {
    max-width:          950px;
    margin:             auto;
}

/*  Fuck you Chrome/Webkit */
figcaption a,
.media_copyright {
    line-break:         anywhere;
}

ul .coming_soon {
    float: right;
}

.whitespace {
    padding-bottom:     10ch;
}

.imageblock_left {
    width:              fit-content;
    margin:             1ch;
}

.imageblock_right {
    width:              fit-content;
    margin:             1ch;
}


.media_copyright {
    float: right;
    position: relative;
    margin-top: calc(var(--image-section-height) - 50px );
}

#table_of_content {
    line-height: 1.5;
}

#table_of_content li {
    margin-top: 1ch;
}

#image_section_header {
    height:             var(--image-section-height);
    width: 100%;
    background-image:   url('./resources/images/GalacticHeros.jpg');
    background-size:    cover;
    background-repeat:  no-repeat;
}

#footer_links {
    width:              minmax(fit-content, 85ch);
    margin:             auto;
}

#copyright_info {
    margin:             5ch auto 0 auto;
}

#copyright_info small {
    width:              80%;
    margin:             auto;
    text-align:         left;
    display:            block;
}

/*####################################################################################################*/
/* Interaction */

/*  Add Cursors, Moving Images, Hover etc. here */

a:hover {
    text-decoration: none;
}

figure:hover {
   transform:       scale(1.3, 1.3);
   transition:      all 300ms linear 200ms;
}

.imageblock_left figure:hover {
    box-shadow:     20px 20px 10px var(--shadow-color);
}

.imageblock_right figure:hover {
    box-shadow:     -20px 20px 10px var(--shadow-color);
 }

/*####################################################################################################*/
/* Images, Icons etc. */

#myanimelist::before {
    content:            " ";
    background-image:   url(./resources/icons/MAL.ico);
    display:            inline-block;
    background-size:    2ch 2ch;
    width:              2ch;
    height:             2ch;
    margin:             auto 0.5ch;
    position:           relative;
    top:                0.8ch;
}

#steam::before {
    content:            " ";
    background-image:   url(./resources/icons/Steam.ico);
    display:            inline-block;
    background-size:    2ch 2ch;
    width:              2ch;
    height:             2ch;
    margin:             auto 0.5ch;
    position:           relative;
    top:                0.8ch;
}

/*  Chrome seems to have problems loading the icon correctly, probably will fix on running through a webserver instead of local,
        but keep an eye on this, just in case.  */
#youtube::before {
    content:            " ";
    background-image:   url(./resources/icons/Youtube.ico);
    display:            inline-block;
    background-size:    3ch 2ch;
    width:              3ch;
    height:             2ch;
    margin:             auto 0.5ch;
    position:           relative;
    top:                0.8ch;
}

/*####################################################################################################*/
/*  Responsivenes   */
/*  Base design is already optimated for mobile */

/*  Tablet  */
@media only screen and (min-width: 480px) {
    :root {
        --image-section-height: 320px;
    }

    .imageblock_right {
        margin-left:    calc(100% - 400px - 1ch);
    }

    #footer_links {
        width:          fit-content;
        margin:         auto;
    }

    #copyright_info {
        max-width:      85ch;
    }
}

/*  Tablet Landscape    */
@media only screen and (min-width: 768px) {
    :root {
        --image-section-height: 450px;
    }

    .imageblock_left {
        float:          left;
    }

    .imageblock_right {
        margin:         1ch;
        float:          right;
    }

    footer small {
        display:        inline-block;
    }
}

/*  Laptop    */
@media only screen and (min-width: 1024px) {
    :root {
        --image-section-height: 650px;
    }
}

/*  Desktop */
@media only screen and (min-width: 1600px) {
    :root {
        --image-section-height: 650px;
    }
}

/*  Printed Media   */
@media print {
    nav {
        display: none;
    }

    a[href^="http"]:after {
        content: " ("attr(href) ")";
    }
}