*
{
    margin: 0;
    border: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

:root {
    --header-height: 60px;
    --header-padding: 61px;
    --footer-height: 50px;
    --footer-padding: 51px;

    --theme-color: rgb(0, 0, 0);
    --theme-color-pure: 0, 0, 0;
    
    --text-color: rgb(255, 255, 255);

    --background-color: rgb(0, 0, 0);
    --video-background-color: rgba(0, 0, 0, 0.25);

    --highlight-color: 255, 255, 255;
    --highlight-article-alpha: 0.1;
    --highlight-input-alpha: 0.75;

    --shadow-color: 0, 0, 0;
    --shadow-article-alpha: 0.4;
    --shadow-input-alpha: 0.075;


    --error-color: red;
    --success-color: green;
}

body
{
    background-color: var(--background-color);
    font-family: Verdana;
    color: var(--text-color);
    height: 100%;
    position: relative;
    overflow: visible;
    /*overscroll-behavior-y: contain;*/
}

body.coveredByMenu
{
    overflow: hidden;
}

body.coveredByContent
{
    overflow: hidden;
}

body:not(.tabNavigation) button:focus,
body:not(.tabNavigation) input:focus,
body:not(.tabNavigation) select:focus,
body:not(.tabNavigation) textarea:focus/*,
body:not(.tabNavigation) a:focus*/
{
    outline: none;
    border: 0;
}

.header
{
    height: var(--header-height);
    width: 100%;
    position: fixed;
    background-color: var(--background-color);
    border-style: solid;
    border-bottom-width: 1px;
    z-index: 10;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed, Chrome, Edge, Opera and Firefox */
}

@supports (backdrop-filter: blur(8px))
{
    .header
    {
        background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.625) 100%);
        backdrop-filter: blur(8px)
    }
}

.header .mobileHeader
{
    z-index: 10;
}

.header .logo
{
    /*background-image: url(../img/logo.svg);
    background-repeat: no-repeat;
    background-origin: content-box;*/
    background-color: transparent;
    
    height: var(--header-height);
    /*padding: 8px;*/
    position: absolute;
    width: var(--header-height);
    box-sizing: border-box;
    margin: 0 20px;
}

.header .menuButton
{
    background-color: transparent;
    visibility: hidden;
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 5px;
    height: 100%;
}

.header .menuButton > img
{
    height: var(--header-height);
    transition: transform 0.25s;
}

.header .logo > img
{
    transition: transform 0.25s;
    height: var(--header-height);
}

.header .menu
{
    display: inline-block;
    height: 100%;
}

.header .menu .pages
{
    position: absolute;
    margin-left: 100px;
    top: 0;
}

.header .menu .pages li
{
    display: inline-block;
    font-size: 16px;
    transition: background-color 0.25s;
}

.header .menu .pages li a
{
    display: table;
    color: inherit;
    text-decoration: inherit;
    text-align: center;
    line-height: var(--header-height);
    padding: 0 15px;
    font-weight: bold;
}

.header .menu .pages li a p
{
    transition: transform 0.25s;
}

.header .menu .social
{
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 5px;
    height: 100%;
}

.header .menu .social a
{
    display: inline-block;
    height: 100%;
}

.header .menu .social a img
{
    display: inline-block;
    box-sizing: border-box;
    height: 100%;
    padding: 15px 10px;
    transition: transform 0.25s;
    pointer-events: none;
}

.header .logo:active > img
{
    transform: scale(0.8);
    transition: transform 0.05s;
}

.header .menu .pages li:active
{
    background-color: rgba(255, 255, 255, 0.5);
    transition: background-color 0.05s;
}

.header .menu .pages li:active > a p
{
    transform: scale(0.9);
    transition: transform 0.05s;
}

.header .menu .social a:active > img
{
    transform: scale(0.8);
    transition: transform 0.05s;
}

/* Only do hover transitions (and do active transitions differently) if hover is supported by the input method used */
@media (hover: hover) and (pointer: fine)
{
    .header .logo:hover > img
    {
        transform: scale(1.1);
        transition: transform 0.1s;
    }
    
    .header .menuButton:hover > img
    {
        transform: scale(1.1);
        transition: transform 0.1s;
    }

    .header .menu .pages li:hover
    {
        background-color: rgba(255, 255, 255, 0.25);
        transition: background-color 0.1s;
    }
    
    .header .menu .pages li:hover > a p
    {
        transform: scale(1.05);
        transition: transform 0.1s;
    }

    .header .menu .social a:hover > img
    {
        transition: transform 0.1s;
        transform: scale(1.15);
    }

    .header .logo:active > img
    {
        transform: scale(0.95);
        transition: transform 0.05s;
    }
    
    .header .menuButton:active > img
    {
        transform: scale(0.95);
        transition: transform 0.05s;
    }

    .header .menu .pages li:active
    {
        background-color: rgba(255, 255, 255, 0.5);
        transition: background-color 0.05s;
    }

    .header .menu .pages li:active > a p
    {
        transform: scale(0.95);
        transition: transform 0.05s;
    }

    .header .menu .social a:active > img
    {
        transition: transform 0.05s;
        transform: scale(0.9);
    }
}

main
{
    width: 100%;
    padding-top: var(--header-padding);
    box-sizing: border-box;
    min-height: 100vh;
    padding-bottom: var(--footer-padding);
    background-color: var(--background-color);
    font-size: 0;
    display: flex;
    flex-flow: column;
}

.articles
{
    /*width: calc(100% - 2px);*/
    width: 100%;
    max-width: 1080px;
    margin: auto;
    /*border-left: solid 1px white;
    border-right: solid 1px white;*/
    overflow: hidden;
    flex: 1 1 auto;
    font-size: 1rem;
}

a.anchor
{
    scroll-margin-top: calc(var(--header-padding) + 10px);
    color: inherit;
}

a
{
    color: rgb(128, 192, 255);
}

a:visited
{
    color: rgb(169, 128, 255);
}

.articles .article
{
    margin: 30px;
    padding: 0 30px 20px;
    border: solid 1px white;
    overflow-y: hidden;
}

.articles .article h1
{
    margin: 30px 0 10px;
}

h1
{
    font-size: 2.5em;
}

.articles .article h2
{
    margin: 20px 0 10px;
}

h2
{
    font-size: 1.75em;
}

.articles .article p
{
    margin: 0 0 10px;
}

p
{
    font-size: 1em;
}

.articles .article ul
{
    padding-inline-start: 2ch;
}

.articles .article ul li
{
    margin: 0 0 10px;
}

.articles .article img
{
    width: 50%;
    padding-left: 20px;
    padding-bottom: 20px;
    float: right;
}

.articles .article a.fill
{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.discography
{
    display: flex;
    flex-flow: row-reverse wrap-reverse;
    justify-content: center;
    font-size: 1rem;
    padding: 15px;
}

.discography .releaseContainer
{
    width: 380px;
    max-width: calc(75vh - var(--header-padding));
    margin: 15px;
    flex-grow: 1;

}

.discography .releaseContainer .release
{
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border: solid white 1px;
    padding: 0 30px 20px;
    pointer-events: none;
    transition: transform 0.25s, background-color 0.25s;
}

.discography .releaseContainer:active > .release
{
    transform: scale(0.95);
    background-color: rgba(255, 255, 255, 0.5);
    transition: transform 0.05s, background-color 0.05s;
}

/* Only do hover transitions (and do active transitions differently) if hover is supported by the input method used */
@media (hover: hover) and (pointer: fine)
{
    .discography .releaseContainer:hover > .release
    {
        transform: scale(1.025);
        background-color: rgba(255, 255, 255, 0.25);
        transition: transform 0.1s, background-color 0.1s;
    }

    .discography .releaseContainer:active > .release
    {
        transform: scale(0.975);
        background-color: rgba(255, 255, 255, 0.5);
        transition: transform 0.05s, background-color 0.05s;
    }
}

.discography .releaseContainer .release h1
{
    font-size: 1.75em;
    font-weight: bold;
    margin: 30px 0 15px;
}

.discography .releaseContainer .release img
{
    width: 100%;
}

.discography .releaseContainer .release p
{
    margin: 20px 0 0;
}

.songInfo
{
    position: fixed;
    background-color: rgba(0, 0, 0, 0.625);
    width: 100%;
    top: 0;
    bottom: 0;
    visibility: hidden;
    /*opacity: 0;*/
    z-index: 1;

    box-sizing: border-box;
    padding-top: var(--header-padding);
}

.songInfo.active
{
    animation-name: songInfoIn;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}

.songInfo.inactive
{
    animation-name: songInfoOut;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}

.songInfo.active > .articlesContainer
{
    animation-name: songInfoContentIn;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}

.songInfo.inactive > .articlesContainer
{
    animation-name: songInfoContentOut;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}

@keyframes songInfoIn
{
    0%
    {
        visibility: visible;
        background-color: rgba(0, 0, 0, 0);
        animation-timing-function: ease-in;
    }
    50%
    {
        visibility: visible;
        background-color: rgba(0, 0, 0, 0.8);
        animation-timing-function: ease-out;
    }
    100%
    {
        visibility: visible;
        background-color: rgba(0, 0, 0, 1);
    }
}

@keyframes songInfoOut
{
    0%
    {
        visibility: visible;
        backdrop-filter: blur(8px);
        background-color: rgba(0, 0, 0, 1);
        animation-timing-function: ease-in;
    }
    50%
    {
        visibility: visible;
        backdrop-filter: blur(4px);
        background-color: rgba(0, 0, 0, 0.8);
        animation-timing-function: ease-out;
    }
    100%
    {
        visibility: hidden;
        backdrop-filter: blur(0px);
        background-color: rgba(0, 0, 0, 0);
    }
}

@keyframes songInfoContentIn
{
    0%
    {
        visibility: visible;
        opacity: 0;
        animation-timing-function: linear;
    }
    50%
    {
        visibility: visible;
        opacity: 0;
        animation-timing-function: ease-in-out;
    }
    100%
    {
        visibility: visible;
        opacity: 1;
    }
}

@keyframes songInfoContentOut
{
    0%
    {
        visibility: visible;
        opacity: 1;
        animation-timing-function: ease-in-out;
    }
    50%
    {
        opacity: 0;
        visibility: visible;
        animation-timing-function: linear;
    }
    100%
    {
        opacity: 0;
        visibility: hidden;
    }
}

@supports (backdrop-filter: blur(8px))
{
    @keyframes songInfoIn
    {
        0%
        {
            visibility: visible;
            backdrop-filter: blur(0px);
            background-color: rgba(0, 0, 0, 0);
            animation-timing-function: ease-in;
        }
        50%
        {
            visibility: visible;
            backdrop-filter: blur(4px);
            background-color: rgba(0, 0, 0, 0.5);
            animation-timing-function: ease-out;
        }
        100%
        {
            visibility: visible;
            backdrop-filter: blur(8px);
            background-color: rgba(0, 0, 0, 0.625);
        }
    }

    @keyframes songInfoOut
    {
        0%
        {
            visibility: visible;
            backdrop-filter: blur(8px);
            background-color: rgba(0, 0, 0, 0.625);
            animation-timing-function: ease-in;
        }
        50%
        {
            visibility: visible;
            backdrop-filter: blur(4px);
            background-color: rgba(0, 0, 0, 0.5);
            animation-timing-function: ease-out;
        }
        100%
        {
            visibility: hidden;
            backdrop-filter: blur(0px);
            background-color: rgba(0, 0, 0, 0);
        }
    }
}

.songInfo .articlesContainer
{
    overflow-y: auto;
    max-height: 100%;
}

.songInfo .articlesContainer .articles
{

}

.songInfo .articlesContainer .articles .article
{
    /*height: calc(100vh - (var(--header-padding)) - 60px);*/
    background-color: rgba(0,0,0,0.625);
    overflow: hidden;
    pointer-events: auto;
}

.footer
{
    height: var(--footer-height);
    line-height: var(--footer-height);
    text-align: center;
    width: 100%;
    position: absolute;
    background-color: var(--background-color);
    bottom: 0;
    font-size: 0.75rem;
    border-top: solid 1px white;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed, Chrome, Edge, Opera and Firefox */
}

#bgvid
{
    height: calc(100vh - var(--header-padding) - 60px);
    object-fit: cover;
    width: 100%;
    border-bottom: solid 1px white;
}

.bgvid
{
    position: relative;
    text-align: center;
    color: white;
}

.bgvid h1
{
    font-family: Tahoma;
    font-size: 5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: #000000 0 0 50px;
}

.bgvid .blurbackground
{
    position: absolute;
    width: 100%;
    height: calc(100% - 1px);
    top: 0;
    left: 0;
    backdrop-filter: blur(12px);
    background-color: var(--video-background-color);
}

/*When viewed on mobile, this changes*/
@media screen and (max-width: 840px)
{
    :root
    {
        --header-height: 80px;
        --header-padding: 81px;
    }

    .header
    {
        position: fixed;
        background: none;
        backdrop-filter: none;
    }

    .header .mobileHeader
    {
        height: 100%;
        background: rgba(0, 0, 0, 1);
    }

    .header .logo
    {
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
    }
    
    .header .menuButton
    {
        visibility: visible;
    }

    .header .menu
    {
        display: block;
        top: 1px;
        position: relative;
        height: calc(100vh - var(--header-padding));
        visibility: hidden;
    }

    .header .menu.active
    {
        animation-name: menuIn;
        animation-duration: 0.4s;
        animation-fill-mode: forwards;
        
    }

    .header .menu.inactive
    {
        animation-name: menuOut;
        animation-duration: 0.4s;
        animation-fill-mode: forwards;
    }

    .header .menu.active > .pages
    {
        animation-name: menuPagesIn;
        animation-duration: 0.4s;
        animation-fill-mode: forwards;
    }

    .header .menu.inactive > .pages
    {
        animation-name: menuPagesOut;
        animation-duration: 0.4s;
        animation-fill-mode: forwards;
    }

    .header .menu.active > .social
    {
        animation-name: menuSocialsIn;
        animation-duration: 0.4s;
        animation-fill-mode: forwards;
    }

    .header .menu.inactive > .social
    {
        animation-name: menuSocialsOut;
        animation-duration: 0.4s;
        animation-fill-mode: forwards;
    }

    @keyframes menuIn
    {
        0%
        {
            visibility: visible;
            /*backdrop-filter: blur(0px);*/
            background-color: rgba(0, 0, 0, 0);
            animation-timing-function: ease-in;
        }
        50%
        {
            visibility: visible;
            /*backdrop-filter: blur(4px);*/
            background-color: rgba(0, 0, 0, 1);
            animation-timing-function: ease-out;
        }
        100%
        {
            visibility: visible;
            /*backdrop-filter: blur(8px);*/
            background-color: rgba(0, 0, 0, 1);
        }
    }

    @keyframes menuOut
    {
        0%
        {
            visibility: visible;
            /*backdrop-filter: blur(8px);*/
            background-color: rgba(0, 0, 0, 1);
            animation-timing-function: ease-in;
        }
        50%
        {
            visibility: visible;
            /*backdrop-filter: blur(4px);*/
            background-color: rgba(0, 0, 0, 1);
            animation-timing-function: ease-out;
        }
        100%
        {
            visibility: hidden;
            backdrop-filter: blur(0px);
            background-color: rgba(0, 0, 0, 0);
        }
    }

    @keyframes menuPagesIn
    {
        0%
        {
            visibility: visible;
            opacity: 0;
            animation-timing-function: linear;
        }
        50%
        {
            visibility: visible;
            opacity: 0;
            animation-timing-function: ease-in-out;
        }
        100%
        {
            visibility: visible;
            opacity: 1;
        }
    }

    @keyframes menuPagesOut
    {
        0%
        {
            visibility: visible;
            opacity: 1;
            animation-timing-function: ease-in-out;
        }
        50%
        {
            opacity: 0;
            visibility: visible;
            animation-timing-function: linear;
        }
        100%
        {
            opacity: 0;
            visibility: hidden;
        }
    }

    @keyframes menuSocialsIn
    {
        0%
        {
            visibility: visible;
            opacity: 0;
            animation-timing-function: linear;
        }
        50%
        {
            visibility: visible;
            opacity: 0;
            animation-timing-function: ease-in-out;
        }
        100%
        {
            visibility: visible;
            opacity: 1;
        }
    }

    @keyframes menuSocialsOut
    {
        0%
        {
            visibility: visible;
            opacity: 1;
            animation-timing-function: ease-in-out;
        }
        50%
        {
            opacity: 0;
            visibility: visible;
            animation-timing-function: linear;
        }
        100%
        {
            opacity: 0;
            visibility: hidden;
        }
    }

    .logoParent
    {
        transform-origin: 50% 40px;
        transition: transform 0.25s;
    }
    
    .menuButtonParent
    {
        transform-origin: calc(100% - 45px) 40px;
        transition: transform 0.25s;
    }

    .logoFlipped
    {
        transform: rotate(180deg);
        transform-origin: calc(100% - 45px) 40px;
        transition: transform 0.25s;
    }

    @supports (backdrop-filter: blur(8px))
    {
        .header .mobileHeader
        {
            background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.625) 100%);
            backdrop-filter: blur(8px)
        }

        @keyframes menuIn
        {
            0%
            {
                visibility: visible;
                backdrop-filter: blur(0px);
                background-color: rgba(0, 0, 0, 0);
                animation-timing-function: ease-in;
            }
            50%
            {
                visibility: visible;
                backdrop-filter: blur(4px);
                background-color: rgba(0, 0, 0, 0.625);
                animation-timing-function: ease-out;
            }
            100%
            {
                visibility: visible;
                backdrop-filter: blur(8px);
                background-color: rgba(0, 0, 0, 0.625);
            }
        }
    
        @keyframes menuOut
        {
            0%
            {
                visibility: visible;
                backdrop-filter: blur(8px);
                background-color: rgba(0, 0, 0, 0.625);
                animation-timing-function: ease-in;
            }
            50%
            {
                visibility: visible;
                backdrop-filter: blur(4px);
                background-color: rgba(0, 0, 0, 0.625);
                animation-timing-function: ease-out;
            }
            100%
            {
                visibility: hidden;
                backdrop-filter: blur(0px);
                background-color: rgba(0, 0, 0, 0);
            }
        }
    }

    .header .menu .pages
    {
        width: 100%;
        margin: auto;
        position: relative;
        z-index: 2;
        visibility: hidden;
    }

    .header .menu .pages li
    {
        display:block;
        font-size: 24px;
    }

    .header .menu .pages li a
    {
        display: block;
    }

    .header .menu .social
    {
        display: block;
        top: initial;
        right: initial;
        width: 100%;
        height: 100px;
        text-align: center;
        bottom: calc((100vh - 480px) / 2);
        margin: 0;
        visibility: hidden;
    }

    .header .menu .social a img
    {
        display: inline-block;
        height: 100px;
        padding: 25px 20px;
    }

    main
    {
        
    }

    .articles
    {
        font-size: 1.125rem;
    }

    .articles .article
    {
        margin: 20px 10px;
        padding: 0 15px 20px;
    }

    .discography
    {
        font-size: 1.125rem;
        padding: 10px 0;
    }

    .discography .release
    {
        margin: 10px 10px;
    }

    .footer
    {
        font-size: 2.75vw;
    }
    
    .bgvid h1
    {
        font-size: 3.5rem;
    }
}

/*Custom scrollbar*/
::-webkit-scrollbar
{
    width: 12px;
}

::-webkit-scrollbar-track
{
    background-color: black;
}

::-webkit-scrollbar-thumb
{
    background-color: rgba(255, 255, 255, 0.3);
    border-width: 2px;
    border-style: solid;
    border-color: transparent;
    border-radius: 6px;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover
{
    background-color: white;
}