@import url("https://fonts.googleapis.com/css?family=Poppins");
body {
  font-family: "Poppins", sans-serif;
}

.badge {
  font-weight: 500;
}

#container {
  display: inline-block;
  position: relative;
  width: 100%;
}

#dummy {
  padding-top: 100%; /* 1:1 aspect ratio */
}

#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.circle-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: 0px -40px;
}

.social {
  text-decoration: none !important;
}

.link-after, .nav-item.active::after, .nav-link::after, .navbar-brand::after {
  content: "";
  display: block;
  height: 0.15em;
  background: #007bff;
}

.nav-link::after, .navbar-brand::after {
  width: 0;
  transition: width 0.35s;
}
.nav-link:hover::after, .navbar-brand:hover::after {
  width: 100%;
}
.nav-link, .navbar-brand {
  text-align: right;
}

.nav-item.active {
  font-weight: bold;
}
.nav-item.active::after {
  width: 100% !important;
}

.navbar-brand {
  margin-bottom: -14px;
}
.navbar-brand::after {
  margin-top: -0.25em;
}

.project.card {
  border-radius: 15px;
  text-decoration: none !important;
  margin: 10px auto;
}
.project.card .card-img-top {
  border-radius: 15px 15px 0 0;
}
.project.card:hover:not(.article) {
  box-shadow: -2px 8px 40px -12px rgba(0, 0, 0, 0.24);
}

.search-box {
  box-shadow: none !important;
}

.article.card {
  border-radius: 15px;
  text-decoration: none !important;
  padding: 15px;
  height: 100%;
}
.article.card .card-footer {
  font-size: 14px;
  margin: 0 -15px -15px -15px;
  padding: 15px 35px;
}

.article .article-metadata {
  font-size: 14px;
  margin-top: -6px;
}
.article .tag:hover {
  background-color: #007bff;
  color: white !important;
}
.article footer {
  font-size: 10px;
  color: #6c757d;
  text-decoration: underline;
  text-decoration-color: yellow;
  text-align: right;
  margin-top: 4em;
  margin-right: 2em;
}
.article h1, .article h2 {
  margin-top: 32px;
}
.article hr {
  background: #6c757d;
}
.article img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1rem auto;
}
.article .video {
  position: relative;
  padding-bottom: 56.25%;
  margin-bottom: 1rem;
  width: 100%;
}
.article .video iframe {
  position: absolute;
  height: 100%;
  width: 100%;
}
.article a:not(.btn):not([class^=carousel-]):not([class^=list-]):not(.no-underline) {
  display: inline-block;
  text-decoration: none;
}
.article a:not(.btn):not([class^=carousel-]):not([class^=list-]):not(.no-underline):hover {
  color: #007bff;
}
.article a:not(.btn):not([class^=carousel-]):not([class^=list-]):not(.no-underline)::after {
  content: "";
  display: block;
  height: 0.15em;
  margin-top: -0.15em;
  width: 0;
  background: #007bff;
  transition: width 0.35s;
}
.article a:not(.btn):not([class^=carousel-]):not([class^=list-]):not(.no-underline):hover::after {
  width: 100%;
}
.article pre {
  background: #f8f9fa;
  border: 1px solid #ddd;
  color: #343a40;
  font-family: monospace;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 1.6em;
  max-width: 100%;
  padding: 1em 1.5em;
  display: block;
  page-break-inside: avoid;
  overflow: auto;
  word-wrap: break-word;
}
.article code.highlighter-rouge {
  background-color: #f8f9fa;
  color: #343a40;
  border-radius: 3px;
  margin: 0;
  padding: 0.2em 0.65em;
}
.article blockquote {
  border-left: 0.25em solid #007bff;
  color: #6c757d;
  padding: 0 1em;
}
.article table {
  display: block;
  overflow-x: auto;
  margin: 1rem 0;
}
.article table td, .article table th {
  border: 1px solid #ddd;
  padding: 8px 16px;
}
.article table th {
  padding-top: 12px;
  padding-bottom: 12px;
  font-weight: 500;
  text-align: left;
  background-color: #007bff;
  color: white;
}
.article table tr:nth-child(even) {
  background-color: #f8f9fa;
}

.highlight .c {
  color: #aaaaaa;
  font-style: italic;
} /* Comment */
.highlight .err {
  color: #FF0000;
} /* Error */
.highlight .k {
  color: #0000aa;
} /* Keyword */
.highlight .ch {
  color: #aaaaaa;
  font-style: italic;
} /* Comment.Hashbang */
.highlight .cm {
  color: #aaaaaa;
  font-style: italic;
} /* Comment.Multiline */
.highlight .cp {
  color: #4c8317;
} /* Comment.Preproc */
.highlight .cpf {
  color: #aaaaaa;
  font-style: italic;
} /* Comment.PreprocFile */
.highlight .c1 {
  color: #aaaaaa;
  font-style: italic;
} /* Comment.Single */
.highlight .cs {
  color: #0000aa;
  font-style: italic;
} /* Comment.Special */
.highlight .gd {
  color: #aa0000;
} /* Generic.Deleted */
.highlight .ge {
  font-style: italic;
} /* Generic.Emph */
.highlight .gr {
  color: #aa0000;
} /* Generic.Error */
.highlight .gh {
  color: #000080;
  font-weight: bold;
} /* Generic.Heading */
.highlight .gi {
  color: #00aa00;
} /* Generic.Inserted */
.highlight .go {
  color: #888888;
} /* Generic.Output */
.highlight .gp {
  color: #555555;
} /* Generic.Prompt */
.highlight .gs {
  font-weight: bold;
} /* Generic.Strong */
.highlight .gu {
  color: #800080;
  font-weight: bold;
} /* Generic.Subheading */
.highlight .gt {
  color: #aa0000;
} /* Generic.Traceback */
.highlight .kc {
  color: #0000aa;
} /* Keyword.Constant */
.highlight .kd {
  color: #0000aa;
} /* Keyword.Declaration */
.highlight .kn {
  color: #0000aa;
} /* Keyword.Namespace */
.highlight .kp {
  color: #0000aa;
} /* Keyword.Pseudo */
.highlight .kr {
  color: #0000aa;
} /* Keyword.Reserved */
.highlight .kt {
  color: #00aaaa;
} /* Keyword.Type */
.highlight .m {
  color: #009999;
} /* Literal.Number */
.highlight .s {
  color: #aa5500;
} /* Literal.String */
.highlight .na {
  color: #1e90ff;
} /* Name.Attribute */
.highlight .nb {
  color: #00aaaa;
} /* Name.Builtin */
.highlight .nc {
  color: #00aa00;
} /* Name.Class */
.highlight .no {
  color: #aa0000;
} /* Name.Constant */
.highlight .nd {
  color: #888888;
} /* Name.Decorator */
.highlight .ni {
  color: #880000;
  font-weight: bold;
} /* Name.Entity */
.highlight .nf {
  color: #00aa00;
} /* Name.Function */
.highlight .nn {
  color: #00aaaa;
} /* Name.Namespace */
.highlight .nt {
  color: #1e90ff;
  font-weight: bold;
} /* Name.Tag */
.highlight .nv {
  color: #aa0000;
} /* Name.Variable */
.highlight .ow {
  color: #0000aa;
} /* Operator.Word */
.highlight .w {
  color: #bbbbbb;
} /* Text.Whitespace */
.highlight .mb {
  color: #009999;
} /* Literal.Number.Bin */
.highlight .mf {
  color: #009999;
} /* Literal.Number.Float */
.highlight .mh {
  color: #009999;
} /* Literal.Number.Hex */
.highlight .mi {
  color: #009999;
} /* Literal.Number.Integer */
.highlight .mo {
  color: #009999;
} /* Literal.Number.Oct */
.highlight .sa {
  color: #aa5500;
} /* Literal.String.Affix */
.highlight .sb {
  color: #aa5500;
} /* Literal.String.Backtick */
.highlight .sc {
  color: #aa5500;
} /* Literal.String.Char */
.highlight .dl {
  color: #aa5500;
} /* Literal.String.Delimiter */
.highlight .sd {
  color: #aa5500;
} /* Literal.String.Doc */
.highlight .s2 {
  color: #aa5500;
} /* Literal.String.Double */
.highlight .se {
  color: #aa5500;
} /* Literal.String.Escape */
.highlight .sh {
  color: #aa5500;
} /* Literal.String.Heredoc */
.highlight .si {
  color: #aa5500;
} /* Literal.String.Interpol */
.highlight .sx {
  color: #aa5500;
} /* Literal.String.Other */
.highlight .sr {
  color: #009999;
} /* Literal.String.Regex */
.highlight .s1 {
  color: #aa5500;
} /* Literal.String.Single */
.highlight .ss {
  color: #0000aa;
} /* Literal.String.Symbol */
.highlight .bp {
  color: #00aaaa;
} /* Name.Builtin.Pseudo */
.highlight .fm {
  color: #00aa00;
} /* Name.Function.Magic */
.highlight .vc {
  color: #aa0000;
} /* Name.Variable.Class */
.highlight .vg {
  color: #aa0000;
} /* Name.Variable.Global */
.highlight .vi {
  color: #aa0000;
} /* Name.Variable.Instance */
.highlight .vm {
  color: #aa0000;
} /* Name.Variable.Magic */
.highlight .il {
  color: #009999;
} /* Literal.Number.Integer.Long */
.skill {
  margin-bottom: 35px;
  position: relative;
  overflow: hidden;
}
.skill > p {
  margin: 0;
  font-size: 18px;
}
.skill:before {
  width: 100%;
  height: 5px;
  content: "";
  display: block;
  position: absolute;
  background: #f8f9fa;
  bottom: 0;
}

.skill-bar {
  width: 100%;
  height: 5px;
  background: #007bff;
  display: block;
  position: relative;
}
.skill-bar span {
  position: absolute;
  border-top: 5px solid inherit;
  top: -30px;
  padding: 0;
  font-size: 18px;
  padding: 3px 0;
  font-weight: 500;
  right: 0;
}

.skill-bar.skill-bar-secondary {
  background: #6c757d;
}

.skill-bar.skill-bar-success {
  background: #28a745;
}

.skill-bar.skill-bar-info {
  background: #17a2b8;
}

.skill-bar.skill-bar-warning {
  background: #ffc107;
}

.skill-bar.skill-bar-danger {
  background: #dc3545;
}

.skill-bar.skill-bar-light {
  background: #f8f9fa;
}

.skill-bar.skill-bar-dark {
  background: #343a40;
}

.skill-0 {
  width: 0;
}

.skill-1 {
  width: 0.01;
}

.skill-2 {
  width: 0.02;
}

.skill-3 {
  width: 0.03;
}

.skill-4 {
  width: 0.04;
}

.skill-5 {
  width: 0.05;
}

.skill-6 {
  width: 0.06;
}

.skill-7 {
  width: 0.07;
}

.skill-8 {
  width: 0.08;
}

.skill-9 {
  width: 0.09;
}

.skill-10 {
  width: 0.1;
}

.skill-11 {
  width: 0.11;
}

.skill-12 {
  width: 0.12;
}

.skill-13 {
  width: 0.13;
}

.skill-14 {
  width: 0.14;
}

.skill-15 {
  width: 0.15;
}

.skill-16 {
  width: 0.16;
}

.skill-17 {
  width: 0.17;
}

.skill-18 {
  width: 0.18;
}

.skill-19 {
  width: 0.19;
}

.skill-20 {
  width: 0.2;
}

.skill-21 {
  width: 0.21;
}

.skill-22 {
  width: 0.22;
}

.skill-23 {
  width: 0.23;
}

.skill-24 {
  width: 0.24;
}

.skill-25 {
  width: 0.25;
}

.skill-26 {
  width: 0.26;
}

.skill-27 {
  width: 0.27;
}

.skill-28 {
  width: 0.28;
}

.skill-29 {
  width: 0.29;
}

.skill-30 {
  width: 0.3;
}

.skill-31 {
  width: 0.31;
}

.skill-32 {
  width: 0.32;
}

.skill-33 {
  width: 0.33;
}

.skill-34 {
  width: 0.34;
}

.skill-35 {
  width: 0.35;
}

.skill-36 {
  width: 0.36;
}

.skill-37 {
  width: 0.37;
}

.skill-38 {
  width: 0.38;
}

.skill-39 {
  width: 0.39;
}

.skill-40 {
  width: 0.4;
}

.skill-41 {
  width: 0.41;
}

.skill-42 {
  width: 0.42;
}

.skill-43 {
  width: 0.43;
}

.skill-44 {
  width: 0.44;
}

.skill-45 {
  width: 0.45;
}

.skill-46 {
  width: 0.46;
}

.skill-47 {
  width: 0.47;
}

.skill-48 {
  width: 0.48;
}

.skill-49 {
  width: 0.49;
}

.skill-50 {
  width: 0.5;
}

.skill-51 {
  width: 0.51;
}

.skill-52 {
  width: 0.52;
}

.skill-53 {
  width: 0.53;
}

.skill-54 {
  width: 0.54;
}

.skill-55 {
  width: 0.55;
}

.skill-56 {
  width: 0.56;
}

.skill-57 {
  width: 0.57;
}

.skill-58 {
  width: 0.58;
}

.skill-59 {
  width: 0.59;
}

.skill-60 {
  width: 0.6;
}

.skill-61 {
  width: 0.61;
}

.skill-62 {
  width: 0.62;
}

.skill-63 {
  width: 0.63;
}

.skill-64 {
  width: 0.64;
}

.skill-65 {
  width: 0.65;
}

.skill-66 {
  width: 0.66;
}

.skill-67 {
  width: 0.67;
}

.skill-68 {
  width: 0.68;
}

.skill-69 {
  width: 0.69;
}

.skill-70 {
  width: 0.7;
}

.skill-71 {
  width: 0.71;
}

.skill-72 {
  width: 0.72;
}

.skill-73 {
  width: 0.73;
}

.skill-74 {
  width: 0.74;
}

.skill-75 {
  width: 0.75;
}

.skill-76 {
  width: 0.76;
}

.skill-77 {
  width: 0.77;
}

.skill-78 {
  width: 0.78;
}

.skill-79 {
  width: 0.79;
}

.skill-80 {
  width: 0.8;
}

.skill-81 {
  width: 0.81;
}

.skill-82 {
  width: 0.82;
}

.skill-83 {
  width: 0.83;
}

.skill-84 {
  width: 0.84;
}

.skill-85 {
  width: 0.85;
}

.skill-86 {
  width: 0.86;
}

.skill-87 {
  width: 0.87;
}

.skill-88 {
  width: 0.88;
}

.skill-89 {
  width: 0.89;
}

.skill-90 {
  width: 0.9;
}

.skill-91 {
  width: 0.91;
}

.skill-92 {
  width: 0.92;
}

.skill-93 {
  width: 0.93;
}

.skill-94 {
  width: 0.94;
}

.skill-95 {
  width: 0.95;
}

.skill-96 {
  width: 0.96;
}

.skill-97 {
  width: 0.97;
}

.skill-98 {
  width: 0.98;
}

.skill-99 {
  width: 0.99;
}

.skill-100 {
  width: 1;
}

.timeline-body {
  position: relative;
  background-color: #f8f9fa;
  border-radius: 0 15px 15px 0;
  padding: 5px 0;
}
.timeline-body:after {
  content: "";
  width: 4px;
  height: 100%;
  background-color: #007bff;
  position: absolute;
  left: -4px;
  top: 0;
}
.timeline-body .timeline-item {
  position: relative;
}
.timeline-body .timeline-item:after {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #007bff;
  background-color: #f8f9fa;
  position: absolute;
  left: -12px;
  top: 8px;
  z-index: 10;
}
.timeline-body .timeline-item .content {
  margin: 40px;
  padding-bottom: 20px;
  border-bottom: 1px dashed #343a40;
}
.timeline-body .timeline-item .content .date {
  margin-top: -5px;
  margin-bottom: 15px;
  color: #6c757d;
}

.cls-1 {
  fill: #ffc541;
}

.cls-2 {
  fill: #4e4066;
}

.cls-3 {
  fill: #6f5b92;
}

.cls-4 {
  fill: #f78d5e;
}

.cls-5 {
  fill: #fa976c;
}

.cls-6 {
  fill: #b65c32;
  opacity: 0.6;
}

.cls-7 {
  fill: #b65c32;
  opacity: 0.4;
}

.cls-8 {
  fill: #b65c32;
}

.cls-9 {
  fill: #f4b73b;
}

.cls-10 {
  opacity: 0.6;
}

.cls-11 {
  fill: #f9c358;
}

.cls-12 {
  fill: #9b462c;
}

.cls-13 {
  fill: #aa512e;
}

.cls-14 {
  fill: #7d6aa5;
}

/* animations */
.wheel {
  animation: wheel-rotate 6s ease infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes wheel-rotate {
  50% {
    transform: rotate(360deg);
    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  }
  100% {
    transform: rotate(960deg);
  }
}
.clock-hand-1 {
  animation: clock-rotate 3s linear infinite;
  transform-origin: bottom;
  transform-box: fill-box;
}

.clock-hand-2 {
  animation: clock-rotate 6s linear infinite;
  transform-origin: bottom;
  transform-box: fill-box;
}

@keyframes clock-rotate {
  100% {
    transform: rotate(360deg);
  }
}
#box-top {
  animation: box-top-anim 2s linear infinite;
  transform-origin: right top;
  transform-box: fill-box;
}

@keyframes box-top-anim {
  50% {
    transform: rotate(-5deg);
  }
}
#umbrella {
  animation: umbrella-anim 6s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes umbrella-anim {
  25% {
    transform: translateY(10px) rotate(5deg);
  }
  75% {
    transform: rotate(-5deg);
  }
}
#cup {
  animation: cup-rotate 3s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
  transform-origin: top left;
  transform-box: fill-box;
}

@keyframes cup-rotate {
  50% {
    transform: rotate(-5deg);
  }
}
#pillow {
  animation: pillow-anim 3s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes pillow-anim {
  25% {
    transform: rotate(10deg) translateY(5px);
  }
  75% {
    transform: rotate(-10deg);
  }
}
#stripe {
  animation: stripe-anim 3s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes stripe-anim {
  25% {
    transform: translate(10px, 0) rotate(-10deg);
  }
  75% {
    transform: translateX(10px);
  }
}
#bike {
  animation: bike-anim 6s ease infinite;
}

@keyframes bike-anim {
  0% {
    transform: translateX(-1300px);
  }
  50% {
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
  }
  100% {
    transform: translateX(1300px);
  }
}
#rucksack {
  animation: ruck-anim 3s linear infinite;
  transform-origin: top;
  transform-box: fill-box;
}

@keyframes ruck-anim {
  50% {
    transform: rotate(5deg);
  }
}
.circle {
  animation: circle-anim ease infinite;
  transform-origin: center;
  transform-box: fill-box;
  perspective: 0px;
}

.circle.c1 {
  animation-duration: 2s;
}

.circle.c2 {
  animation-duration: 3s;
}

.circle.c3 {
  animation-duration: 1s;
}

.circle.c4 {
  animation-duration: 1s;
}

.circle.c5 {
  animation-duration: 2s;
}

.circle.c6 {
  animation-duration: 3s;
}

@keyframes circle-anim {
  50% {
    transform: scale(0.2) rotateX(360deg) rotateY(360deg);
  }
}
.four,
#ou {
  animation: four-anim cubic-bezier(0.39, 0.575, 0.565, 1) infinite;
}

.four.a {
  transform-origin: bottom left;
  animation-duration: 3s;
  transform-box: fill-box;
}

.four.b {
  transform-origin: bottom right;
  animation-duration: 3s;
  transform-box: fill-box;
}

#ou {
  animation-duration: 6s;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes four-anim {
  50% {
    transform: scale(0.98);
  }
}

/*# sourceMappingURL=style.css.map */