.card {
    /* background */
    /*background-color: var(--a-color); dit doet niks wet de background image*/
    background-image: url("/static/axiom/img/purple_math_background_big_zacht.jpg");
    background-size: 750px;
    background-repeat: repeat;
    background-position: var(--random-x) var(--random-y);
    overflow: hidden;
    /* border */
    border-radius: 10px;
    border: 2px solid var(--a-color);
    box-shadow: 
        -6px -6px 12px rgba(255, 255, 255, 0.1),
         6px  6px 6px rgba(0, 0, 0, 0.15);
    /* content */
    color: var(--t-color);
    font-weight: 500;
    text-shadow: 
        -1px -1px 0 var(--a-color),  
         1px -1px 0 var(--a-color),
        -1px  1px 0 var(--a-color),
         1px  1px 0 var(--a-color),
        -2px -2px 0 var(--a-color),  
         2px -2px 0 var(--a-color),
        -2px  2px 0 var(--a-color),
         2px  2px 0 var(--a-color),
        -3px -3px 0 var(--a-color),  
         3px -3px 0 var(--a-color),
        -3px  3px 0 var(--a-color),
         3px  3px 0 var(--a-color);
    padding: 6px;
    /* Other */
    transition: transform 0.2s, box-shadow 0.2s;
}

/* TODO: willen we dit? v (card reactive maken) */
/* .card:hover {
    transform: scale(1.005);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
} */

.white-card {
    /* background */
    /*background-color: var(--a-color); dit doet niks wet de background image*/
    background-image: url("/static/axiom/img/white_math_background_big.jpg");
    background-size: 750px;
    background-repeat: repeat;
    background-position: left var(--random-x) right var(--random-y); /* prevent background from moving upon resize */
    overflow: hidden;
    /* border */
    border-radius: 10px;
    border: 2px solid var(--a-color);
    box-shadow: 
        -6px -6px 12px rgba(255, 255, 255, 0.1),
         6px  6px 6px rgba(0, 0, 0, 0.15);
    /* content */
    color: var(--p-color);
    font-weight: 500;
    text-shadow: 
            -1px -1px 0 var(--t-color),  
             1px -1px 0 var(--t-color),
            -1px  1px 0 var(--t-color),
             1px  1px 0 var(--t-color),
            -2px -2px 0 var(--t-color),  
             2px -2px 0 var(--t-color),
            -2px  2px 0 var(--t-color),
             2px  2px 0 var(--t-color),
            -3px -3px 0 var(--t-color),  
             3px -3px 0 var(--t-color),
            -3px  3px 0 var(--t-color),
             3px  3px 0 var(--t-color);
    padding: 6px;
    /* Other */
    transition: transform 0.2s, box-shadow 0.2s;
}

.white-card *::selection {
    text-shadow: none;
    background: var(--a-color);
    color: var(--t-color);
}

.card *::selection {
    text-shadow: none;
    background: var(--t-color);
    color: var(--a-color);
}