header.zodiac {
    background-color: #290b2b;
    background: linear-gradient(0deg, rgba(97,24,105,1) 0%, rgba(28,6,62,1) 76%);
    width: 100%;
    height: 160px;
}
header.zodiac img {
    margin: auto;
    display: block;
}
body.zodiac header.zodiac p {
    font-family: Arial, Helvetica, sans-serif;
    filter: drop-shadow(2px 2px 2px black);
}
html.zodiac {
    background-color: unset;
}
body.zodiac {
    /*background-image: url("http://hs.hiveswap.com/ezodiac/images/bg2.jpg");  - Not available for Chrome due to HTTP vs HTTPS nonsense*/
    background-image: url("images/astrology_bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}
article.zodiac {
    display: block;
    margin: auto;
    max-width: 600px;
    background-color: rgb(17,1,28);
}
article.zodiac p, article.zodiac form {
    color:#8b9cc9;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: unset;
}
article.zodiac p a{
    color:#fff;
    font-weight: bolder;
}
td.copyright {
    color:#fff;
}

a#GotoButton, a#ClassButton {
    display: none; /* Has to be activated by a successful submit of test results c: */
    background-color: #8b9cc9;
    color:black;
    font-size: larger;
    padding: 1em 2em;
    border-radius: 0.5em;
    text-align: center;
    text-decoration: none;
    margin-bottom: 1em;
}

a#GotoButton::after {
    content: "Click here to go to your True Sign!";
}

a#ClassButton {
    background-color: #b00;
    color: white;
}

div.zodiac.question {
    margin: 1em;
    padding: 1em;
    background-color: #160925;
}

div.zodiac.question label {
    display: block;
    margin: 1em;
}
div.zodiac.question p
{
    margin: 0.5em;
    text-align: left;
    font-size: 18px;
}

input#zodiacSubmitButton {
    margin: auto;
    height: 2em;
    font-weight: bolder;
    font-size: larger;
    display: block;
}

td#sign {
    min-width: 300px; /* TODO: Make this relative or something */
    height: 300px;
}
div#signImage {
    background: url("images/signs_spritesheet.svg");
    background-position-x: 0;
    background-position-y: 0;
    width: 300px;
    height: 300px;
    filter: invert(100%);
    display: none;
}

p#ClassMessage {
    display: none;
    font-size: x-large;
    color: black;
    background-color: rgb(238, 0, 127);
    margin-left: auto;
    margin-right: auto;
    width: 18em;
    padding: 2em;
    border-radius: 2em;
}