/*
-++ CSS Dark Mode and Color Theme switch for websites and HTML apps.  +++-
--- Original author	:: Nik K. linkedin.com/in/nik--k---/    (  4.Feb 2020). 
--- Code adoption	:: YourName    (date).
--- License		:: GNU General Public License v 3.0.
--- Latest version	:: github.com/Dorson/CSS-Dark-Mode-and-color-switch
*/


/* Set default color variables.  */

:root , :root.snow-white {
--color-nav:#FFFFFF;
	--color-btn:#0e0b0b;
--color-menu:#A8164E;
--color-html: #FFFFFF;
--color-body: #FFFFFF;
--color-text: #051105 ;
--color-hover: #0d6efd;
--color-link: #0e0b0b;
--color-selected-text: #000 ;
--color-selected-bg: #CF7 ;

}


/* If "dark mode" was set in browser or app settings already. */

@media screen and (prefers-color-scheme: dark) {

 html:not(.snow-white) {
--color-nav:#FFFFFF;
	--color-btn:#FFFFFF;
--color-menu:#A8164E;
--color-html: #FFFFFF;
--color-body: #FFFFFF;
--color-text: #051105 ;
	 --color-hover: #0d6efd;
--color-link: #051105;
--color-selected-text: #000 ;
--color-selected-bg: #CF7 ;
 }
}



/* Dark color variables, if "dark" is set as HTML tag's CSS class */ 

html.dark { 
--color-nav:#FFFFFF;
	--color-btn:#FFFFFF;
	--color-menu:#0e0b0b;
  --color-html: #0e0b0b ;
  --color-body: #1a1010 ;
  --color-text: #d1d1d1 ;
	--color-hover: #ffc107;
  --color-link: #FFFFFF;
  --color-selected-text: #000 ;
  --color-selected-bg: #CF7 ;
 }

/* Deep Purple color variables, if "purple" is set as HTML tag's CSS class */ 

html.purple { 
--color-nav:#FFFFFF;
	--color-btn:#FFFFFF;
	--color-menu:#0a0614;
--color-html: #0a0614 ;
--color-body: #120b24 ;
	--color-hover: #001830;
--color-text: #d1d1d1 ;
--color-selected-text: #000 ;
--color-selected-bg: #CF7 ;
--color-link: #4fbcff ;

}

/* Deep Green color variables, if "green" is set as HTML tag's CSS class */

html.green { 
--color-nav:#FFFFFF;
	--color-btn:#FFFFFF;
	--color-menu:#04160a;
--color-html: #04160a ;
--color-body: #072813 ;
--color-text: #d1d1d1 ;
--color-selected-text: #000 ;
--color-selected-bg: #CF7 ;
--color-link: #4fbcff ;

}

/* Cobalt Blue color variables, if "blue" is set as HTML tag's CSS class */

html.blue { 
--color-nav:#FFFFFF;
	--color-btn:#FFFFFF;
	--color-menu:#000d1a;
--color-html: #000d1a ;
--color-body: #001830 ;
--color-text: #d1d1d1 ;
--color-selected-text: #000 ;
--color-selected-bg: #CF7 ;
--color-link: #4fbcff ;

}

html {background: var(--color-html) ; }


body {
	background: var(--color-body) ; 
	color: var(--color-text) ; 
}


/* Typography and font styles. */

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');



::selection {
 background: var(--color-selected-bg) ; color: var(--color-selected-text) ;
}

/* Style for links. */

figcaption{color: var(--color-link) !important}
a.nav-link{color: var(--color-nav);text-decoration: none ;}
a.link{color: var(--color-link) !important} a.link:hover{color: var(--color-hover) !important}
a.link-primary{color: var(--color-link) !important} a.link-primary:hover{color: var(--color-hover) !important}
a.link-body-emphasis{color: var(--color-link) !important} a.link-body-emphasis:hover{color: var(--color-hover) !important}
button.nav-link, a.nav-item,a.stretched-link{color: var(--color-btn);text-decoration: none ;}a.nav-item:hover{color: var(--color-hover);text-decoration: none ;}a.stretched-link:hover{color: var(--color-hover);text-decoration: none ;}
a.dropdown-item{color: var(--color-selected-text);text-decoration: none ;}a.dropdown-item:hover{color: var(--color-hover);text-decoration: none ;}
.bg-led {--bs-bg-opacity: 1;background-color: var(--color-menu);}

/* docker sticker menu dock. */

.docker { margin: 1px ; padding: 0px ; position: fixed ;
bottom:0%; left: 15%; z-index:99; width: 13.5rem; height: 2.7rem; color: var(--color-text) ;
text-align: left ; overflow: hidden ; background: transparent ; border: 0px ;
}

.docker:hover , .docker:active { background: var(--color-body) ; color: var(--color-text) ;
margin: 1px ; padding: 0.1rem 0.4rem 1rem 0.4rem ;
position: fixed; bottom: 0px ; left: 2% ; z-index:250; width: 73% ; height: 75% ; 
border-radius: 8px ; box-shadow: 0px 1px 33px #aaa ; border-bottom: 3rem double rgba(150, 150, 150, 0.1) ;
display: block ; overflow: auto ; vertical-align: top ; text-align: center ;
}


.code-box  {
  color: #000 ; background:  #d7dbda ;  border: solid #668f99 ;
  border-width: 0.155rem .2rem .2rem .444rem ; border-radius: 0.9rem 1.5rem 0.5rem 2rem ;  
  padding: .8em .6em ; overflow: auto ; width: auto ; margin: 1rem ;
      
}


/* Print exception rules. Very useful to print website as PDF and grandma :-)  */
@media print
{
   .docker , .menue { visibility: hidden; }
   .no-print, .no-print *
    {
      display: none !important;
    }
}