@font-face {
        font-family: 'AppleGaramond';
        src: url('Fonts/AppleGaramond.woff2') format('woff2'),
            url('Fonts/AppleGaramond.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'tds';
        src: url('Fonts/DINEngschrift.woff2') format('woff2'),
            url('Fonts/DINEngschrift.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
        text-transform: lowercase;
    }

    @font-face {
        font-family: 'ppmr';
        src: url('Fonts/DIN1451MittelschriftAlternate.woff2') format('woff2'),
            url('Fonts/DIN1451MittelschriftAlternate.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'EveryDay';
        src: url('Fonts/EveryDay.woff2') format('woff2'),
            url('Fonts/EveryDay.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'FoundryGridnik-Medium';
        src: url('Fonts/FoundryGridnik-Medium.woff2') format('woff2'),
            url('Fonts/FoundryGridnik-Medium.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'zerox';
        src: url('Fonts/FoundryGridnik-Light.woff2') format('woff2'),
            url('Fonts/FoundryGridnik-Light.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'zero';
        src: url('Fonts/FoundryGridnik-Regular.woff2') format('woff2'),
            url('Fonts/FoundryGridnik-Regular.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'abbey';
        src: url('Fonts/GillSans.woff2') format('woff2'),
            url('Fonts/GillSans.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'slipx';
        src: url('Fonts/Lights-In-The-Sky.woff2') format('woff2'),
            url('Fonts/Lights-In-The-Sky.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'wtb';
        src: url('Fonts/OldSansBlack.woff2') format('woff2'),
            url('Fonts/OldSansBlack.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'WithTeeth';
        src: url('Fonts/Pixel-Life.woff2') format('woff2'),
            url('Fonts/Pixel-Life.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'quake';
        src: url('Fonts/QUAKE.woff2') format('woff2'),
            url('Fonts/QUAKE.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Helvetica';
        src: url('Fonts/Helvetica.woff2') format('woff2'),
            url('Fonts/Helvetica.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'slip';
        src: url('Fonts/NK57MonospaceCdEb-Regular.woff2') format('woff2'),
            url('Fonts/NK57MonospaceCdEb-Regular.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'frag';
        src: url('Fonts/Wretched.woff2') format('woff2'),
            url('Fonts/Wretched.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'ppmold';
        src: url('Fonts/dehinted-StretchProRegular.woff2') format('woff2'),
            url('Fonts/dehinted-StretchProRegular.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }


    .contentBox {
        box-sizing: border-box;
        background-color: darkblue;
    }

    body {
        margin: 0px;
        background-color: #342C38;
    }

    .trackline {
        color: ;
    }

    div#Mplay {
        position: fixed;
        top: 0%;
        left: 50%;
        left-margin: 20%;
        transform: translate(-50%, 0%);
        width: 100%;
        height: 100%;
        text-align: left;
        object-fit: fill;
        font-size: 3em;
        z-index: 1;
    }

    img#albart {
        z-index: 0;
        position: fixed;
        top: 0%;
        left: 50%;
        transform: translate(-50%, 0%);
        max-height: 75vw;
        max-width: 75vw;
        height: 80vh;
        width: 80vh;
    }

    div#albums {
        position: relative;
        margin: 0;
        left: 0%;
        width: 24vw;
        z-index: 7;
    }

    .CurrTrack {
        position: fixed;
        z-index: 3;
        height: 5vh;
        width: auto;
        top: 5vh;
        right: 0vh;

    }

    .CurrParts {
        position: fixed;
        z-index: 3;
        width: auto;
        height: auto;
        text-align: right;
        top: 10vh;
        right: 0vh;
    }

    a#invable {
        position: fixed;
        text-align: right;
        z-index: 1;
        height: 5vh;
        bottom: 4vh;
        left: 100%;
        width: 150px;
    }

    audio#audplay {
        position: fixed;
        z-index: 10;
        height: 10%;
        bottom: 0;
        top: 15vh;
        right: 1vh;
        width: 25vh;
        transform: scale(1.5, 1.5);
        display: block;
        font-family: zero;
    }

    .albimg {
        width: 24vw;
        max-width: 18vh;
        height: 24vw;
        max-height: 18vh;
        position: absolute;
    }

    .albimgsmall {
        width: 12vw;
        max-width: 10vh;
        height: 12vw;
        max-height: 10vh;
        position: absolute;
        position: absolute;
    }

    .albim {
        width: 24vw;
        max-width: 18vh;
        height: 24vw;
        max-height: 18vh;
    }

    .albimsm {
        width: 12vw;
        max-width: 10vh;
        height: 12vw;
        max-height: 10vh;
    }

    .albtitlespan {
        width: min(18vw, 18vh);
        max-width: 18vh;
        height: min(18vw, 18vh);
        max-height: 18vh;
        position: relative;
        font-family: ppmr;
        background-color: #202020;
        font-size: 3em;
        color: #a0a0a0;

    }

    .albtitlespansm {
        width: min(9vw, 9vh);
        max-width: 9vh;
        height: min(9vw, 9vh);
        max-height: 9vh;
        display: inline;
        position: relative;
        font-family: ppmr;
        background-color: #202020;
        font-size: 2em;
        color: #a0a0a0;

    }

    div#downloads {
        font-family: zero;
        position: fixed;
        z-index: 7;
        height: 5vh;
        width: min(70vw, 70vh);
        max-width:70vh;
        bottom: 25vh;
        left: 20vh;
        font-size: 1.7em;
        color: #CCCCCC;
        text-align: left;
        text-transform: uppercase;
    }

    div#Tracks {
        font-family: zero;
        font-size: 2em;
        background-color: #342C38;
        position: fixed;
        right: 2vh;
        margin: 0;
        top: 20%;
        width: auto;
        z-index: 3;
        align-items: left;

    }