:root {
 --white-color: #ffffff;
 --dark-color: #121212;
 --dark-light-color: #26282b;
 --primary-color: #272829;
 --secondary-color: #343a40;
 --thirdary-color: #29323a;

 --link-hover-color: #343a40;

 --p-font-size: 18px;
 --btn-font-size: 14px;
 --copyright-font-size: 16px;

 --border-radius-large: 100px;
 --border-radius-medium: 20px;
 --border-radius-medium-16px: 16px;
 --border-radius-small: 10px;

 --font-weight-light: 300;
 --font-weight-normal: 400;
 --font-weight-bold: 700;
}

.justify {
 text-align: justify;
}

.navbar {
 transition: background-color 0.3s ease;
}

.navbar.transparent {
 background: transparent !important;
}

.navbar.scrolled {
 background: var(--dark-color) !important;
}

.navbar-brand {
 margin: 0 40px 0 40px !important;
}

.hero {
 background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.8)), url('img/hero.jpg');
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 text-align: center;
}

.about-me {
 display: flex;
 justify-content: center;
 align-items: center;
}

.pfp {
 width: 200px;
 height: 200px !important;
 object-fit: cover;
}

.works {
 background: var(--primary-color);
 display: flex;
 justify-content: center;
 align-items: center;
 text-align: center;
 flex-wrap: wrap;
}

/* ---------------------------------- */
/* equal height cards and crop images */

.works .card,
.experience .card {
 height: 100%;
 display: flex;
 flex-direction: column;
}

.works .card-body,
.experience .card-body {
 flex: 1 1 auto;
 display: flex;
 flex-direction: column;
}

.works .card-img-top,
.experience .card-img-top {
 width: 100%;
 aspect-ratio: 16/9;
 object-fit: cover;
}

.works .card-footer,
.experience .card-footer {
 margin-top: auto;
}

.card-img-top {
 height: auto !important;
}

/* ---------------------------------- */

.social-icon {
 margin: 0;
 padding: 0;
}

.social-icon-item {
 list-style: none;
 display: inline-block;
 vertical-align: top;
}

.social-icon-link {
 background: var(--secondary-color);
 border-radius: var(--border-radius-large);
 color: var(--white-color);
 font-size: var(--copyright-font-size);
 display: block;
 margin-right: 10px;
 text-align: center;
 width: 35px;
 height: 35px;
 line-height: 36px;
}

.social-icon-link:hover {
 background: var(--primary-color);
 color: var(--white-color);
}

.experience {
 background: var(--thirdary-color);
 display: flex;
 justify-content: center;
 align-items: center;
 flex-wrap: wrap;
}

.timeline {
 margin: 0 0 45px;
 padding: 0;
 position: relative;
}

.timeline::before {
 border-radius: 0.25rem;
 background-color: var(--dark-light-color);
 bottom: 0;
 content: "";
 left: 31px;
 margin: 0;
 position: absolute;
 top: 0;
 width: 4px;
}

.timeline>div {
 margin-bottom: 15px;
 margin-right: 10px;
 position: relative;
}

.timeline>div::before,
.timeline>div::after {
 content: "";
 display: table;
}

.timeline>div>.timeline-item {
 box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
 border-radius: 0.25rem;
 background-color: var(--secondary-color);
 margin-left: 60px;
 margin-right: 15px;
 margin-top: 0;
 padding: 0;
 position: relative;
}

.timeline>div>.timeline-item>.timeline-body>.card {
 background-color: var(--secondary-color);
 border-radius: 0.25rem;
}

.timeline>div>.timeline-item>.time {
 color: var(--white-color);
 float: right;
 font-size: 12px;
 padding: 10px;
}

.timeline>div>.timeline-item>.timeline-header {
 border-bottom: 1px solid rgba(0, 0, 0, 0.125);
 line-height: 1.1;
 margin: 0;
 padding: 10px;
}

.timeline>div>.timeline-item>.timeline-body,
.timeline>div>.timeline-item>.timeline-footer {
 padding: 10px;
}

.timeline>div>.timeline-item>.timeline-body>img {
 margin: 10px;
}

.timeline>div>.timeline-item>.timeline-body>dl,
.timeline>div>.timeline-item>.timeline-body ol,
.timeline>div>.timeline-item>.timeline-body ul {
 margin: 0;
}

.timeline>div>.timeline-item>.timeline-footer>a {
 color: var(--dark-light-color);
}

.timeline>div>.fa,
.timeline>div>.fas,
.timeline>div>.far,
.timeline>div>.fab,
.timeline>div>.fal,
.timeline>div>.fad,
.timeline>div>.svg-inline--fa,
.timeline>div>.ion {
 background-color: var(--dark-color);
 border-radius: 50%;
 font-size: 16px;
 height: 30px;
 left: 18px;
 line-height: 30px;
 position: absolute;
 text-align: center;
 top: 0;
 width: 30px;
}

.timeline>div>.svg-inline--fa {
 padding: 7px;
}

.timeline>.time-label>span {
 border-radius: 4px;
 background-color: var(--thirdary-color);
 display: inline-block;
 font-weight: 600;
 padding: 5px;
}

.timeline>div>.timeline-item>.timeline-body {
 display: flex;
 flex-direction: column;
}

.timeline>div>.timeline-item>.timeline-body .card-img {
 width: 100%;
 aspect-ratio: 16/9;
 object-fit: cover;
}

.carousel-item img {
 object-fit: contain !important;
}

.carousel-control-prev,
.carousel-control-next {
 width: 10%;
 opacity: 0.8;
}

.carousel-control-prev {
 left: 6px;
}

.carousel-control-next {
 right: 6px;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
 opacity: 1;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
 background-color: transparent;
 background-image: none;
 display: inline-block;
 width: 1.5rem;
 height: 1.5rem;
 border: solid rgba(255, 255, 255, 0.55);
 border-width: 0 0.25rem 0.25rem 0;
 transform: rotate(45deg);
}

.carousel-control-prev-icon {
 transform: rotate(135deg);
}

.carousel-control-next-icon {
 transform: rotate(-45deg);
}

.site-footer {
 background-color: var(--dark-color);
 position: relative;
 overflow: hidden;
 padding: 60px 0 60px 0;
}

.copyright-text,
.distribution-text {
 color: var(--white-color);
}

.copyright-text {
 font-size: var(--copyright-font-size);
}

.distribution-text {
 font-size: var(--copyright-font-size);
 text-align: right;
}

.image-viewer {
 display: none;
 position: fixed;
 z-index: 9999;
 padding: 10px;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.9);
 overflow: hidden;
 touch-action: none;
}

.viewer-content {
 position: relative;
 top: 3%;
 height: 85%;
 margin: auto;
 display: block;
 object-fit: contain;
 transition: transform 0.3s ease-out;
 user-select: none;
 -webkit-user-drag: none;
 transform-origin: center center;
}

.close-btn {
 position: absolute;
 right: 30px;
 color: #fff;
 font-size: 40px;
 cursor: pointer;
 z-index: 10000;
}

.viewer-controls {
 position: absolute;
 bottom: 20px;
 left: 50%;
 transform: translateX(-50%);
 display: flex;
 gap: 20px;
}

.zoom-controls {
 position: absolute;
 top: 20px;
 left: 20px;
 display: flex;
 gap: 10px;
 z-index: 10000;
}

.zoom-btn {
 background: var(--secondary-color);
 border: none;
 color: white;
 width: 40px;
 height: 40px;
 font-size: 20px;
 cursor: pointer;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
}

.zoom-btn:hover {
 background: var(--thirdary-color);
}

.zooming {
 transition: none !important;
}

.nav-btn {
 background: var(--secondary-color);
 border: none;
 color: white;
 padding: 10px 20px;
 font-size: 20px;
 cursor: pointer;
 border-radius: 5px;
}

.nav-btn:hover {
 background: var(--thirdary-color);
}

@media (min-width: 768px) {

 .about-me {
  height: calc(100vh - 60px);
 }

 .timeline>div>.timeline-item>.timeline-body {
  flex-direction: row;
  gap: 16px;
 }

 .timeline>div>.timeline-item>.timeline-body .card {
  flex: 0 0 50%;
  margin: 0;
 }

 .timeline>div>.timeline-item>.timeline-body .timeline-content {
  flex: 0 0 calc(50% - 20px);
 }

 @media (max-width: 992px) {

  .col-md-4 {
   flex: 0 0 auto;
   width: unset !important;
  }

  .pfp,
  .rounded-circle {
   height: unset !important;
   object-fit: cover;
   border-radius: unset !important;
  }

 }

}

@media (max-width: 768px) {

 .pfp,
 .rounded-circle {
  height: unset !important;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: unset !important;
 }

 .timeline>div>.timeline-item>.timeline-body .card-img {
  width: 100%;
  aspect-ratio: 16/9 !important;
  object-fit: cover;
  padding-bottom: 1rem;
 }

 .timeline>div>.timeline-item {
  margin-left: 40px;
 }

 .timeline::before {
  left: 21px;
 }

 .timeline>div>.fa,
 .timeline>div>.fas,
 .timeline>div>.far,
 .timeline>div>.fab,
 .timeline>div>.fal,
 .timeline>div>.fad,
 .timeline>div>.svg-inline--fa,
 .timeline>div>.ion {
  left: 8px;
 }
 
 .viewer-content {
  position: absolute;
  top: 48%;
  bottom: 52%;
  left: 0px;
  right: 0px;
  transform: translate(-50%, -50%);
  height: unset;
  max-width: 100%;
  max-height: 80%;
  margin: auto;
  margin-inline: auto; 
 }

}

@media (max-width: 992px) {

 .navbar-brand {
  margin-left: 20px !important;
 }

 .navbar-toggler {
  margin-right: 10px !important;
 }

 .navbar-nav {
  margin: 20px 40px 20px 40px !important;
 }

 .timeline>div>.timeline-item>.timeline-body .card-img {
  width: 100%;
  aspect-ratio: unset;
  object-fit: cover;
 }

}