:root {
  --bgColor: #f3fbff;
  --lnkColor: dodgerblue;
  --lnkHoverColor: #17a2b8;
  --bgBarColor: #343a40;
}

html {
  scroll-behavior: smooth;
  padding: 0;
  margin: 0;
}

body {
  background: var(--bgColor);
  height: 100vh;
}

body * {
  transition: .3s ease-out;
}

:any-link {
  color: var(--lnkColor);
}

:any-link:hover,
:any-link:focus {
  color: var(--lnkHoverColor) !important;
  text-decoration: none !important;
}

button,
a,
button:focus,
a:focus,
button:active,
a:active,
button:visited,
a:visited,
button:link,
a:link,
button:target,
a:target {
  border: none !important;
  box-shadow: none !important;
}

#Header ul a:hover {
  color: #fff !important;
}

#Header .get_cv,
#Header .get_cv:hover,
#Header .get_cv:focus {
  border: none;
}

#bg-img {
  background: url("../img/bg-laptop.jpeg") no-repeat fixed center;
  background-size: cover;
  height: 100vmin;
}

#About {
  margin-top: -20vmax;
  width: 100% !important;
}

#About .vertical-line {
  border-left: 2px solid darkgray;
}

.svg-inline--fa {
  color: #fff !important;
  margin: 0 5% !important;
}

a.socicon:hover,
a.socicon:focus,
.navbar-brand h3:hover,
.navbar-brand h3:focus,
#backToTop a:hover,
#backToTop a:focus,
.svg-inline--fa:hover,
.svg-inline--fa:focus {
  color: #61dafb !important;
  transition: none !important;
}


#About #AboutMe span,
#Skills span,
#Projects span,
#Contact span {
  padding: 10px 20px;
  border-radius: 5px 5px 0 0;
}

#About #AboutMe hr,
#Skills hr,
#Projects hr,
#Contact hr {
  border-width: 3px;
  margin-top: 6px;
}

#About #AboutMe .backing {
  background-color: var(--bgColor);
  padding: 1rem;
}

#progress-html .progress-bar {
  width: 95%;
}

#progress-css .progress-bar {
  width: 95%;
}

#progress-js .progress-bar {
  width: 70%;
}

#progress-jquery .progress-bar {
  width: 45%;
}

#progress-react .progress-bar {
  width: 30%;
}

#progress-vue .progress-bar {
  width: 10%;
}

#progress-node .progress-bar {
  width: 10%;
}

#progress-sass-less-scss .progress-bar {
  width: 70%;
}

#progress-flex-grid .progress-bar {
  width: 70%;
}

#progress-git .progress-bar {
  width: 60%;
}

#Skills h3 {
  margin-top: 6px;
  margin-bottom: -3px;
  font-size: 1.3rem;
}

#Projects img {
  width: 200px;
  height: 80px;
}

#Projects .card {
  border-top: 3px solid #1e90ff;
}

#Projects .card:hover {
  -webkit-box-shadow: -2px 1px 20px -2px rgba(133,133,133,0.61);
  -moz-box-shadow: -2px 1px 20px -2px rgba(133,133,133,0.61);
  box-shadow: -2px 1px 20px -2px rgba(133,133,133,0.61);
}

#Projects .card svg,
#About svg {
  transition: none !important;
}

#Projects .card svg:hover,
#Projects .card i:hover,
#Projects .card a:hover {
  color: var(--lnkHoverColor) !important;
}

#Projects h3:before,
#Projects h3:after {
  content: '-';
}

#Experience span {
  border-radius: 3px !important;
  padding: 5px;
}

#experienced:target {
  transition: background-color 4s ease-in-out;;
  background-color: #61dafb !important;
}

.dropdown-menu {
  min-width: initial;
}

.dropdown-menu .dropdown-item {
  padding: 0 .8rem;
}

.dropdown-menu a:hover,
a.dropdown-item:hover {
  color: var(--lnkHoverColor) !important;
}

.contacts_area_link:hover {
  color: var(--bgColor) !important;
}

/* begin begin Back to Top button  */
.back_to_top {
  position: fixed;
  top: 3em;
  left: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  text-align: center;
  background-color: rgba(30, 144, 255, .3);
  color: #fff;
  cursor: pointer;
  border-radius: .3rem;
  z-index: -1;
  transform: scale(.8);
}

.back_to_top:hover {
  background-color: var(--lnkHoverColor);
  transform: scale(1);
}