/* stylelint-disable */
/* Modern Color Codes without Comma */
:root {
    --font-color: rgb(0, 0, 0); 
    --color-dark: rgb(58, 63, 84); 
    --color-dark-opacticy-15: rgba(58, 63, 84,15%); 
    --color-dark-opacticy-30: rgba(58, 63, 84,30%); 
    --color-dark: rgb(58, 63, 84); 
    --bg-color: 255, 255, 255;
    --bg-color-trasparency: rgb(255,255,255,40%); 
    --color-accent: 252, 171, 128;
    --color-accent-light-opacticy-5: rgba(255, 171, 128, 5%); 
    --color-accent-light-opacticy-10: rgba(255, 171, 128, 10%); 
    --color-accent-light-opacticy-15: rgba(255, 171, 128, 15%); 
    --color-accent-light-opacticy-25: rgba(255, 171, 128, 25%); 
    --color-accent-light-opacticy-30: rgba(255, 171, 128, 30%); 
    --color-accent-light-opacticy-30-für-darkmode: rgba(255, 171, 128, 30%); 
    --color-accent-light-opacticy-50: rgba(255, 171, 128, 50%); 
    --color-accent-light-opacticy-70: rgba(255, 171, 128, 70%); 
    --color-accent-dark: rgb(227, 137, 92); 
    --color-accent-light-lighter-no-transparency: rgb(251, 225, 214);
    --color-footer: rgb(241, 219, 206,70%); ;
}

[data-theme="light"] {
    --font-color: rgb(0, 0, 0); 
    --color-dark: rgb(58, 63, 84); 
    --color-dark-dark-mode: rgb(58, 63, 84);
    --color-dark-opacticy-15: rgba(58, 63, 84,15%); 
    --color-dark-opacticy-30: rgba(58, 63, 84,30%); 
    --color-dark: rgb(58, 63, 84); 
    --bg-color: 255, 255, 255;
    --bg-color-trasparency: rgb(255,255,255,40%); 
    --color-normal: rgb(128, 135, 160);
    --color-accent: 252, 171, 128; 
    --color-accent-light-opacticy-5: rgba(255, 171, 128, 5%);  
    --color-accent-light-opacticy-10: rgba(255, 171, 128, 10%); 
    --color-accent-light-opacticy-15: rgba(255, 171, 128, 15%); 
    --color-accent-light-opacticy-25: rgba(255, 171, 128, 25%); 
    --color-accent-light-opacticy-30: rgba(255, 171, 128, 30%); 
    --color-accent-light-opacticy-30-für-darkmode: rgba(255, 171, 128, 30%); 
    --color-accent-light-opacticy-50: rgba(255, 171, 128, 50%); 
    --color-accent-light-opacticy-70: rgba(255, 171, 128, 70%); 
    --color-accent-dark: rgb(227, 137, 92); 
    --color-accent-dark-darkmode: rgb(227, 137, 92); 
    --color-accent-light-lighter-no-transparency: rgb(251, 225, 214);
    --color-footer: rgb(241, 219, 206,70%); ;
}

[data-theme="dark"] {
    --font-color: rgb(0, 0, 0); 
    --color-dark: rgb(42, 47, 66);
    --color-dark-dark-mode: rgb(128, 135, 160);
    --color-dark-opacticy-15: rgba(58, 63, 84,15%); 
    --color-dark-opacticy-30: rgba(58, 63, 84,30%); 
    --color-accent: 147, 100, 77;
    --color-accent: 147, 100, 77;
    --bg-color: 24, 27, 35;
    --bg-color-trasparency: rgb(24, 27, 35, 30%);
    --color-accent-light-opacticy-5: rgba(255, 171, 128, 5%); 
    --color-accent-light-opacticy-10: rgba(255, 171, 128, 10%); 
    --color-accent-light-opacticy-15: rgba(255, 171, 128, 15%); 
    --color-accent-light-opacticy-25: rgba(255, 171, 128, 25%); 
    --color-accent-light-opacticy-30: rgba(255, 171, 128, 30%); 
    --color-accent-light-opacticy-30-für-darkmode: rgba(255, 171, 128, 30%); 
    --color-accent-light-opacticy-50: rgba(255, 171, 128, 50%); 
    --color-accent-light-opacticy-70: rgb(147, 100, 77); 
    --color-accent-dark: rgb(37, 41, 56); 
    --color-accent-dark-darkmode: rgb(128, 135, 160);
    --color-accent-light-lighter-no-transparency: rgb(128, 135, 160);
    --color-normal: rgb(128, 135, 160);
    --color-footer : rgb(82, 90, 115);  


}

/* Anoassung der SVG Icons im entsprechendne Mode */
[data-theme="light"] .weather-icon{
    filter:invert(100%) sepia(0%) saturate(2709%) hue-rotate(160deg) brightness(112%) contrast(101%);
}

[data-theme="dark"] .svg-icons {
    filter: invert(51%) sepia(12%) saturate(580%) hue-rotate(189deg) brightness(102%) contrast(88%);
}

[data-theme="dark"] .smalltext, .smalltext a, .smalltext a:link, .smalltext a:visited{

}

/* Icons in Input fields */
[data-theme="light"] ::-webkit-calendar-picker-indicator{
    filter: invert(27%) sepia(24%) saturate(583%) hue-rotate(188deg) brightness(93%) contrast(85%);
}

[data-theme="dark"] ::-webkit-calendar-picker-indicator{
    filter: invert(53%) sepia(13%) saturate(426%) hue-rotate(189deg) brightness(100%) contrast(89%);
}
/* stylelint-enable */