:root {
	--desktop-lightbulb-img: url("../assets/img/inkscape/new-bulb-off.svg");
	--hover-light: url("../assets/img/inkscape/new-bulb-on.svg");
	

	--logo-bootstrap: url("../assets/img/logos/bootstrap.svg");
	--logo-css3: url("../assets/img/logos/css3.svg");
	--logo-c--4: url("../assets/img/logos/c--4.svg");
	--logo-html5: url("../assets/img/logos/html5.svg");
  --logo-java: url("../assets/img/logos/java.svg");
  --logo-javascript: url("../assets/img/logos/javascript.svg");
	--logo-jquery: url("../assets/img/logos/jquery.svg");
  --logo-jupyter: url("../assets/img/logos/jupyter.svg");
	--logo-mariadb: url("../assets/img/logos/mariadb.svg");
  --logo-matplotlib: url("../assets/img/logos/matplotlib.svg");
  --logo-mongodb: url("../assets/img/logos/mongodb-icon.svg");
	--logo-nodejs: url("../assets/img/logos/nodejs.svg");
	--logo-numpy: url("../assets/img/logos/numpy.svg");
	--logo-php-icon: url("../assets/img/logos/php-icon.svg");
	--logo-pandas: url("../assets/img/logos/pandas.svg");
  --logo-python: url("../assets/img/logos/python.svg");
	--logo-react: url("../assets/img/logos/react.svg");
  --logo-scikit-learn: url("../assets/img/logos/scikit-learn.svg");
  --logo-semantic-ui: url("../assets/img/logos/semantic-ui.svg");
  --logo-sql-database-generic: url("../assets/img/logos/sql-database-generic.svg");
  --logo-vuejs: url("../assets/img/logos/vue-js.svg");

  --icon-colours: invert(0%);

  --img-border: #bd5d38;

  --mobile-icon-rotate: rotate(0deg);

	transition: filter 1s;
	
}

/*
--top-light: url("../assets/img/inkscape/hanging-bg-bulb-off.svg");
	--top-chnd: url("../assets/img/inkscape/hanging-bg-chnd-off.svg");
  
  --top-bulb: url("../assets/img/inkscape/top-bulb-off.svg");
  */

.pointer {
  cursor: pointer;
}

#mobile-dark-switch {
  color: black;
  filter: invert(82%) sepia(8%) saturate(1133%) hue-rotate(329deg) brightness(94%) contrast(88%);
  font-size: 1.5rem;
  vertical-align: ce;
  vertical-align: middle;
  padding-right: 1rem;
}

@media (min-width: 992px) {
  #mobile-dark-switch {
    display: none;
  }
}

#mobile-switch-icon {
  transform: var(--mobile-icon-rotate);
  transition: transform 1s;
}

.container {
  padding: 0;
}

#first-name-last-name {
	background: white;
	width: fit-content;
}


.fs-word {
	display: flex;
	flex-wrap: nowrap
}

.letters {
	display: flex;
	flex-wrap: wrap;	
	cursor: default;
}

.text-wrapper {
  color: #343a40;
}

/*over-ride start-bootstrap > styles.css line 7384*/
.mb-5 { 
    margin-bottom: 0rem !important;
}


.ml11 {
  font-weight: 700;
  /* font-size: 3.5em; */
  color: white;
}

.ml11 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.1em;
  padding-right: 0.05em;
  padding-bottom: 0.15em;
}

.ml11 .line {
  opacity: 0;
  position: absolute;
  left: 0;
  height: 100%;
  width: 3px;
  background-color: rgb(24, 23, 23);
  transform-origin: 0 50%;
}

.ml11 .line1 { 
  top: 0; 
  left: 0;
}

.ml11 .letter {
  display: inline-block;
  line-height: 1em;
  background: white;
}

/*download cv*/

.download-cv-section {
  display: flex;
  /* position: fixed; */
  /* bottom: 3vh; */
  width: 100%;
  /* flex-direction: row-reverse; */
  align-items: center;
  padding-left: 1rem;
  padding-top: 1rem;
}

.cv-icon {
  /* height: calc(1.5rem + 5.7vw); */
  /* width: calc(1.5rem + 5.7vw) !important; */
  display: inline-block;
  background-color: white;
  padding: 0.3rem;
  /* border-radius: 20%; */
}

/*tech icons */


.icon {
	height: calc(1.25rem + 5.7vw);
	width: calc(1.25rem + 5.7vw);
	display: inline-block;
}

.dev-icons {
  font-size: 1rem;
}

.tech-icon {
	height: calc(1.5rem + 5.7vw);
	width: calc(1.5rem + 5.7vw) !important;
	display: inline-block;
	background-size: 80% 80%;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 10%;
	/*  transition: background-image 1s; */
	transition: filter 1s;
	filter: var(--icon-colours);
	background-color: white;
	/* padding: -0.8000000000000007rem; */
}

.icon-bootstrap {	background-image: var(--logo-bootstrap) }
.icon-css3 { background-image: var(--logo-css3) }
.icon-c--4 { background-image: var(--logo-c--4) }
.icon-html5 {	background-image: var(--logo-html5) }
.icon-java { background-image: var(--logo-java) }
.icon-javascript { background-image: var(--logo-javascript) }
.icon-jquery { background-image: var(--logo-jquery) }
.icon-jupyter { background-image: var(--logo-jupyter) }
.icon-mariadb {	background-image: var(--logo-mariadb) }
.icon-matplotlib {	background-image: var(--logo-matplotlib) }
.icon-mongodb {	background-image: var(--logo-mongodb) }
.icon-nodejs {	background-image: var(--logo-nodejs) }
.icon-numpy {	background-image: var(--logo-numpy) }
.icon-php-icon {	background-image: var(--logo-php-icon) }
.icon-pandas {	background-image: var(--logo-pandas) }
.icon-python {	background-image: var(--logo-python) }
.icon-react {	background-image: var(--logo-react) }
.icon-semantic-ui {	background-image: var(--logo-semantic-ui) }
.icon-scikit-learn {	background-image: var(--logo-scikit-learn) }
.icon-sql-database-generic {	background-image: var(--logo-sql-database-generic) }
.icon-vuejs {	background-image: var(--logo-vuejs) }


.framework-link {
  text-decoration: none;
}

.framework-text {
  padding: 0 0.5rem;
}

.cert-image {
	height: calc(2rem + 5.7vw);
	width: calc(2rem + 5.7vw);
	margin-right: 1rem;
  filter: var(--icon-colours);
  background-size: 80% 80%;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 10%;
	/*  transition: background-image 1s; */
	transition: filter 1s;
	background-color: white;
}

.cert-item {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
  margin-bottom: 1rem;
}

.framework-icon {
  display: inline-flex;
  align-items: center;
}
/* lightbox */

.gallery, .gallery2 {
  margin-bottom: 1rem;
}

.container .gallery a img {
  float: left;
  width: 25%;
  height: auto;
  border: 2px solid;
  border-color: var(--img-border);
  -webkit-transition: -webkit-transform .15s ease;
  -moz-transition: -moz-transform .15s ease;
  -o-transition: -o-transform .15s ease;
  -ms-transition: -ms-transform .15s ease;
  transition: transform .15s ease;
  position: relative;
  filter: var(--icon-colours);
  border-radius: 8px;
  margin-right: 0.5rem;
}

.container .gallery2 a img {
  float: left;
  width: 25%;
  height: auto;
  border: 2px solid;
  border-color: var(--img-border);
  -webkit-transition: -webkit-transform .15s ease;
  -moz-transition: -moz-transform .15s ease;
  -o-transition: -o-transform .15s ease;
  -ms-transition: -ms-transform .15s ease;
  transition: transform .15s ease;
  position: relative;
  filter: var(--icon-colours);
  border-radius: 8px;
  margin-right: 0.5rem;
}

.sl-image {
  filter: var(--icon-colours);
}

.clear {
  clear: both;
}

/*contact*/


.contact .php-email-form button[type=submit] {

background: #bd5d38;
}

/* light switch */

#desktop-light:hover {
	transition: background-image .5s;
	background-image: var(--hover-light);
}	

#desktop-light {
  height: 8rem;
  width: 10rem;
  cursor: pointer;
  background-size: 120px;
  background-repeat: no-repeat;
  background-image: var(--desktop-lightbulb-img);
  transition: background-image 1s;
  background-clip: content-box;
  background-position: center;
  filter: invert(82%) sepia(8%) saturate(1133%) hue-rotate(329deg) brightness(94%) contrast(88%);
}


/*DARK THEME 
  --top-bulb: url("../assets/img/inkscape/top-bulb-on.svg");
  --top-light: url("../assets/img/inkscape/hanging-bg-bulb-on.svg");
	--hover-light: url("../assets/img/inkscape/new-bulb-on.svg");
  */

[data-theme="dark"] {

  filter: invert(100%);
	--desktop-lightbulb-img: url("../assets/img/inkscape/new-bulb-on.svg");
  --icon-colours: invert(100%); 
  --mobile-icon-rotate: rotate(180deg);
  --img-border: #42a2c7;

}

/*preloader */

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #fff;
  }

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #f2f2f2;
  border-top: 6px solid #56829e ;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;

}
@-webkit-keyframes animate-preloader {
  0% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }
  100% {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  }
}

@keyframes animate-preloader {
  0% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }
  100% {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  }
}