body {
  background-color: #262831;
}

* {
  font-family: 'Roboto Mono', monospace;
  color: #a6a9bc;
}
.alternative {
  font-family: 'Lato', sans-serif;
}
/* 
.card .card-body * {
  color: #eeeeee;
} */

.card {
  background-color: rgba(0, 0, 0, 0);
  border: none;
}

.card-black {
  background-color: #5c5e67;
}

.sender-button {
  background-color: rgba(49, 52, 64, 0.5);
  border-radius: 5px;
  border: none;
  outline: none;
  cursor: pointer;
  margin-top: 22px;
}

.sender-button-no-margin {
  background-color: rgba(49, 52, 64, 0.5);
  border-radius: 5px;
  border: none;
  outline: none;
  cursor: pointer;
}

.shadow-yellow {
  box-shadow: -3px 3px #f72585;
}

.shadow-blue {
  box-shadow: -3px 3px #b5179e;
}

.shadow-red {
  box-shadow: -3px 3px #7209b7;
}

.shadow-yellow:hover {
  box-shadow: -2px 2px #3f37c9;
}
.shadow-blue:hover {
  box-shadow: -2px 2px #4361ee;
}
.shadow-red:hover {
  box-shadow: -2px 2px #4cc9f0;
}

.shadow-yellow:active,
.shadow-blue:active,
.shadow-red:active {
  transform: translate(-3px, 3px);
  box-shadow: none !important;
}

.sender-button:hover {
  transform: translate(-1px, 1px);
}
.pink {
  color: #f72585;
}

.purple {
  color: #b5179e;
}

.purple-clarito {
  color: #9b5de5;
}

.blue-bebe {
  color: #4cc9f0;
}

.verde-mela-muerde {
  color: #00f5d4;
}

.lila {
  color: #f15bb5;
}

.yelou {
  color: #fee440;
}

.wrapper {
  display: flex;
  width: 100%;
  align-items: stretch;
}

.normal {
  font-weight: 200;
  font-size: 1.2rem;
}

#sidebar {
  position: sticky;
  height: 100vh;
  min-width: 250px;
  max-width: 250px;
  z-index: 10;
  top: 0;
  left: 0;
  background-color: #313440;
  overflow-x: hidden;
  padding-top: 33px;
}

#sidebar a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 18px;
  color: #a6a9bc;
  display: block;
}

#sidebar ul li hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 10px;
  padding-right: 10px;
  border: 0;
  border-top: 1px solid #a6a9bc;
}

#sidebar a#resume:hover {
  color: #d35b3f;
}

#sidebar a#projects:hover {
  color: #65e8e3;
}

#sidebar a#contact:hover {
  color: #fcdd4b;
}

#content {
  padding: 20px;
  width: 100%;
}

hr.comment {
  height: 2px;
  background-image: linear-gradient(
    90deg,
    #313440,
    #313440 75%,
    transparent 75%,
    transparent 100%
  );
  background-size: 20px 1px;
  border: none;
  margin: 40px 20px 30px 20px;
}
hr.comment::before {
  padding-right: 5px;
  font-size: 20px;
  content: '/*';
  display: inline-block;
  transform: translate(-50%, -50%) rotate(0);
  transform-origin: 50% 50%;
  background-color: #262831;
  position: absolute;
  color: #313440;
}

button {
  box-shadow: -3px 3px #999bab;
  border-radius: 5px;
  padding: 8px 20px;
  border: none;
  outline: none;
  color: #ffffff;
  display: inline-block;
  text-align: center;
  margin: 10px;
  cursor: pointer;
}

button:hover {
  box-shadow: -2px 2px #999bab;
  transform: translate(-1px, 1px);
}

button:active {
  box-shadow: none !important;
  transform: translate(-2px, 2px);
}

.submit-contact {
  background: #65e8e3;
}

.whatsapp-button {
  background: #a9f98f;
}

hr.comment::after {
  font-size: 20px;
  padding-left: 5px;
  content: '*/';
  display: inline-block;
  margin-left: 100%;
  transform: translate(-50%, -50%) rotate(0);
  transform-origin: 50% 50%;
  background-color: #262831;
  color: #313440;
}

.colorsPalette {
  color: #f5d67b;
  color: #405659;
  color: #72e0d1;
  color: #ee883b;
  color: #be84ff;
  color: #d44f4a;
  color: #63b660;
  color: #4aa8a4;
  color: #f6aa0e;
  color: #eeeeee;
  color: #5c5e67;
}

.babelColors {
  color: #1b2b34;
  color: #cdd3de;
  color: #65737e;
  color: #c594c5;
  color: #fac85f;
  color: #5fb3b3;
  color: #99c794;
  color: #eb606b;
  color: #f99157;
  color: #6699cc;
}

.atomColors {
  color: #a6a9bc;
  color: #313440;
  color: #262831;
  color: #e3c18a;
  color: #fedd5c;
  color: #f8be53;
  color: #71cfc7;
  color: #79f6fe;
  color: #81c7fe;
  color: #5190f2;
  color: #3856a8;
  color: #8d6ee3;
  color: #da8ff3;
  color: #d47db8;
  color: #fe8a77;
  color: #f96e58;
  color: #fd7b64;
  color: #de6350;
  color: #ad6e71;
  color: #7e373b;
  color: #a9f98f;
  color: #97cb70;
  color: #498d79;
}

.st0 {
  display: none;
}
.st1 {
  display: inline;
}

.vertical-item {
  padding-left: 15px;
  padding-right: 15px;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  border-radius: 0px 0px 0px 0px;
  border-left: 1px white solid;
  height: 100%;
}

svg {
  transition: fill 2s ease;
  -webkit-transition: fill 2s ease;
}

.row {
  margin-top: 10px;
  margin-bottom: 10px;
}

.card-container {
  padding: 10px 0 10px 0;
}

.container {
  width: 100%;
}

.colorsPalette {
  color: #eeeeee;
  color: #cdd3de;
  color: #a6a9bc;
  color: #65737e;
  color: #5c5e67;
  color: #405659;
  color: #313440;
  color: #262831;
  color: #1b2b34;

  color: #79f6fe;
  color: #72e0d1;
  color: #71cfc7;
  color: #5fb3b3;
  color: #4aa8a4;
  color: #81c7fe;
  color: #6699cc;
  color: #5190f2;
  color: #3856a8;
  color: #8d6ee3;
  color: #be84ff;
  color: #da8ff3;
  color: #d47db8;
  color: #c594c5;

  color: #e3c18a;
  color: #f5d67b;
  color: #fac85f;
  color: #fedd5c;
  color: #f8be53;
  color: #f6aa0e;
  color: #f99157;
  color: #ee883b;

  color: #99c794;
  color: #a9f98f;
  color: #97cb70;
  color: #63b660;
  color: #498d79;

  color: #d44f4a;
  color: #fe8a77;
  color: #f96e58;
  color: #fd7b64;
  color: #de6350;
  color: #eb606b;
  color: #ad6e71;
  color: #7e373b;
}

#graph {
  z-index: 1000;
}

.node-label {
  -webkit-box-shadow: 68px 0px 23px -6px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 68px 0px 23px -6px rgba(0, 0, 0, 0.75);
  box-shadow: 68px 0px 23px -6px rgba(0, 0, 0, 0.75);
}

/* sidebar css taken from bootstrapious */

#sidebar {
  transition: all 0.5s scale-up-center;
}

/* Shrinking the sidebar from 250px to 80px and center aligining its content*/
#sidebar.active {
  min-width: 100px;
  max-width: 100px;
  text-align: center;
}

/* Toggling the sidebar header content, hide the big heading [h3] and showing the small heading [strong] and vice versa*/
#sidebar .sidebar-header {
  text-align: center;
}

#sidebar .sidebar-header strong {
  display: none;
}
#sidebar.active .sidebar-header h3 {
  display: none;
}

#sidebar.active * span {
  display: none;
}
#sidebar.active .sidebar-header strong {
  display: block;
}

#sidebar ul li a {
  text-align: left;
}

#sidebar.active ul li a {
  padding: 20px 10px;
  text-align: center;
  font-size: 0.85em;
}

#sidebar.active ul li a i {
  margin-right: 0;
  display: block;
  font-size: 1.8em;
  margin-bottom: 5px;
}

/* Same dropdown links padding*/
#sidebar.active ul ul a {
  padding: 10px !important;
}

/* Changing the arrow position to bottom center position, 
 translateX(50%) works with right: 50% 
 to accurately  center the arrow */
#sidebar.active .dropdown-toggle::after {
  top: auto;
  bottom: 10px;
  right: 50%;
  -webkit-transform: translateX(50%);
  -ms-transform: translateX(50%);
  transform: translateX(50%);
}

/* taken from bootsnipp.com and adapted */

.send-button {
  background: #54c7c3;
  width: 100%;
  font-weight: 600;
  color: #fff;
  padding: 8px 25px;
}

*:focus {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

textarea:focus,
input[type='text']:focus,
input[type='email']:focus,
input[type='number']:focus {
  color: #eeeeee;
  cursor: text;
  padding: 8px 10px;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  border-radius: 0px 0px 0px 0px;
  -moz-border-radius: 0px 0px 0px 0px;
  -webkit-border-radius: 0px 0px 0px 0px;
  border-bottom: 1px solid #eeeeee;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
input[type='text']:valid,
input[type='email']:valid,
input[type='number']:valid {
  color: #eeeeee;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.g-button {
  color: #fff !important;
  border: 1px solid #ea4335;
  background: #ea4335 !important;
  width: 100%;
  font-weight: 600;
  color: #fff;
  padding: 8px 25px;
}
.my-input {
  cursor: text;
  padding: 8px 10px;
  transition: border 0.1s linear;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  border-radius: 0px 0px 0px 0px;
  -moz-border-radius: 0px 0px 0px 0px;
  -webkit-border-radius: 0px 0px 0px 0px;
  border-bottom: 1px solid #eeeeee;
}

.header-title {
  margin: 5rem 0;
}
.login-or {
  position: relative;
  color: #aaa;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.span-or {
  display: block;
  position: absolute;
  left: 50%;
  top: -2px;
  margin-left: -25px;
  width: 50px;
  text-align: center;
}
.hr-or {
  height: 1px;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}