html {
  /*scroll-behavior: smooth;*/
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif !important;
}

/* WCAG AA contrast overrides for Bootstrap defaults */
.text-secondary { color: #595f64 !important; }          /* 5.0:1 on #f8f9fa */
.text-primary   { color: #0b5ed7 !important; }          /* 4.88:1 on #f8f9fa, 4.52:1 on #fff */
.btn-primary    { background-color: #0b5ed7 !important;
                  border-color: #0b5ed7 !important; }    /* white text 4.52:1 */
.btn-outline-secondary { color: #595f64 !important;
                         border-color: #595f64 !important; } /* 5.0:1 on #fff */
.body-padding-top {
    padding-top: 60px;
}
.body-padding {
     padding-top: 60px;
     padding-bottom: 60px;
 }
.body-padding-bottom {
    padding-bottom: 60px;
}
.img-overlay-wrap {
    position: relative;
    display: inline-block; /* <= shrinks container to image size */
    transition: transform 150ms ease-in-out;
}
.img-overlay-wrap img { /* <= optional, for responsiveness */
    display: block;
    max-width: 100%;
    height: auto;
}
/* Large Mobile :480px. */
@media (max-width: 767px) {
  #home .img-overlay-wrap img {
    display: block;
    max-width: 80%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
}

.img-overlay-wrap svg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.fade-out.aos-animate {opacity: 0}

/* About photo (index) */
#about-photo {
  width: 60%;
  max-width: 420px;
  height: auto;         /* prevents distortion */
  border-radius: 50%;
  filter: grayscale(100%);
}

/* Navbar / footer brand icons (FA7) */
.navbar .fa-brands,
.blog-footer .fa-brands {
    color: rgba(0,0,0,0.8);
}
.navbar .fa-brands:hover,
.blog-footer .fa-brands:hover {
    color: rgba(2,101,216,0.6);
}

/* Optional: solid icons on light links (e.g., back-to-top arrow) */
.blog-footer .fa-solid {
    color: rgba(0,0,0,0.75);
}
.blog-footer .fa-solid:hover {
    color: rgba(2,101,216,0.75);
}

/* Footer minor spacing alignment */
.blog-footer .btn-link {
  padding: 0;
  text-decoration: none;
}
.blog-footer .btn-link:hover {
  text-decoration: underline;
}

p.blog-design {
    font-size: 18px;
    line-height: 1.7;
}

/*---------------------
	Resume section
----------------------*/
.resume-list {
    list-style: none;
    margin-left: 60px;
    padding-left: 110px;
    border-left: 2px solid #40424a;
}

.resume-list li {
    margin-bottom: 60px;
    position: relative;
}

.resume-list li:last-child {
    margin-bottom: 0;
}

.resume-list li:after {
    position: absolute;
    content: '';
    width: 15px;
    height: 15px;
    border: 2px solid #40424a;
    border-radius: 50px;
    background: #cacaca;
    top: 10px;
    left: -118px;
}

/* Large Mobile :480px. */
        @media only screen and (max-width: 767px) {
    .resume-list {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }
}
.blog-footer {
    color: #999;
    text-align: center;
    background-color: #f9f9f9;
    border-top: .05rem solid #e5e5e5;
}
.blog-footer p:last-child {
    margin-bottom: 0;
}

/* Projects grid thumbnails */
.project-thumb { height: 200px; object-fit: cover; }

/* Calendar Styling */
.month {
    font-size: 2rem;
}

@media (min-width: 992px) {
    .month {
        font-size: 3.5rem;
    }
}

.calendar ol li {
    float: left;
    width: 14.28571%;
}

.calendar .day-names {
    border-bottom: 1px solid #eee;
}

.calendar .day-names li {
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.calendar .days li {
    border-bottom: 1px solid #eee;
    min-height: 8rem;
}

.calendar .days li .date {
    margin: 0.5rem 0;
}

.calendar .days li .event {
    font-size: 0.75rem;
    padding: 0.4rem;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 4rem;
    margin-bottom: 1px;
}

.calendar .days li .event.span-2 {
    width: 200%;
}

.calendar .days li .event.begin {
    border-radius: 1rem 0 0 1rem;
}

.calendar .days li .event.end {
    border-radius: 0 1rem 1rem 0;
}

.calendar .days li .event.clear {
    background: none;
}

.calendar .days li:nth-child(n+29) {
    border-bottom: none;
}

.calendar .days li.outside .date {
    color: #ddd;
}
/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/
.clearfix::after,
.calendar ol::after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
#example thead tr th {
    font-weight: normal !important;
}

/* Custom overlay text */
.thumbnail {
    position: relative;
}

.caption {
    position: absolute;
    top: 45%;
    left: 10%;
    width: 80%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 25px;
}

/* Large Mobile :480px. */
@media only screen and (max-width: 767px) {
    .caption {
        position: absolute;
        top: 30%;
        left: 10%;
        width: 80%;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        padding: 25px;
    }
}
@media only screen and (max-width: 336px) {
    .caption {
        position: absolute;
        top: 20%;
        width: 80%;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        font-size: 12px !important;
        font-weight: bolder !important;
    }
}
@media only screen and (max-width: 273px) {
    .caption {
        display: none;
    }
}

/*
*
* ==========================================
* TIMELINE
* ==========================================
*
*/
/* The actual timeline (the vertical ruler) */
ul.timeline {
    list-style-type: none;
    position: relative;
}
ul.timeline:before {
    content: ' ';
    background: #d4d9df;
    display: inline-block;
    position: absolute;
    left: 29px;
    width: 2px;
    height: 100%;
    z-index: 400;
}
ul.timeline > li {
    margin: 20px 0;
    padding-left: 20px;
}
ul.timeline > li:before {
    content: ' ';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid black;
    left: 20px;
    width: 20px;
    height: 20px;
    z-index: 400;
}

/* =========================
   SPOTIFY
   ========================= */
:root{
  --brand-grad: linear-gradient(90deg,#b66ecd,#4398f8,#00b5ed,#00c6bc,#7acd88);
  --card-radius: 16px; /* CHANGED (was 20px) */
}

/* gradient text utility */
.text-gradient{
  background-image: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* sticky label used in the Attributes section */
.sticky-year{
  position: sticky;
  top: 24px;                 /* CHANGED (was 40px) */
  z-index: 5;
  padding: .5rem .875rem;    /* CHANGED (was .75rem 1rem) */
  border-radius: 999px;
  background-image: var(--brand-grad);
  color: #fff;
  text-align: center;
  font-weight: 600;
  margin-bottom: .5rem;      /* CHANGED (was 1rem) */
}

/* artists timeline cards (compact) */
.spotify-history .card{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--card-radius);
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
  overflow: hidden;
  margin: .5rem 0;           /* CHANGED: tighter spacing */
}

/* CHANGED: force a short card height */
.spotify-history .card .row{
  min-height: 110px;
}

/* CHANGED: make image column fixed + small */
.spotify-history .card .row > .col-5{
  flex: 0 0 110px;
  max-width: 110px;
}

/* CHANGED: let right column fill remaining space */
.spotify-history .card .row > .col-7{
  flex: 1 1 auto;
  max-width: calc(100% - 110px);
}

/* CHANGED: clamp image to 110×110 */
.spotify-history .card .row > .col-5 img{
  width: 110px;
  height: 110px;
  object-fit: cover;
}

/* CHANGED: tighter text on the right */
.spotify-history .card .card-body{ padding: .5rem 1rem; }
.spotify-history .card h3.card-title{
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}
.spotify-history .card .display-4{
  font-size: 2rem !important;
  line-height: 1;
  opacity: .5;
  margin: 0;
}

/* charts grid + card shell */
/* CHANGED: always single column (no 2×2) */
.attr-grid{
  display: block;            /* CHANGED */
  grid-template-columns: 1fr;/* CHANGED (was 1fr 1fr) */
  gap: 1.25rem;
}

/* optional wrapper if you use it */
.chart-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--card-radius);
  padding: 1rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
  margin-bottom: 1rem;       /* CHANGED: ensure separation when stacked */
}

/* CHANGED: shorter charts */
.chart-card .chart-container,
.chart-card canvas,
.chart-container{             /* added to override any old rule */
  height: 400px !important;   /* CHANGED (was 320px / 400px elsewhere) */
}

/* slightly tighter copy on the page body */
#blog-description p{ line-height: 1.6; }

/* neutralize any legacy gradient fills */
.card-spotify{ background: #fff !important; }

table.dataTable.table-sm>thead>tr>th:not(.sorting_disabled) { padding-right: 30px !important; }

.dataTable > thead > tr > th[class*="sort"]:before{
    content: "" !important;
}
.dataTable > thead > tr > th[class*="sort"]:after{
    content: "" !important;
}

table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc,
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > td.sorting_asc,
table.dataTable thead > tr > td.sorting_desc,
table.dataTable thead > tr > td.sorting {
    padding-right: inherit;
}

.table-responsive {
    max-height:1000px;
}