@import url("https://fonts.googleapis.com/css?family=Poppins");
.circle-image1 {
  height: 90%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center; }

.navbar-font {
  font-size: 1.5rem; }

.profile-font {
  font-size: 1.5rem; }

.social-font {
  font-size: 2rem; }

.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); } }
.highlight .w {
  color: #bbbbbb; }

/* Text.Whitespace */
.highlight .k {
  color: #0000aa; }

/* Keyword */
.highlight .m {
  color: #009999; }

/* Literal.Number */
.highlight .s {
  color: #aa5500; }

/* Literal.String */
.highlight .c {
  color: #aaaaaa;
  font-style: italic; }

/* Comment */
.highlight .cp {
  color: #4c8317; }

/* Comment.Preproc */
.highlight .gd {
  color: #aa0000; }

/* Generic.Deleted */
.highlight .gr {
  color: #aa0000; }

/* Generic.Error */
.highlight .gi {
  color: #00aa00; }

/* Generic.Inserted */
.highlight .go {
  color: #888888; }

/* Generic.Output */
.highlight .gp {
  color: #555555; }

/* Generic.Prompt */
.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 .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 .nf {
  color: #00aa00; }

/* Name.Function */
.highlight .nn {
  color: #00aaaa; }

/* Name.Namespace */
.highlight .nv {
  color: #aa0000; }

/* Name.Variable */
.highlight .ow {
  color: #0000aa; }

/* Operator.Word */
.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 */
.highlight .ge {
  font-style: italic; }

/* Generic.Emph */
.highlight .gs {
  font-weight: bold; }

/* Generic.Strong */
.highlight .c1 {
  color: #aaaaaa;
  font-style: italic; }

/* Comment.Single */
.highlight .cs {
  color: #0000aa;
  font-style: italic; }

/* Comment.Special */
.highlight .ch {
  color: #aaaaaa;
  font-style: italic; }

/* Comment.Hashbang */
.highlight .cm {
  color: #aaaaaa;
  font-style: italic; }

/* Comment.Multiline */
.highlight .gh {
  color: #000080;
  font-weight: bold; }

/* Generic.Heading */
.highlight .gu {
  color: #800080;
  font-weight: bold; }

/* Generic.Subheading */
.highlight .ni {
  color: #880000;
  font-weight: bold; }

/* Name.Entity */
.highlight .nt {
  color: #1e90ff;
  font-weight: bold; }

/* Name.Tag */
.highlight .err {
  color: #FF0000; }

/* Error */
.highlight .cpf {
  color: #aaaaaa;
  font-style: italic; }

/* Comment.PreprocFile */
html {
  padding-left: calc(100vw - 100%); }

body {
  font-family: "Poppins", sans-serif; }

.badge {
  font-weight: 500; }

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

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

.post .post-metadata {
  font-size: 14px;
  margin-top: -6px; }
.post .tag:hover {
  background-color: #007bff;
  color: white !important; }
.post footer {
  font-size: 10px;
  color: #6c757d;
  text-decoration: underline;
  text-decoration-color: yellow;
  text-align: right;
  margin-top: 4em;
  margin-right: 2em; }
.post h1,
.post h2 {
  margin-top: 32px; }
.post hr {
  background: #6c757d; }
.post img:not(.emoji) {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1rem auto; }
.post .video {
  position: relative;
  padding-bottom: 56.25%;
  margin-bottom: 1rem;
  width: 100%; }
  .post .video iframe {
    position: absolute;
    height: 100%;
    width: 100%; }
.post a:not(.btn):not([class^="carousel-"]):not([class^="list-"]):not(.no-underline) {
  display: inline-block;
  text-decoration: none; }
  .post a:not(.btn):not([class^="carousel-"]):not([class^="list-"]):not(.no-underline):hover {
    color: #007bff; }
  .post 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; }
  .post a:not(.btn):not([class^="carousel-"]):not([class^="list-"]):not(.no-underline):hover::after {
    width: 100%; }
.post 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; }
.post code.highlighter-rouge {
  background-color: #f8f9fa;
  color: #343a40;
  border-radius: 3px;
  margin: 0;
  padding: 0.2em 0.65em; }
.post blockquote {
  border-left: 0.25em solid #007bff;
  color: #6c757d;
  padding: 0 1em; }
.post table {
  display: block;
  overflow-x: auto;
  margin: 1rem 0; }
  .post table td, .post table th {
    border: 1px solid #ddd;
    padding: 8px 16px; }
  .post table th {
    padding-top: 12px;
    padding-bottom: 12px;
    font-weight: 500;
    text-align: left;
    background-color: #007bff;
    color: white; }
  .post table tr:nth-child(even) {
    background-color: #f8f9fa; }

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

#attribution {
  opacity: 0.5; }
  #attribution a {
    text-decoration: none;
    font-weight: bold; }

@media only screen and (min-width: 768px) {
  #attribution {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    position: fixed;
    bottom: 56px;
    right: 22px; } }
#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: center; }

.link-after, .nav-link::after,
.navbar-brand::after, .nav-item.active::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-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;
  transition: transform 400ms; }
  .project.card .card-img-top {
    border-radius: 15px 15px 0 0; }
  .project.card:hover:not(.post) {
    transform: translateY(-8px);
    box-shadow: -2px 8px 40px -12px rgba(0, 0, 0, 0.24); }

.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: 1%; }

.skill-2 {
  width: 2%; }

.skill-3 {
  width: 3%; }

.skill-4 {
  width: 4%; }

.skill-5 {
  width: 5%; }

.skill-6 {
  width: 6%; }

.skill-7 {
  width: 7%; }

.skill-8 {
  width: 8%; }

.skill-9 {
  width: 9%; }

.skill-10 {
  width: 10%; }

.skill-11 {
  width: 11%; }

.skill-12 {
  width: 12%; }

.skill-13 {
  width: 13%; }

.skill-14 {
  width: 14%; }

.skill-15 {
  width: 15%; }

.skill-16 {
  width: 16%; }

.skill-17 {
  width: 17%; }

.skill-18 {
  width: 18%; }

.skill-19 {
  width: 19%; }

.skill-20 {
  width: 20%; }

.skill-21 {
  width: 21%; }

.skill-22 {
  width: 22%; }

.skill-23 {
  width: 23%; }

.skill-24 {
  width: 24%; }

.skill-25 {
  width: 25%; }

.skill-26 {
  width: 26%; }

.skill-27 {
  width: 27%; }

.skill-28 {
  width: 28%; }

.skill-29 {
  width: 29%; }

.skill-30 {
  width: 30%; }

.skill-31 {
  width: 31%; }

.skill-32 {
  width: 32%; }

.skill-33 {
  width: 33%; }

.skill-34 {
  width: 34%; }

.skill-35 {
  width: 35%; }

.skill-36 {
  width: 36%; }

.skill-37 {
  width: 37%; }

.skill-38 {
  width: 38%; }

.skill-39 {
  width: 39%; }

.skill-40 {
  width: 40%; }

.skill-41 {
  width: 41%; }

.skill-42 {
  width: 42%; }

.skill-43 {
  width: 43%; }

.skill-44 {
  width: 44%; }

.skill-45 {
  width: 45%; }

.skill-46 {
  width: 46%; }

.skill-47 {
  width: 47%; }

.skill-48 {
  width: 48%; }

.skill-49 {
  width: 49%; }

.skill-50 {
  width: 50%; }

.skill-51 {
  width: 51%; }

.skill-52 {
  width: 52%; }

.skill-53 {
  width: 53%; }

.skill-54 {
  width: 54%; }

.skill-55 {
  width: 55%; }

.skill-56 {
  width: 56%; }

.skill-57 {
  width: 57%; }

.skill-58 {
  width: 58%; }

.skill-59 {
  width: 59%; }

.skill-60 {
  width: 60%; }

.skill-61 {
  width: 61%; }

.skill-62 {
  width: 62%; }

.skill-63 {
  width: 63%; }

.skill-64 {
  width: 64%; }

.skill-65 {
  width: 65%; }

.skill-66 {
  width: 66%; }

.skill-67 {
  width: 67%; }

.skill-68 {
  width: 68%; }

.skill-69 {
  width: 69%; }

.skill-70 {
  width: 70%; }

.skill-71 {
  width: 71%; }

.skill-72 {
  width: 72%; }

.skill-73 {
  width: 73%; }

.skill-74 {
  width: 74%; }

.skill-75 {
  width: 75%; }

.skill-76 {
  width: 76%; }

.skill-77 {
  width: 77%; }

.skill-78 {
  width: 78%; }

.skill-79 {
  width: 79%; }

.skill-80 {
  width: 80%; }

.skill-81 {
  width: 81%; }

.skill-82 {
  width: 82%; }

.skill-83 {
  width: 83%; }

.skill-84 {
  width: 84%; }

.skill-85 {
  width: 85%; }

.skill-86 {
  width: 86%; }

.skill-87 {
  width: 87%; }

.skill-88 {
  width: 88%; }

.skill-89 {
  width: 89%; }

.skill-90 {
  width: 90%; }

.skill-91 {
  width: 91%; }

.skill-92 {
  width: 92%; }

.skill-93 {
  width: 93%; }

.skill-94 {
  width: 94%; }

.skill-95 {
  width: 95%; }

.skill-96 {
  width: 96%; }

.skill-97 {
  width: 97%; }

.skill-98 {
  width: 98%; }

.skill-99 {
  width: 99%; }

.skill-100 {
  width: 100%; }

.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; }