@import url('https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap');

body {
    --c-text-strong: red;
    --c-text-light: #F88;
    --c-text-dark: #800;
    --c-text-verylight: white;


    --c-gradient-start: #800;
    --c-gradient-end: #400;

    --c-background: black;

    background-color: var(--c-background);

    font-family: 'Philosopher', sans-serif;
    color: var(--c-text-verylight);

    margin-left: 2em;
}

img {
    margin-left: 3vw;
    float: left;
    height: 100%;
} 
a {
    color: #C88;
}
.song-header * {
    font-family: 'Philosopher', sans-serif;
    border-bottom: 1px solid #FFF4;
}

.header {
    height: 128px;
}

#logo { 
    margin: 0;
    height: 100px;
    float: left;
    display: block;
}

#wordmark {
    color: red;
    font-family: 'Philosopher', sans-serif;
    font-size: 72pt;
    text-decoration: none;
    float: left;
}

.music {
    --var-start: #400;
    --var-end: #800;
    --var-header: red;
    --var-text: white;
}

.twitch {
    --var-start: #205;
    --var-end: #61C;
    --var-header: #94F;
    --var-text: white;
}

.vgen {
    --var-start: #020;
    --var-end: #050;
    --var-header: #2A2;
    --var-text: white;
}

.matrix {
    --var-start: #222;
    --var-end: #555;
    --var-header: #AAA;
    --var-text: white;
}

.card  {
    background: linear-gradient(
        135deg,
        var(--var-start) 35%,
        var(--var-end) 100%
    );

    padding-left: 2em;
    padding-top: 1em;
    padding-bottom: 1em;
    border-radius: 1em;
    margin-right: 1em;
 
    color: var(--var-text);
}
 
.title {
    margin: 0;
    color: var(--var-header);
    font-size: 1.75em; 
    text-decoration: none !important;
    text-decoration-style: none !important;
    
}
.description { 
    margin: 0;
    font-size: 1.0em;
    text-decoration: none !important;
    text-decoration-style: none !important; 
}

.series-container {
    text-decoration: none;
}