@charset "UTF-8";


* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
}


/* FONTS */

    @font-face {
        font-family: 'Enhance';
        src: url('../media/fonts/Enhance.ttf');
    }

    @font-face {
        font-family: 'tiny';
        src: url('../media/fonts/TinyUnicode.ttf');
        ascent-override: 50%;
    }


/*  HIDE SCROLLBAR*/

    * {
        -ms-overflow-style: none; /* IE, Edge */
        scrollbar-width: none; /* Firefox */
    }

    *::-webkit-scrollbar {
        display: none;  /* Chrome, Safari, Opera */
    }


:root {

    --surface: #959595;

    --surface-dark:#656565;
    --surface-darker:#404040;

    --border-light:#dddddd;
    --border-dark:#555555;
    --border-darker:#353535;

    --border-highlight: #ffffff;
    --border-shadow:#151515;
    
    --surface-color:#729b4e;
    --surface-color-dark:#5b7a40;
    --surface-color-darker:#344920;

    --border-color-light:#cce1b8;
    --border-color-dark:#4e6b34;
    --border-color-darker:#344920;

    --surface-yellow:#729b4e;
    --border-light-yellow:#cce1b8;
    --border-dark-yellow:#4e6b34;
    --border-darker-yellow:#344920;

    --surface-brown:#592b23;
    --border-dark-brown:#47221c;
    --border-darker-brown:#291410;

    --color:#ffffff;
    --text-color: #ffffff;
    --link-color: #344920;
    --link-shadow: rgba(255, 255, 255, 0.25);

}



/* BODY */

    @keyframes moveBackground {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 500% 800%;
        }
    }
    @-webkit-keyframes moveBackground {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 500% 800%;
        }
    }

    body {

        background-image: url('../media/bg.png');
        background-size: 50px;
        background-repeat: repeat;
        background-position: top left;
        animation: moveBackground 240s linear infinite alternate;
        
    }

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

    /* TEXT */

        body {
            font-family: 'Enhance';
            color: var(--color);
            letter-spacing: 0.4px;

            text-shadow: 1px 2px rgba(0, 0, 0, 0.25);
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'tiny';
            text-transform:uppercase;
            font-weight: normal;
            margin: 0rem;
            line-height: 80%;
        }

        h1 {
            margin: 0em 0em 0.1em;
            font-size: 5.4rem;
            width: 100%;
        }

        h2 {
            font-size: 4.8rem;
        }

        h3 {
            font-size: 3rem;
        }

        h4 {
            font-size: 3.2rem;
        }

        h5 {
            font-size: 2.2rem;
        }

        h6 {
            font-size: 1.6rem;
        }

        p {
            font-size: 1.8rem;
            margin: 0em 0em 0.5em 0em;
            line-height: 100%;
            text-align: justify;
        }

        p:last-child {
            margin: 0px;
        }

        p a, p a:link, p a:visited, p a:active {
            color: var(--link-color);
            text-decoration: none;
            text-shadow: 1px 2px var(--link-shadow);
        }

        p a:hover {
            text-decoration: underline;
        }

        a, a:link, a:visited, a:active {
            color: var(--text-color);
            text-decoration: none;
            text-shadow: 1px 2px var(--text-shadow);
        }

        a:hover {
            text-decoration: underline;
        }

        small {
            font-size: 1.25rem;
            line-height: 40%;
        }

        b {
            font-family: 'tiny';
            font-weight: normal;
            font-size: 1.2em;
        }

        .text-center {
            text-align: center;
        }

/* SIDEBAR */


    .sidebar.window {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 208px;
        height: 92vh;

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

    .sidebar .window-body {
        padding: 4px;
        flex-grow: 5;
    }

    .sidebar.window .window-body .flex-column {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        height: calc(92vh - 18px);
        flex-grow: 5;
    }

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

        .sidebar.window {

        width: 100%;
        height: auto;
        }

        .sidebar .border-sunken-dark {
            display: hidden;
        }

    }

/* FOOTER */

    .footer {
        background: linear-gradient(90deg,
                var(--border-color-dark),
                var(--border-color-darker));
        color: white;
        height: 42px;

    }

    .footer .window {
        padding: 2px;
        background: var(--surface);
    }

    .footer .title-bar {
        background: none;
        box-shadow: none;
    }

    .footer audio {
        height: 2.65vh;
        margin-bottom: -5px;
    }

/**
 * 98.css
 * Copyright (c) 2020 Jordan Scales <thatjdanisso.cool>
 * https://github.com/jdan/98.css/blob/main/LICENSE
 */

    .window {
        background: var(--surface);

        box-shadow: 
            -1px -1px inset var(--border-darker),
            1px 1px inset var(--border-light),
            -2px -2px inset var(--border-dark),
            2px 2px inset var(--border-highlight)
        ;

        padding: calc(2px + 4px);
        height: auto;
    }

    .window-body {
        padding: 12px 12px 6px 12px;
        width: 100%;
    }

    .window-padding {
        padding-top: 4px;
    }

    .title-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;

            background: linear-gradient(40deg, var(--surface-color-darker), var(--surface-color-dark));

        box-shadow:
            2px 2px inset var(--border-shadow),
            -2px -2px inset var(--border-color-dark)
        ;
            
        height: calc(20px + 10px);
        padding: 4px 6px 6px 8px;
    }

    .title-bar.inactive {
        background: var(--surface);

        box-shadow:
            2px 2px inset var(--border-darker),
            -2px -2px inset var(--border-dark)
        ;
    }

    .title-bar-text {
        color: var(--text-color);
        font-size: 1rem;
        line-height: 50%;
        text-shadow: 1px 2px var(--link-shadow);
    }

    .title-bar-controls {
        display: flex;
        gap: 2px;
    }

    /* TITLE BAR BUTTONS */

        .title-bar-controls button {
            display: block;

            width: 20px;
            height: 20px;

            background: var(--surface);
            
            box-shadow:
                1px 1px inset var(--border-light),
                -1px -1px inset var(--border-dark),
                2px 2px inset var(--border-highlight),
                -2px -2px inset var(--border-darker),

                2px 2px var(--border-shadow)
            ;
        }

        .title-bar-controls button:hover {
            box-shadow:
                1px 1px inset var(--surface-darker),
                1px 1px var(--border-light),
                2px 2px inset var(--border-shadow),
                -1px -1px inset var(--border-highlight),
                3px 3px inset var(--border-darker)
            ;
            background-position: 1px 1px;
        }

        .title-bar-controls button:disabled {
            box-shadow:
                1px 1px inset var(--border-highlight),
                -1px -1px inset var(--border-darker),
                2px 2px inset var(--border-light),
                -2px -2px inset var(--border-dark),

                2px 2px var(--border-shadow)
            ;
            background-position: 0px 0px;
        }

        .title-bar-controls button:disabled:hover {
            box-shadow:
                1px 1px inset var(--border-highlight),
                -1px -1px inset var(--border-darker),
                2px 2px inset var(--border-light),
                -2px -2px inset var(--border-dark),

                2px 2px var(--border-shadow)
            ;
        }

        .title-bar-controls button:focus {
            outline: none;
        }

        /* BUTTONS LABELS */

            .title-bar-controls button[aria-label="Minimize"] {
            background-image: url("icon/minimize.png");
            background-repeat: no-repeat;
            }

            .title-bar-controls button[aria-label="Minimize"]:disabled {
            background-image: url("icon/minimize-disabled.png");
            }

            .title-bar-controls button[aria-label="Maximize"] {
            background-image: url("icon/maximize.png");
            background-repeat: no-repeat;
            }

            .title-bar-controls button[aria-label="Maximize"]:disabled {
            background-image: url("icon/maximize-disabled.png");
            }

            .title-bar-controls button[aria-label="Restore"] {
            background-image: url("icon/restore.png");
            background-repeat: no-repeat;
            }

            .title-bar-controls button[aria-label="Restore"]:disabled {
            background-image: url("icon/restore-disabled.png");
            }

            .title-bar-controls button[aria-label="Help"] {
            background-image: url("icon/help.png");
            background-repeat: no-repeat;
            }

            .title-bar-controls button[aria-label="Help"]:disabled {
            background-image: url("icon/help-disabled.png");
            }

            .title-bar-controls button[aria-label="Close"] {
            margin-left: 2px;
            background-image: url("icon/close.png");
            background-repeat: no-repeat;
            }

            .title-bar-controls button[aria-label="Close"]:disabled {
            background-image: url("icon/close-disabled.png");
            }

    /* BUTTON YELLOW */

        a.button-yellow {

            display: flex;
            align-items: center;
            justify-content: center;

            width: 100%;
            padding: 6px;

            background: var(--surface-yellow);

            box-shadow: 
                -1px -1px inset var(--border-darker-yellow),
                1px 1px inset var(--border-light-yellow),
                -2px -2px inset var(--border-dark-yellow),
                2px 2px inset var(--border-highlight)
            ;

            font-family: 'tiny';
            color: var(--text-color);
            font-size: 48px;
            text-shadow: 1px 2px var(--link-shadow);

            cursor: pointer;
            text-decoration: none;

            }

        a.button-yellow:hover {

            box-shadow: 
                -1px -1px inset var(--border-light-yellow),
                1px 1px inset var(--border-darker-yellow),
                -2px -2px inset var(--border-highlight),
                2px 2px inset var(--border-dark-yellow)
            ;

            text-shadow: -1px -2px rgba(0, 0, 0, 0.5);
            color: ghostwhite;
            text-decoration: none;

        }

    /* BORDERS */   

        .border-raised {
            background: var(--surface);

            box-shadow:
                -2px -2px inset var(--border-dark),
                2px 2px inset var(--border-highlight)
            ;

            padding: 2px;
            flex-grow: 1;
        }

        .border-sunken {
            background: var(--surface);

            box-shadow:
                -2px -2px inset var(--border-highlight),
                2px 2px inset var(--border-dark)
            ;

            padding: 2px;
            flex-grow: 1;
        }

        .border-raised-darker {
            background: var(--surface);

            box-shadow:
                -2px -2px inset var(--border-darker),
                2px 2px inset var(--border-highlight)
            ;

            padding: 2px;
            flex-grow: 1;
        }

        .border-sunken-dark {
            background: var(--surface);

            box-shadow:
                -2px -2px inset var(--border-highlight),
                2px 2px inset var(--border-darker)
            ;

            padding: 2px;
            flex-grow: 1;
        }

        .border-padding {
            padding: 6px 8px 6px 8px;
        }

        .border-text-padding {
            padding: 16px;
        }

        .text-padding {
            padding: 0px 8px 0px 8px;
        }

        /* DROP SHADOW */

        .drop-shadow {
            
            filter: drop-shadow(1px 1px 4px #00000075);
        }


/* LISTS */

    ul, dl {
        list-style-type: '> ';
        padding-left: 16px;
    }

    .list-horizontal {
        list-style: none;
    }

    .list-horizontal li, .list-horizontal dd {
        display: inline;
    }

    .list-horizontal li:before, .list-horizontal dd:before {
        content: '';
    }

    .fig-list{
        padding: 0;
        margin: 0;
    }

    .figcaption-list {
        padding: 0;
        margin: 0;
    }

    th,td {
        padding-right: 16px;
    }



/* POP UP */
    
    .overlay {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.7);
        visibility: hidden;
        opacity: 0;
        z-index: 2;
    }

    .overlay:target {
        visibility: visible;
        opacity: 1;
    }

    .popup {
        margin: 10vh auto;
        max-width: 60%;
        position: relative;
    }


    @media screen and (max-width: 700px){
        .popup{
            width: 70%;
        }
    }

/* H-CARD */

    .hcard dd:before{
        content: '> ';
    }
    
    .hcard dt {
        font-size: 3.6em;
    }

    .hcard dd {
        font-size: 2.2em;
    }

    dt, figcaption {
        font-size: 1.8rem;
    }

    @media screen and (max-width: 850px) {
        .hcard dd {
            margin: 0px;
        }
    }

/* INDEX */

    footer.index, footer.index .window-body {
        display: flex;
        align-items: center;
        justify-content: center;

    }

    .index-wrapper {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;

    }

    .index-wrapper-box-1 {
        width: 100%;
    }

    .index-wrapper-box-2 {
        width: 100%;
    }

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

    .index-wrapper {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;

    }

    .index-wrapper-box-1 {
        width: 50%;
        order: 2;
        align-self: flex-end;
    }

    .index-wrapper-box-2 {
        width: 50%;
        order: 1;
    }
    }

/* HOMEPAGE */

    /* LAST FM */

        #scrobble .border-sunken {
            text-align: center;
        }

        .nowplaying {
            font-size: 1.8em;
        }

    /* WAFRING */

        #wafring {
            a {
                color: ghostwhite;
            }

            p {
                text-align: center;
            }
        }

    .blinkies img {
        width: 150px;
    }