:root{
    color-scheme: light dark;
    --primary:light-dark(#1D52F2, #242626);
    --secondary:light-dark(#D9BA82, #a04b1a);
    --warning: light-dark(#F2CD13, #b79c11);
    --danger: light-dark(#F22248, #93182e);
    --info: light-dark(#A69F97, #6f2372);
    --success:light-dark(#98F5C3, #627373);
    --background-color: var(--primary);

    background-color: var(--background-color);
}
body{
    padding-top: 2vh;
    max-width: 80%;
    margin: 0 auto;
    text-align: center;
}
.card{
    border: 1px solid var(--info);
    margin: 0 auto;
    box-shadow: 1px 1px 1px black;
}

.card.header{
    background-color: var(--secondary) !important;
}

.card.body{
    margin-top: 1vh;
    background-color: var(--info);
}

.card.user-info{
    margin-top: 1vh;
    background-color: var(--warning);
}

.icon{
    filter: drop-shadow(1px 1px 1px);
    animation: stopSign 5s linear infinite alternate-reverse;
}

@keyframes stopSign {
    0%{
        transform: translateX(-20vw);
    }
    100%{
        transform: translateX(20vw);
    }
}

.ad{
    margin: 0 auto;
    margin-top: 1vh;
    margin-bottom: 1vh;
    max-width: 40%;
    border: 1px solid var(--warning);
    height: 10vh;
}

h1, h2, h3{
    text-shadow: .3vw .3vh .3vw #000000;
}

#unsub{
    background-color: var(--danger);
}
#unsub:hover{
    background-color: var(--success);
}