/* \Style.css */
* {
    padding: 0;
    margin: 0;
}

html.light-theme {
    --bgColor: #ffffff;
    --textColor: #000000;
    --paraphColor: #76787a;
    --mainPageBgColor: #f5f5f5;
    --mainPageHeaderBgColor: #ffffff;
    --mainPageBodyBgColor: #f5f5f5;
    --mainPageModuleBarBgColor: #ffffff;
    --mainPageBorderColor: #e0e0e0;
    --mainPageButtonBgColor: #ffffff;
    --mainPageCardBgColor: #frgb(226, 220, 220)

    --countBgColor: #003477;
    --countColor: #d6e8ff;

    --activeElementBgColor: #82adfd;
    --activeElementHoverColor: #9fc1ff;
}

html.dark-theme {
    --bgColor: #000000;
    --textColor: #6e8fa3;
    --paraphColor: #586872;
    --mainPageBgColor: #000000;
    --mainPageHeaderBgColor: #000000;
    --mainPageBodyBgColor: #000000;
    --mainPageModuleBarBgColor: #000000;
    --mainPageBorderColor: #333333;
    --mainPageButtonBgColor: #000000;
    --mainPageCardBgColor: #000000;

    --countBgColor: #003477;
    --countColor: #d6e8ff;
    
    --activeElementBgColor: #002864;
    --activeElementHoverColor: #133464;
}

body {
    width: 100vw;
    height: 100vh;
    background-color: var(--bgColor);
    color: var(--textColor);
}

/* Très petits écrans */
@media (max-width: 480px) {
}

/* Smartphones */
@media (min-width: 481px) and (max-width: 767px) {
}

/* Tablettes */
@media (min-width: 768px) and (max-width: 1024px) {
}

/* Petits laptops */
@media (min-width: 1025px) and (max-width: 1280px) {
}

/* Desktop */
@media (min-width: 1281px) {
}