/* defining variables to store color values */
:root
{
/* defining variables for Colors */	
	--background: #cccccc;
	--color1: #00416a;
	--color2: #6b0500;
	--color3: #6b4d00;
	--color4: #382546;
	
	--light_background: #cccccc;
	--light1: #00416a;
	--light2: #6b0500;
	--light3: #6b4d00;
	--light4: #382546; 
	
	--dark_background: #333333;
	--dark1: #ffbe95;
	--dark2: #94faff;
	--dark3: #94b2ff;
	--dark4: #c7dab9;
}

/* assigning colors for "light mode" */
body.light_mode 
{
	--background: var(--light_background);
	--color1: var(--light1);
	--color2: var(--light2);
	--color3: var(--light3);
	--color4: var(--light4);
	
	background-color: var(--background);
	color: var(--color1);
	
	font-family: Courier New;				
}

/* assigning colors for "dark mode" */
body.dark_mode
{
	--background: var(--dark_background);
	--color1: var(--dark1);
	--color2: var(--dark2);
	--color3: var(--dark3);
	--color4: var(--dark4);

	background-color: var(--background);
	color: var(--color1);
	
	font-family: Courier New;
}

/* overriding colors for URLs */
a { color: var(--color1); }
a:link { color: var(--color1); }
a:active {color: var(--color2); }
a:hover {color: var(--color3); }

/* .path and keyframes dash used to animate logo */	
.path 
{
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: dash 3s linear forwards;
}
			
@keyframes dash
{
	to
	{
	stroke-dashoffset: 0;
	}
}

/* Setting Fill Color and Hover Colour for SVG Icons used for Links */
svg /* fill color for SVG icons used for links */
{
	fill: var(--color1);
}
svg:hover /* hover color for SVG icons used for links */
{
	fill: var(--color2);
}

.flex-logo /* class for title logo centralised */
{
	display: flex;
	justify-content: center;
	flex-basis: 50%;
}

.flex-divider /* class for section dividing bar */
{
	display: flex;
	justify-content: center;
	margin: 0.5em;
}

.flex-row
{
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-basis: 35em;
	background-color: #eee;
}

.flex-pad
{
	display: flex;
	flex-direction: row;
	flex-basis: 25%;
	background-color: #330000;
}

.flex-icons /* class to arrange icon links horizontally */
{
	display: flex;
	flex-direction: row;
	flex-basis: 50%;
	justify-content:center;
}

/* The switch - the box around the slider */
.switch 
{
	position: relative;
	display: inline-block;
	width: 35em;
	height: 1.1em;
}

/* Hide default HTML checkbox */
.switch input 
{
	opacity: 0;
	width: 0;
	height: 0;
}

/* The slider */
.slider /* background of the slider in "light mode" aka "off" */
{
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--color4);
	-webkit-transition: .4s;
	transition: .4s;
}
input:checked + .slider /* background of the slider in "dark mode" aka "on" */ 
{
	background-color: var(--color4);
}
.slider:before /* slider position indicator */
{
	position: absolute;
	content: "";
	height: 0.7em;
	width: 0.7em;
	left: 0.2em;
	bottom: 0.2em;
	background-color: var(--background);
	-webkit-transition: 400ms;
	transition: 400ms;
}
input:checked + .slider:before /* movement of the slider position indicator */
{
	-webkit-transform: translateX(33.9em);
}
.slider.round /* radius of the corners on the slider */
{
	border-radius: 0.55em;
}
.slider.round:before /* radius of the corners on the slider position indicator */
{
	border-radius: 50%;
}