/*-------Colour Variables------*/
:root{
    --light-background: #d3d3d3;
    --light-nav: #ffffff;
    --light-hover: #ffddd0;
    --light-border: #355249;
    --light-p: black;
    --light-p-blog: white;
    --light-p-proj: white;
    --light-h1: #355249;
    --light-h2: white;
    --light-h3: black;
    --light-h4: white;
    --light-h5: black;
    --light-h6: white;
    --light-icon: white;
    --light-icon-hover: #ffddd0;
    --light-title-icon: #355249;
    --light-title-hover: #c5917d;
    --light-code-background: rgba(46, 46, 46, 1); /*#2e2e2e*/

    --dark-background: #303030; 
    --dark-nav: #4b4b4b;
    --dark-hover: #c5917d; 
    --dark-border: #000; 
    --dark-p-blog: white;
    --dark-p-proj: white;
    --dark-p: white;
    --dark-h1: white;
    --dark-h2: white;
    --dark-h3: white;
    --dark-h4: white;
    --dark-h5: white;
    --dark-h6: white;
    --dark-icon: white;
    --dark-icon-hover: #c5917d;
    --dark-code-background: rgba(22, 22, 45, 1); /*#222245*/
    --dark-title-hover: #c5917d
}



/*---------PC Only ----------*/
@media screen and (min-width: 800px) {
    .light-mode{
        & :is(li a,  ul.nav){
            & :hover{background-color: var(--light-hover);}
        }
        & .button:hover{background-color: var(--light-hover);}
        & .proj-button:hover{background-color: var(--light-hover);}
        & .blog-button:hover{background-color: var(--light-hover);}
        & .fa:hover{color: var(--light-icon-hover);}
        & .fa-solid:hover{color: var(--light-icon-hover);}
        & .fa-regular:hover{color: var(--light-icon-hover);}
        & .fa-brands:hover{color: var(--light-icon-hover);}
        & .icon-colour:hover{color: var(--light-title-hover);}
    }

    .dark-mode{
        & :is(li a,  ul.nav){
            & :hover{background-color: var(--dark-hover);}
        }
        & .button:hover{background-color: var(--dark-hover);}
        & .proj-button:hover{background-color: var(--dark-hover);}
        & .blog-button:hover{background-color: var(--dark-hover);}
        & .fa:hover{color: var(--dark-icon-hover);}
        & .fa-solid:hover{color: var(--dark-icon-hover);}
        & .fa-regular:hover{color: var(--dark-icon-hover);}
        & .fa-brands:hover{color: var(--dark-icon-hover);}
        & .icon-colour:hover{color: var(--dark-title-hover);}
    }
}


/*----------Light Theme------*/
.light-mode{
    background-color: var(--light-background);
    & article{background-color: var(--light-background);}
    & :is(ul.nav, li a, .button, .blog-button, .proj-button){background-color: var(--light-nav);}
    & :is(.header, .footer, .card, .blog-card){background-color: var(--light-border);}

    & p{color: var(--light-p);}
    & h1:not(.title-text h1){color: var(--light-h1);}
    & h2{color: var(--light-h2);}
    & h3{color: var(--light-h3);}
    & h4{color: var(--light-h4);}
    & h5{color: var(--light-h5);}
    & h6{color: var(--light-h6);}

    & th{color: var(--light-p);}
    & td{
        color: var(--light-p);}
    & :is(.fa-github, .fa-linkedin-in, .fa-envelope, .fa-moon){color: var(--light-icon);}
    & .icon-colour{color: var(--light-title-icon);}
    & .blog-p{color: var(--light-p-blog);}
    & .proj-p{color: var(--light-p-proj);}

    & code[class*="language-"]{
         background-color: var(--light-code-background) !important; 
         color: var(--light-code-text); 
    } 
    & pre{
        background-color: var(--light-code-background) !important; 
        border: 3px solid;
        border-color:white; 
    } 
    & ul li::marker {color: var(--light-p);}

    & hr{border: 0.5px solid black;}
    & .title-section {background-color: var(--light-border);}
    & .title-text {color: white !important;}
    & .title text h1 { color: white !important;}
    & .title-icons a {color: white;}
}


  

/*----------Dark Theme------*/
.dark-mode{
    background-color: var(--dark-background);
    & article{background-color: var(--dark-background);}
    & :is(ul.nav, li a, .button, .blog-button, .proj-button){background-color: var(--dark-nav);}
    & :is(.header, .footer, .card, .blog-card){background-color: var(--dark-border);}

    & p{color: var(--dark-p);}
    & h1:not(.title-text h1){color: var(--dark-h1);}
    & h2{color: var(--dark-h2);}
    & h3{color: var(--dark-h3);}
    & h4{color: var(--dark-h4);}
    & h5{color: var(--dark-h5);}
    & h6{color: var(--dark-h6);}

    & th{color: var(--dark-p);}
    & td{color: var(--dark-p);}
    & :is(.fa-github, .fa-linkedin-in, .fa-envelope, .fa-moon, .icon-colour){color: var(--dark-icon);}
    & .blog-p{color: var(--dark-p-blog);}
    & .proj-p{color: var(--dark-p-proj);}

    & code[class*="language-"]{
        background-color: var(--dark-code-background) !important; 
        color: var(--dark-code-text); 
   } 
   & pre{
       background-color: var(--dark-code-background) !important; 
       border: 3px solid;
       border-color:white; 
   } 
    & ul li::marker {color: var(--dark-p);}


    & hr{border: 0.5px solid white;}
    & .title-section {background-color: var(--dark-border);}
    & .title-text h1 {color: white !important;}
    & .title-icons a {color: white;}

    & :is(.card, .blog-card){
        border: 2px solid white;
    }
}


/*------Generic Colours (irrespective of mode) ------*/
pre{
    text-shadow: none !important;
}
.code-title{
    color: white !important;
}
code{
    color: white !important;
    text-shadow: none !important;
    & span {background: transparent !important;}
}