/*  Dark Mode (Default) */
/* Version 1 */

/*
Color codes:
#ffffff
#80fbff
#00bcd4
#000

#1a1e1f
#333
#202324

rgba(255, 255, 255, 0.05)
*/

:root {
    /* Text Colors */
    --text-color1: #ffffff;
    --text-color2: #80fbff;
    --text-color3: #000;
    --link-color: #00bcd4;
    --arrow-color: #000;
    

    /*Background Colors */
    --grad-background1: linear-gradient(to bottom, #0d1b2a, #1a1e1f);
    --background-color: #000;
    --trans-background-color: transparent;
    --div-background-color: #333;
    --div-background-color2: #333;
    --lable-background-color: rgba(255, 255, 255, 0.1);
    --loading-background-color: #000;
    --arrow-background-color: rgba(255, 255, 255, 0.4);
    --arrow-background-color2: rgba(255, 255, 255, .8);
    --dot-background-color: rgba(255, 255, 255, 0.6);
    --mainDivs-background-color: #1a1e1f;
    --nav-background-color: transparent;
    --filter-background-color: #202324;
    --contact-bnt-background-color: #2b2b2b;
    --inputForm-background-color: #1b1b1b;
    
    
    /*popUp*/
    --popUp-background-color: #ffffff;
    --popUpOverlay-background-color: rgba(0, 0, 0, 0.5);
    --popUp-box-shadow: 0 0 10px 5px rgba(128, 251, 255, 1);
    --messageSent-background-color: rgba(128, 251, 255, .5);
    --messageSent-box-shadow: 0 0 10px 5px rgba(0, 169, 255, 1);
    
    /* Borders*/
    --border: 3px solid rgba(128, 251, 255, 1); /*INNER*/
    
    --border-bottom0: solid transparent;
    --border-top0: solid transparent;
    --border-right0: solid transparent;
    --border-left0: solid transparent;
    --border-full0: solid transparent;
    
    --border-bottom1: 1px solid #80fbff;
    --border-top1: 1px solid #80fbff;
    --border-right1: 1px solid #80fbff;
    --border-left1: 1px solid #80fbff;
    --border-full1: 1px solid #80fbff;
    
    --border-bottom2: 2px solid #80fbff;
    --border-top2: 2px solid #80fbff;
    --border-right2: 2px solid #80fbff;
    --border-left2: 2px solid #80fbff;
    --border-full2: 2px solid #80fbff;
    
    --border-bottom3: 3px solid #80fbff;
    --border-top3: 3px solid #80fbff;
    --border-right3: 3px solid #80fbff;
    --border-left3: 3px solid #80fbff;
    --border-full3: 3px solid #80fbff;
    
    --half-border-bottom: 2px solid rgba(128, 251, 255, .8);
    
    /* Effects */
    --main-box-shadow: 0 0 5px 2px rgba(128, 251, 255, 1);
    --nav-box-shadow: -2px 2px 0 0 rgba(128, 251, 255, 0.8);
    --skill-box-shadow: 0 0 7px rgba(128, 251, 255, 1);
    --media-box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    --projectBox-box-shadow: 0 0 8px rgba(128, 251, 255, 0.6);
    --filter-box-shadow: 0 0 3px 1px rgba(128, 251, 255, 0.8);
    --text-shadow: transparent;
    --underline-color: #80fbff;
    --hover-color: #80fbff;
    --gradient-background: linear-gradient(120deg, rgba(128, 251, 255, 0) 0%, rgba(128, 251, 255, 0.6) 50%, rgba(128, 251, 255, 0) 100%); 
    
}


/*________________________________________________________________________________________________________________________________________________________________________________________________________________*/


/* Light Mode Overrides */
.light-mode {
    /* Text Colors */
    --text-color1: #000;
    --text-color2: #000;
    --text-color3: #000;
    --link-color: #00bcd4;
    --i-color: rgba(0, 196, 255, 1);
    --social-color: #5e686e;
    --arrow-color: #000;

    /*Background Colors */
    --grad-background1: linear-gradient(to bottom, #0d1b2a, #1a1e1f);
    --background-color: #969ea3;
    --trans-background-color: transparent;
    --div-background-color: #969ea659;  /* Small txt div background */
    --div-background-color2: #626B74;
    --lable-background-color: rgba(0, 169, 255, 0.1);
    --loading-background-color: #000;
    --arrow-background-color: rgba(255, 255, 255, 0.4);
    --arrow-background-color2: rgba(255, 255, 255, .8);
    --dot-background-color: rgba(255, 255, 255, 0.6);
    --mainDivs-background-color: #fff;
    --nav-background-color: transparent;
    --filter-background-color: transparent;
    --contact-bnt-background-color: #969ea659;
    --inputForm-background-color: #fff;
    
    
    /*popUp*/
    --popUp-background-color: #ffffff;
    --popUpOverlay-background-color: rgba(0, 0, 0, 0.5);
    --popUp-box-shadow: 0 0 10px 5px rgba(0, 169, 255, 1);
    --messageSent-background-color: rgba(128, 251, 255, .5);
    --messageSent-box-shadow: 0 0 10px 5px rgba(0, 169, 255, 1);
    
    /* Borders*/
    --border: 3px solid rgba(0, 169, 255, 1); /* Inner */
    
    --border-bottom0: solid transparent;
    --border-top0: solid transparent;
    --border-right0: solid transparent;
    --border-left0: solid transparent;
    --border-full0: solid transparent;
    
    --border-bottom1: 1px solid #00A9FF;
    --border-top1: 1px solid #00A9FF;
    --border-right1: 1px solid #00A9FF;
    --border-left1: 1px solid #00A9FF;
    --border-full1: 1px solid #00A9FF;
    
    --border-bottom2: 2px solid #00A9FF;
    --border-top2: 2px solid #00A9FF;
    --border-right2: 2px solid #00A9FF;
    --border-left2: 2px solid #00A9FF;
    --border-full2: 2px solid #00A9FF;
    
    --border-bottom3: 3px solid #00A9FF;
    --border-top3: 3px solid #00A9FF;
    --border-right3: 3px solid #00A9FF;
    --border-left3: 3px solid #00A9FF;
    --border-full3: 3px solid #00A9FF;
    
    --half-border-bottom: 2px solid rgba(0, 168, 255, 0.5);
    
    /* Effects */
    --main-box-shadow: 0 0 5px 2px rgba(0, 169, 255, 1);
    --nav-box-shadow: -2px 2px 0 0 rgba(0, 169, 255, 0.5);
    --skill-box-shadow: 0 0 7px rgba(0, 169, 255, 1);
    --media-box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    --projectBox-box-shadow: 0 0 8px rgba(0, 169, 255, 0.6);
    --filter-box-shadow: 0 0 2px 3px rgba(0, 169, 255, 0.6);
    --text-shadow: transparent;
    --underline-color: #00A9FF;
    --hover-color: #00A9FF;
    --gradient-background: linear-gradient(120deg, rgba(128, 251, 255, 0) 0%, rgba(128, 251, 255, 0.6) 50%, rgba(128, 251, 255, 0) 100%); 
}




/* theme.css */

/* Sweeping transition overlay */
#theme-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 200vw;
  height: 200vh;
  pointer-events: none;

  z-index: 9999;
  opacity: 0;
  transition: transform 1s ease-out, opacity 1s ease-out;
}

#theme-transition.active {
  opacity: 1;
}

/* Colour codes */
/*
#000
#fff
#00A9FF
#f9f9f9
#959ea3
#bdfeff
rgba(128, 251, 255, 1)
rgba(0, 169, 255, .5)
rgba(0, 169, 255, 0.1)
rgba(0, 169, 255, 0.2)