@font-face {
    font-family: Ubuntu;
    src: url(ubuntu.ttf);
}
@font-face {
    font-family: Ubuntu-Bold;
    src: url(ubuntu-bold.ttf);
}
:root {
    --hfont: 'Ubuntu-Bold', 'Ubuntu', Century Gothic, CenturyGothic, AppleGothic, sans-serif;
    --stdfont: 'Ubuntu', Century Gothic, CenturyGothic, AppleGothic, sans-serif;
}
html, body {
    min-height: 100%;
    margin:0;
    padding:0;
}
body {
    overflow-x: clip;
    color: gainsboro;
    font-family: var(--stdfont);
    background-color: black;
    background-image: url('bg_default.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    overflow-wrap: break-word;
    display: flex;
    flex-direction: row-reverse;
}
a {
    color: gainsboro;
}
p {
    text-shadow: 0 0 5px black;
}
#main {
    flex: 50%;
    padding: 1rem;
    box-shadow: 0 0 45px 90px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, #000000 100%);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, #000 100%);
}
#secondary {
    flex: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#displaycontent {
    box-shadow: 4px 4px 8px 2px black;
    font-size: 0;
}
#header {
    font-family: var(--hfont);
    font-size: 3.5em;
    color: transparent;
    -webkit-text-stroke-width: 2px;
    margin: 0;
}
#subheader {
    margin-left: -5px;
    font-size: 0.6em;
    color: white;
    -webkit-text-stroke-width: 0;
    text-shadow: 0 0 9px white;
    z-index: 1;
    animation-name: subheaderappear;
    animation-duration: 0.5s;
}
@keyframes subheaderappear {
    from {color: #19191900; text-shadow: 0 0 0 black;}
    to {color: white; text-shadow: 0 0 9px white;}
}
nav a {
    text-decoration: none;
    display: inline;
    font-family: var(--hfont);
    font-size: 1.4em;
    padding: 5px;
}
@media(max-width: 80vh) {
    body {
        flex-direction: column;
    }
    #main {
        padding: 1rem;
        background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, #000000 100%);
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, #000 100%);
    }
}
.bandcamp-color { color: #629aa9; transition-duration: 0.2s; }
.bandcamp-color:hover { color: #86c3d4 ; text-shadow: 0 0 7px #629aa9 ; }
.youtube-color { color: #ff0000; transition-duration: 0.2s; }
.youtube-color:hover { color: #ff5252 ; text-shadow: 0 0 7px #ff0000 ; }
.itchio-color { color: #fa5c5c; transition-duration: 0.2s; }
.itchio-color:hover { color: #ff8181 ; text-shadow: 0 0 7px #fa5c5c ; }
.patreon-color { color: #FF424D; transition-duration: 0.2s; }
.patreon-color:hover { color: #ff656c ; text-shadow: 0 0 7px #FF424D ; }
.white-color { color: gainsboro; transition-duration: 0.2s; }
.white-color:hover { color: white; text-shadow: 0 0 7px white;}

#headerblue { -webkit-text-stroke-color: blue; text-shadow: 0 0 15px blue; animation: hblue; animation-duration: 10s; animation-iteration-count: infinite;}
@keyframes hblue {
    0%, 100% {-webkit-text-stroke-color: rgb(0, 0, 200); text-shadow: 0 0 15px rgb(0, 0, 200);}
    15% {-webkit-text-stroke-color: blue; text-shadow: 0 0 15px blue;}
}
#headergreen { -webkit-text-stroke-color: #5ff508; text-shadow: 0 0 15px #5ff508; }
#headeryellow { -webkit-text-stroke-color: gold; text-shadow: 0 0 15px gold; animation: hyellow; animation-duration: 16.7ms; animation-iteration-count: infinite;}
@keyframes hyellow {
    from {text-shadow: 0 0 15px rgba(219, 186, 0, 0.87);}
    to {text-shadow: 0 0 15px gold;}
}