:root{
    --base : #181b22;
    --gray : #282d38;
    --gray-light : #424755;
    --secondary : #2f3440;
    --secondary-light : #515151;
    --secondary-break : #6d6d6d;
    --dark-mode-blue : #3a8bf8;
    --dark-blue : #031c64;
    --dark-white : #b1b1b4;
    --dark-white-low : #99999a;
}
.switch-container{
    background: rgba(185, 185, 185, 0.078);
    height: 2rem;
    width: 2rem;
    transition: 0.1s;
}
.switch-container:hover {
    background: rgba(169, 169, 169, 0.498);
    transition: 0.1s;
}
.switch-container:active {
    background: #c4c4c4;
    transition: 0.1s;
}
#theme-icon{
    fill: white;
}

body{
    background-color: white !important;
    transition: 0.3s;
}
body.dark-mode{
    transition: 0.3s;
    background-color: var(--base) !important;
}
body.dark-mode .body{
    transition: 0.3s;
    background: var(--base) !important;
}
body.dark-mode .text-white{
    transform: 0.3s;
    color: var(--dark-white) !important;
}
body.dark-mode .text-dark-white-low{
    transition: 0.3s;
    color: var(--dark-white) !important;
}
body.dark-mode .bg-dark-secondary{
    transition: 0.3s;
    background-color: var(--secondary) !important;
}
body.dark-mode .bg-dark-gray{
    transition: 0.3s;
    background-color: var(--gray) !important;
}
body.dark-mode ::placeholder{
    transition: 0.3s;
    color: var(--secondary-break) !important;
}
body.dark-mode .body input,body.dark-mode .body textarea{
    border: none !important;
    color: var(--dark-white);
}
body.dark-mode .body ::file-selector-button{
    border: none !important;
    color: var(--dark-white);
    background: var(--gray) !important;
}
body.dark-mode .body select{
    border: none !important;
    color: var(--dark-white) !important;
}
body.dark-mode .d-dark-none{
    display: none !important;
}
body.dark-mode .d-dark-block{
    display: block !important;
}
body.light-mode .d-light-none{
    display: none !important;
}
body.dark-mode #deskHeader.bg-change{
    background: var(--secondary) !important;
}
body.dark-mode #deskHeader.bg-change a{
    color: var(--dark-white-low) !important;
}
body.dark-mode #mobileMenu{
    background: var(--gray-light) !important;
}
body.dark-mode #mobileMenu a{
    color: var(--dark-white-low) !important;
}
#deskHeader.bg-change #icon_path{
    fill: rgb(236, 232, 232);
}
#cooperation #icon_path{
    fill: rgb(236, 232, 232);
}
body.dark-mode .bg-dark-blue{
    background: var(--dark-mode-blue) !important;
}
body.dark-mode .text-container h1,h2,h3,h4,h5,h6{
    color: var(--dark-white-low);
}
body.dark-mode p{
    color: var(--dark-white-low) !important;
}
body.dark-mode .text-container p{
    color: var(--secondary-break);
}
body.dark-mode .text-dark-secondary-break{
    color: var(--secondary-break) !important;
}
body.dark-mode .bg-gray-light{
    background: var(--gray-light);
}
body.dark-mode .reading-button:hover{
    background: var(--secondary);
}
body.dark-mode .reading-button:active{
    background: var(--gray);
}
body.light-mode #dark{
    display: none;
}
body.light-mode #light{
    display: block;
}
body.dark-mode #light{
    display: none;
}
body.dark-mode #dark{
    display: block;
}