@import url("https://fonts.googleapis.com/css?family=Poppins");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");
body { font-family: 'Poppins', sans-serif; background: linear-gradient(90deg, white 18.7px, transparent 1%) center, linear-gradient(white 18.7px, transparent 1%) center, dimgray; background-size: 20px 20px; }

.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%; object-fit: cover; object-position: center; background-color: rgba(228, 228, 228, 0.527); border-radius: 12px; margin: auto; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); }

.social { text-decoration: none !important; font-size: 25px; background-color: white; }

.para { background-color: white; }

.text-muted { background: white; }

/* Animations */
@keyframes fadeOut { 0% { opacity: 1; }
  100% { opacity: 0; } }
@keyframes zoomInOut { 0%,100% { transform: scale(0.5); }
  50% { transform: scale(1); } }
@keyframes bounce { 0%,100% { transform: translateY(0); }
  50% { transform: translateY(-20px); } }
/* square-to-circle */
@keyframes squareToCircle { 0% { border-radius: 50%; transform: rotate(0deg); }
  25% { border-radius: 50% 0 0 0; transform: rotate(45deg); }
  50% { border-radius: 0 50% 0 0; transform: rotate(90deg); }
  75% { border-radius: 0 0 50% 0; transform: rotate(135deg); }
  100% { border-radius: 50%; transform: rotate(180deg); } }
/* spin */
@keyframes spin { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }
/* Circles */
.bg-circles { position: fixed; top: 0; height: 100%; max-width: 1200px; width: calc(100% - 30px); left: 50%; transform: translateX(-50%); z-index: -1; }

.bg-circles div { position: absolute; border-radius: 50%; }

.bg-circles .circle-1 { font-size: 55px; left: 5%; top: 20%; animation: bounce 4s linear infinite; }

.bg-circles .circle-2 { /* background-color: var(--main-color); */ left: 26%; top: 45%; animation: bounce 5s ease-in-out infinite; }

.bg-circles .circle-3 { top: 45%; left: 0%; animation: bounce 5s linear infinite; }

.bg-circles .circle-4 { font-size: 55px; top: 70%; left: 5%; animation: bounce 6s ease-in-out infinite; }

.bg-circles .circle-5 { top: 45%; right: 20%; animation: bounce 5s ease-in-out infinite; }

.bg-circles .circle-6 { top: 45%; right: -1%; animation: bounce 5s ease-in-out infinite; }

.bg-circles .circle-7 { top: 20%; right: 5%; animation: bounce 4s linear infinite; }

.bg-circles .effect-1 { top: 70%; right: 5%; animation: bounce 6s ease-in-out infinite; border-radius: 12px; }

@media screen and (max-width: 768px) { .bg-circles { display: none; } }
.link-after, .nav-link::after, .navbar-brand::after, .nav-item.active::after { content: ''; display: block; height: .15em; background: #007bff; }

.nav-link::after, .navbar-brand::after { width: 0; transition: width .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: -.25em; }

.nav-link { background-color: white; }

.navbar-brand { background-color: white; }

.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 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-"]) { display: inline-block; text-decoration: none; }
.article a:not(.btn):not([class^="carousel-"]):not([class^="list-"]):hover { color: #007bff; }
.article a:not(.btn):not([class^="carousel-"]):not([class^="list-"])::after { content: ''; display: block; height: .15em; margin-top: -.15em; width: 0; background: #007bff; transition: width .35s; }
.article a:not(.btn):not([class^="carousel-"]):not([class^="list-"]):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: .2em .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: 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; }

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