:root {
    --almostblack-rgb: rgb(23, 24, 26);
    
    --darkest: 47,59,73;
    --darkest-rgb: rgb(47,59,73);

    --dark: 70, 83, 102;
    --dark-rgb: rgb(70, 83, 102);

    --middle: 112, 128, 147;
    --middle-rgb: rgb(112, 128, 147);

    --good-darkest-rgb: rgb(141, 138, 122);
    --good-dark-rgb:rgb(216, 214, 209);
    --good-middle-rgb: rgb(255, 255, 255);

    --evil-darkest-rgb: rgb(101, 46, 45);
    --evil-dark-rgb:rgb(134, 73, 73);
    --evil-middle-rgb: rgb(200, 101, 92);
    
    --accent: 173, 179, 89;
    --accent-rgb: rgb(173, 179, 89);

    --accent-pop:208, 209, 115;
    --accent-pop-rgb:rgb(208, 209, 115);

    --accent-support: 143, 150, 68;
    --accent-support-rgb: rgb(143, 150, 68);

    --light: 169, 178, 187;
    --light-rgb: rgb(169, 178, 187);

    --goColor: 162,212,123;
    
    --radius: 7px;
    --mainpadding: 7px;
    --morepadding: 21px;
    --max_width:1200px;
    --imagesize:50px;
    --card-width:120px;
    --image-height:160px; 
    --restrict-uploaded-image:250px;

    --index:5px;

    /* kort farver */

    --light-yellow:255, 252, 232;
    --pale-yellow: rgb(208, 209, 115);
    --pale-yellow-values: 208, 209, 115;
    --yellow-green: rgb(173, 179, 89);
    --yellow-gree-values: 173, 179, 89;
    --olive: rgb(143, 150, 68);
    --dark-blue-grey: rgb(47,59,73); /*background*/
    --muted-blue: rgb(112, 128, 147); /*stroke*/
    --steel-blue: rgb(70, 83, 102); /*card color*/
}

@media (max-width: 600px) {

    .container.hasCards, .container.info {
        padding:var(--mainpadding);
    }   

}

@media (max-width: 450px) {
    #cardsContainer {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        box-sizing: border-box;
        gap: calc(var(--mainpadding)*8) var(--mainpadding);
        padding-bottom: calc(var(--mainpadding)*5);
        position: relative;
    }

    :root {
        --image-height:130px;
        --card-width:110px;
        --restrict-uploaded-image:200px;
    }
    
}