/* 
Theme Name:		 Reese - Toocheke Child
Theme URI:		 https://www.toocheke.com/
Description:	 Reese -Toocheke Child is a child theme of Toocheke
Author:			 LeeToo
Author URI:		 https://leetoo.net/
Template:		 toocheke
Version:		 1.0.0
Text Domain:	 toocheke-child
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/


/* Write here your own personal stylesheet */
/* Variables */
:root {
	--text-color: white;
	--text-color-2: #00b8ff;
	--text-color-3: #a2c3df;
	--text-faded-color: #618eb5;
	--primary-col-bg-color: rgba(25,38,46,0.50);
	--url-primary-color: #00b8ff;
	--url-hover-color: #7adaff;
	--button-bg-color-dark: #141C1D;
	--button-bg-color-light: #233133;
	--button2-bg-color-dark: rgba(0,0,0,0.5);
	--button2-bg-color-light: rgba(0,50,122,0.78);
	--button3-bg-color-light: rgba(0,50,122,1);
	--bg-dark-color: #0c1726;
	--bg-dark-2-color: rgba(0,0,0,0.6);
	--bg-light-2-color: #00327a;
	--bg-light-3-color: #0088bd;

	/* Avatar Sizing */
	--Reese-avatar-width: 172px;
	--Reese-avatar-height: 200px;
	--avatar-profile-name-spacer-height: 165px;
}

@media only screen and (max-width: 500px) {
	:root {
		/* Avatar Sizing */
		--Reese-avatar-width: 129px;
		--Reese-avatar-height: 150px;
		--avatar-profile-name-spacer-height: 116px;
	}

	#avatar_effects {
		border: none;
	}
}

body {
	font-family: Arial, Helvetica, sans-serif;
	background:#000 url(./img/stars.png) repeat;
	color: var(--text-color);
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	text-shadow: 
		2px 2px 2px rgb(0,0,0),
		0 0 5px rgb(138,163,202),
		0 0 10px rgb(88,122,156),
		0 0 15px rgba(95,114,136,0.54),
		0 0 20px rgba(128,190,255,0.55),
		0 0 30px rgba(114,215,253,0.42),
		0 0 40px rgba(91,195,255,0.37),
		0 0 55px rgba(120,211,255,0.15),
		0 0 75px rgba(107,187,255,0.06);
}

.jumbotron {
	background-color: rgba(0,0,0,0);
}

.jumbotron .site-title {
	float: left;
	text-shadow: 5px 5px 2px rgba(0,0,0,0.5);
	color: var(--text-color-2);
}

a, a:visited, #side-bar a {
	color: var(--url-primary-color);
}

a:hover, a:focus, a:active, #side-bar a:hover, #side-bar a:focus, #side-bar a:active {
	color: var(--url-hover-color);
}

#side-bar a {
	text-shadow: 2px 2px 2px rgb(0, 0, 0);
}

h2.left-title {
	font-weight: bold;
	text-shadow: 
		2px 2px 2px rgb(0,0,0),
		0 0 5px rgb(138,163,202),
		0 0 10px rgb(88,122,156),
		0 0 15px rgba(95,114,136,0.54),
		0 0 20px rgba(128,190,255,0.55),
		0 0 30px rgba(114,215,253,0.42),
		0 0 40px rgba(91,195,255,0.37),
		0 0 55px rgba(120,211,255,0.15),
		0 0 75px rgba(107,187,255,0.06);
}

.left-title:after {
	background-color: white;
	box-shadow: 
		0 2px 8px rgba(255,255,255,0.8), /* Exterior Shadow */
		inset 0 1px 2px rgba(182,221,255,0.3), /* Top light Line */
		inset 0 10px 10px rgba(182,221,255,0.2), /* Top Light Shadow */
		inset 0 10px 20px rgba(182,221,255,0.25); /* Sides Light Shadow */
}

hr.entry_hr {
    border: 0;
    height: 1px;
	margin: 0;
    background-image: 
		linear-gradient(90deg,
		rgba(255,255,255,0) 0%,
		rgba(109,180,255,1) 50%,
		rgba(255,255,255,0) 100%);
}

header.entry-header h3 {
	font-weight: bold;
	color: var(--url-primary-color);
	text-shadow:
		2px 2px 2px black,
		0 0 5px rgb(122, 169, 197),
		0 0 10px rgb(78, 115, 160);
}

header.entry-header h1.entry-title {
	font-weight: bold;
	color: var(--text-color);
	text-shadow: 
		2px 2px 2px rgb(0,0,0),
		0 0 5px rgb(138,163,202),
		0 0 10px rgb(88,122,156),
		0 0 15px rgba(95,114,136,0.54),
		0 0 20px rgba(128,190,255,0.55),
		0 0 30px rgba(114,215,253,0.42),
		0 0 40px rgba(91,195,255,0.37),
		0 0 55px rgba(120,211,255,0.15),
		0 0 75px rgba(107,187,255,0.06);
}

.entry-meta span.posted-on, .entry-meta span.byline, footer.entry-footer span.cat-links, .entry-content {
	text-shadow: 2px 2px 2px rgb(0, 0, 0);
}

#left-col, #left-content, #comic-nav-top, #comic-nav-bottom, #comic, #comments .card .card-header, .single-comic-navigation {
	border-radius: 10px;
	background-color: var(--primary-col-bg-color); !important;
	box-shadow: 
		0 2px 8px rgba(0,0,0,0.5), /* Exterior Shadow */
		inset 0 1px 2px rgba(182,221,255,0.3), /* Top light Line */
		inset 0 10px 10px rgba(182,221,255,0.2), /* Top Light Shadow */
		inset 0 10px 20px rgba(182,221,255,0.25), /* Sides Light Shadow */
		inset 0 -15px 30px rgba(0,0,0,0.3); /* Dark Background */
}

.post, article.page .entry-content {
	padding: 10px;
	border-radius: 10px;
	background:rgba(46,72,90,.75);
	box-shadow:0px 0px 5px #1b2125 inset;
	border: solid 1px #000;
}


#side-bar {
	border-radius: 10px;
	background-color: var(--primary-col-bg-color); !important;
	box-shadow: 
		0 2px 8px rgba(0,0,0,0.5), /* Exterior Shadow */
		inset 0 1px 2px rgba(182,221,255,0.3), /* Top light Line */
		inset 0 10px 10px rgba(182,221,255,0.2), /* Top Light Shadow */
		inset 0 10px 20px rgba(182,221,255,0.25), /* Sides Light Shadow */
		inset 0 -15px 30px rgba(0,0,0,0.3); /* Dark Background */
}

#side-bar section ul {
	background-color: rgba(0,0,0,0.5);
    border-radius: 10px;
    padding: 8px;
    margin-right: 5px;
    box-shadow: 0px 0px 10px rgb(11,13,14) inset;
    border: 1px solid black;
}

.widget-title, h2.wp-block-heading {
	font-weight: bold;
	font-size: 25px;
	text-shadow: 
		2px 2px 2px rgb(0,0,0),
		0 0 5px rgb(138,163,202),
		0 0 10px rgb(88,122,156),
		0 0 15px rgba(95,114,136,0.54),
		0 0 20px rgba(128,190,255,0.55),
		0 0 30px rgba(114,215,253,0.42),
		0 0 40px rgba(91,195,255,0.37),
		0 0 55px rgba(120,211,255,0.15),
		0 0 75px rgba(107,187,255,0.06);
}

hr.sites_hr {
    border: 0;
    height: 1px;
	margin: 0;
	margin-bottom: 6px;
    background-image: 
		linear-gradient(90deg,
		rgba(255,255,255,0) 0%,
		rgba(109,180,255,1) 50%,
		rgba(255,255,255,0) 100%);
}

.wp-block-separator {
	border: 0;
	height: 2px;
	margin-top: 0;
	margin-bottom: 0.2em;
    background-image: 
		linear-gradient(90deg,
		rgba(255,255,255,0) 0%,
		rgba(109,180,255,1) 50%,
		rgba(255,255,255,0) 100%);
}

body.page #left-content .comments-area {
	padding: 30px;
}

.comment-respond {
	background-color: rgba(0,0,0,0.5);
    border-radius: 10px;
    padding: 8px;
    margin-right: 5px;
    box-shadow: 0px 0px 10px rgb(11,13,14) inset;
    border: 1px solid black;
}

#comments .card .card-header {
	border-radius: 10px 10px 0 0;
}

.comment-content.card-text {
	background-color: rgba(0,0,0,0.5);
    border-radius: 0 0 10px 10px;
    box-shadow: 0px 0px 10px rgb(11,13,14) inset;
    border: 1px solid black;
}

.comment {
	display: block;
}

#comments .children .media .card-block {
	padding: 0;
}

#respond #cancel-comment-reply-link {
	margin-left: 6px;
}

/* Navigation */
.navbar, .navbar-expand-md .navbar-nav .dropdown-menu {
	background-color: rgba(0, 0, 0, 0) !important;
	background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
	box-shadow: 
		0 2px 8px rgba(0,0,0,0.5), /* Exterior Shadow */
		inset 0 1px 2px rgba(182,221,255,0.3), /* Top light Line */
		inset 0 10px 10px rgba(182,221,255,0.2), /* Top Light Shadow */
		inset 0 10px 20px rgba(182,221,255,0.25), /* Sides Light Shadow */
		inset 0 -15px 30px rgba(0,0,0,0.3); /* Dark Background */
}

.navbar-nav>.menu-item {
	border-radius: 0 0 10px 10px;
	background: linear-gradient(
		var(--button2-bg-color-light),
		var(--button2-bg-color-dark));
	border: 1px solid black;
	box-shadow: 
		0 2px 8px rgba(0,0,0,0.5), /* Exterior Shadow */
		inset 0 1px 2px rgba(182,221,255,0.3), /* Top light Line */
		inset 0 10px 10px rgba(182,221,255,0.2), /* Top Light Shadow */
		inset 0 -15px 30px rgba(0,0,0,0.3); /* Dark Background */
	overflow: hidden;
}

.navbar-nav>.menu-item:hover {
		background: linear-gradient(
		var(--button2-bg-color-dark),
		var(--button3-bg-color-light));
}


.navbar-light .navbar-toggler {
	border-radius: 10px;
	background: linear-gradient(
		var(--button2-bg-color-light),
		var(--button2-bg-color-dark)) !important;
	border: 1px solid black !important;
	box-shadow: 
		0 2px 8px rgba(0,0,0,0.5), /* Exterior Shadow */
		inset 0 1px 2px rgba(182,221,255,0.3), /* Top light Line */
		inset 0 10px 10px rgba(182,221,255,0.2), /* Top Light Shadow */
		inset 0 -15px 30px rgba(0,0,0,0.3); /* Dark Background */
}

.navbar-toggler:focus, .navbar-toggler:hover {
	background: linear-gradient(
		var(--button2-bg-color-dark),
		var(--button3-bg-color-light));
}

.navbar-light .navbar-nav .nav-link, a.dropdown-item, .navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
	color: var(--url-primary-color);
}

.navbar-light .navbar-nav>.active>a, .navbar-light .navbar-nav>.active>a:hover, .navbar-light .navbar-nav>.active>a:focus {
	border-bottom: 3px solid var(--url-primary-color);
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
	color: var(--url-hover-color);
}

.navbar-nav>.menu-item:before {
	background: var(--url-primary-color);
}

.navbar-light .navbar-toggler .icon-bar {
	background: var(--url-primary-color);
}

.navbar-light .navbar-toggler .icon-bar:hover {
	background: var(--url-hover-color);
}

.site-header {
	background-image: none !important;
}

/* Buttons */
.btn-group-xs, .btn-xs {
	border-radius: 6px !important;
}

.btn, .btn-danger {
	background: linear-gradient(
		var(--button-bg-color-light),
		var(--button-bg-color-dark));
	border: 1px solid black;
	color: white;
}

.btn:hover, .btn-danger:hover {
	background: linear-gradient(
		var(--button-bg-color-dark),
		var(--button-bg-color-light));
	border: 1px solid black;
	color: white;
}

.page-numbers {
	border-radius: 6px;
	background: linear-gradient(
		var(--button-bg-color-light),
		var(--button-bg-color-dark));
	border: 1px solid black;
	color: white;
}

.page-numbers:hover {
	background: linear-gradient(
		var(--button-bg-color-dark),
		var(--button-bg-color-light));
	border: 1px solid black;
	color: white;
}

.page-numbers.current {
	background: linear-gradient(
		var(--button-bg-color-light),
		var(--button-bg-color-dark));
	border: 1px solid black;
	color: var(--url-hover-color);
}

input[type="submit"], input[type="button"], input[type="reset"], button, input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover, button:hover, .btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active, .show>.btn-danger.dropdown-toggle {
	border: 1px solid black;
}

/* Text Fields */

input[type="text"], input[type="password"], input[type="number"], input[type="url"], input[type="email"], input[type="search"], input[type="tel"], textarea, .form-control, .checkout-input, select.form-control  {
	background-color: rgba(0,0,0,0.5);
	border: 1px solid black;
	color: var(--text-color-2);
	border-radius: 6px;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="search"]:focus, textarea:focus, textarea.form-control:focus, select.form-control:focus {
	background-color: rgba(0,0,0,0.5);
	border: 1px solid var(--text-color-2);
	color: var(--text-color-2);
}

input[type="text"]::placeholder {
	color: var(--text-faded-color);
}

form.form-inline button.btn.btn-danger {
	font-size: 12px;
	padding: 2px 16px;
	margin: 0;
}

/* Select */
.widget select {
	background-color: rgba(0,0,0,0.5);
	color: var(--text-color-2);
	border: 1px solid black;
	border-radius: 4px;
}

/* Background styling elements */
@keyframes move-twink-back {
	from {background-position:0 0;}
	to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
	from {background-position:0 0;}
	to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
	from {background-position:0 0;}
	to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
	from {background-position:0 0;}
	to {background-position:-10000px 5000px;}
}

.twinkling {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	width:100vw;
	height:100vh;
	display:block;
	overflow: hidden;
}

.twinkling{
	background:transparent url(./img/twinkling.png) repeat;
	z-index:-1;

	-moz-animation:move-twink-back 200s linear infinite;
	-ms-animation:move-twink-back 200s linear infinite;
	-o-animation:move-twink-back 200s linear infinite;
	-webkit-animation:move-twink-back 200s linear infinite;
	animation:move-twink-back 200s linear infinite;
}

header.entry-header {
	padding-bottom: 16px;
}

/* Footer Fix */
.footer {
	position: relative;
}

/* Scrollbars */

::-webkit-scrollbar {
	width: 14px;
	height: 14px;
}

::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background: var(--bg-light-2-color);
}

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
	background: var(--bg-light-3-color);
}

::-webkit-scrollbar-thumb:vertical {
	border-top: solid 2px rgba(35, 52, 55, 0.5);
	border-bottom: solid 2px rgba(35, 52, 55, 0.5);
}

::-webkit-scrollbar-thumb:horizontal {
	border-right: solid 2px rgba(35, 52, 55, 0.5);
	border-left: solid 2px rgba(35, 52, 55, 0.5);
}

::-webkit-scrollbar-corner {
	background: var(--bg-light-2-color);
}

::-webkit-scrollbar-track {
	background: var(--bg-dark-color);
}

/* Reese Avatar For Custom HTML Widget */

#About_Reese {
	min-height: var(--Reese-avatar-height);
	border: 1px solid black;
	border-left: 0;
	border-radius: 20px 10px 10px 20px;
	background: rgba(0,0,0,0.5);
	box-shadow: 0px 0px 10px rgb(11, 13, 14) inset;
}

#About_Reese p {
	padding: 8px;
	color: var(--text-color-3);
	text-shadow: 2px 2px 2px rgb(0, 0, 0);
}

#Avatar_Profile_BG_L {
    float: left;
	margin-right: 6px;
	margin-bottom: -6px;
	width: var(--Reese-avatar-width); /* Was 220px */
    height: var(--Reese-avatar-height); /* Was 256px */
	border-radius: 20px;
	background:rgba(15,32,53,.75);
	box-shadow:0px 0px 5px #1b2125 inset;
}

#avatar {
	width: var(--Reese-avatar-width);
	height: var(--Reese-avatar-height);
	border-radius: 20px;
}

#avatar_effects {
	width: var(--Reese-avatar-width);
	height: var(--Reese-avatar-height);
	border-radius: 20px;
}

#avatar {
	float: left;
	background-repeat: no-repeat;
	background-size: var(--Reese-avatar-width);
	box-shadow: 
		inset -6px -5px 10px rgba(0,0,0,0.75), 
        0 2px 8px rgba(0,0,0,0.5),
        inset 0 -15px 30px rgba(0,0,0,0.25);
		
}

#avatar {
    background-image: url(./img/Reese_Avatar.jpg);
}

#avatar_effects {
	position: absolute;
	/* background-color: rgba(25,38,46,0.15); */
	background-image: 
		linear-gradient(135deg,
		rgba(62,105,132,0.15) 0%,
		rgba(0,0,0,0.0) 25%,
		rgba(0,0,0,0) 100%);
		
	box-shadow: 
        0 2px 8px rgba(0,0,0,0.5),
        inset 5px 10px 10px rgba(182,221,255,0.3), 
        inset 8px 10px 20px rgba(182,221,255,0.25); 
	border: solid 1px #000;
	z-index: 2;
}

#avatar_profile_name_spacer {
    height: var(--avatar-profile-name-spacer-height); /* Was 220px */
}

#avatar_profile_name {
	position: relative;
    overflow: hidden;
	height: 35px;
	border-radius: 0 0 20px 20px;
	border-top: 1px solid black;
    /*background-image: 
		linear-gradient(0deg,
		rgba(0,0,0,0.90) 0%,
		rgba(0,0,0,0.80) 25%,
		rgba(0,0,0,0.75) 50%,
		rgba(0,0,0,0.75) 75%,
		rgba(0,0,0,0) 100%);*/
	padding-top: 2px;
	margin-top: 0px;
	

}

#avatar_profile_name h3 {
	position: absolute;
	width: var(--Reese-avatar-width);
	text-align: center;
	vertical-align: middle;
	color: white;
	font-size: 1.75em;
	text-shadow: 
		2px 2px 2px rgb(0,0,0),
		0 0 5px rgb(138,163,202),
		0 0 10px rgb(88,122,156),
		0 0 15px rgba(95,114,136,0.54),
		0 0 20px rgba(128,190,255,0.55),
		0 0 30px rgba(114,215,253,0.42),
		0 0 40px rgba(91,195,255,0.37),
		0 0 55px rgba(120,211,255,0.15),
		0 0 75px rgba(107,187,255,0.06);
	box-shadow: inset 0px -4px 6px 0px black;
	z-index: 1;
}

/* Avatar Profile Background Name Animation */

@-webkit-keyframes MOVE-BG {
	from {
		-webkit-transform: translateX(0);
	}
	to { 
		-webkit-transform: translateX(128px);
	}
}

@keyframes MOVE-BG {
	from {
		transform: translateX(0);
	}
	to { 
		transform: translateX(128px);
	}
}

#avatar_profile_name_BG {
	position: absolute;
	left: -128px;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 0;
	background-size: 64px 64px;
	background-image: 
		linear-gradient(45deg, 
		rgba(0,0,20,0.90) 25%, 
		rgba(6,18,45,0.8) 25%, 
		rgba(6,18,45,0.8) 50%, 
		rgba(0,0,20,0.90) 50%, 
		rgba(0,0,20,0.90) 75%, 
		rgba(6,18,45,0.8) 75%, 
		rgba(6,18,45,0.8));  
		
	-webkit-animation-name: MOVE-BG;
		-webkit-animation-duration: 2s;
		-webkit-animation-timing-function: linear;
		-webkit-animation-iteration-count: infinite;
	
    animation-name: MOVE-BG;
		animation-duration: 2s;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
	box-shadow: inset 0 4px 10px black;
}

/* Reese's Computer Page Lists */
#Reese_Computer_List {
	display: flex;
	width: 100%;
	margin: 6px 0;
	border-radius: 10px;
	border: 1px solid black;
	padding: 6px;
	background: var(--bg-dark-2-color);
	box-shadow: 0px 0px 5px #000 inset;
}

#Reese_Comp_List_Frame {

}

#Reese_Comp_List_Image {
	display: inline;
	width: 25%;
	float: left;
	border-radius: 10px;
}

#Reese_Comp_List_Image img {
	border-radius: 10px;
	border: 1px solid black;
	background: var(--dark-bg-color);
	box-shadow: 
		0 2px 8px rgba(0,0,0,0.5), /* Exterior Shadow */
		inset 0 1px 2px rgba(182,221,255,0.3), /* Top light Line */
		inset 0 10px 10px rgba(182,221,255,0.2), /* Top Light Shadow */
		inset 0 10px 20px rgba(182,221,255,0.25), /* Sides Light Shadow */
		inset 0 -15px 30px rgba(0,0,0,0.3); /* Dark Background */
}

#Reese_Comp_List_Content {
	display: inline;
	width: 75%;
	float: right;
	padding: 6px;
}

#Reese_Comp_List_Header h5 {
	color: var(--url-primary-color);
	text-shadow: 2px 2px 2px black, 0 0 5px rgb(122, 169, 197), 0 0 10px rgb(78, 115, 160);
}

#Reese_Comp_List_Description {

}