*::selection{
    background-color: #3666d9;
    color: white;
}

.lighter-blue{ background-color: #5eb5f4;}
.darker-blue{ background-color: #3666d9; color: white;}

.header-container{
    position: sticky; top: 0.5rem;z-index: 100;background-color: rgba(255, 255, 255, 0.75); backdrop-filter: blur(4px);
}
.breadcrumb-container{
    background-color: rgba(248,249,250,0.75); backdrop-filter: blur(3px);
}

.unselectable{ user-select: none; }

.nav-link-btn{ position: relative; border: 0; margin: 0 10px; transition: color 0.15s ease; }
.nav-link-btn::after{
    content: '';
    position:absolute;
    display: block;
    height: 1px;
    width: 40%;
    background-color: black;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    right: 0;
    transition: all 0.15s ease;
}
.nav-link-btn:hover{ color: #3666d9; }
.nav-link-btn:hover::after{ width: 100%; background-color: #3666d9; color: #3666d9; }
.nav-link-btn.active, a.btn:active, a.btn:first-child:active, :not(.btn-check)+.btn:active{ color: #3666d9; }
.nav-link-btn.active::after{ background-color: #3666d9; width: 100%; }

.background-block{
    border: 1px solid #3666d9;
    box-shadow: 2px 2px 0 0px #3666d9;
    width: 800px;
}

.reading-block{
    border: 1px solid #5eb5f4;
    box-shadow: 2px 2px 0 0px #5eb5f4;
    width: 500px;
}
.reading-block i{ margin-right: 5px; }

/* Article styles */

.article-container{
    margin: 0 auto;
    width: 1150px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 18px;
}

.article-card{
    width: 100%;
    grid-row:span 1;
    grid-column: span 1;
    height: 400px;
    background-color: white;
    box-shadow: 0 4px 10px 0 rgb(180, 180, 180);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: box-shadow ease-in-out 0.15s, border ease-in-out 0.15s;
    border: 1px solid rgba(180, 180, 180, 0.5);
}

.article-card:first-child{ grid-column: span 2; }

.article-card.tech .thumbnail-color{
    width: 100%;
    height: 60px;
    position: absolute;
    top: 0;
    background-color: #3667d938;
    opacity: 1;
    backdrop-filter: blur(1px);
    transition: background-color ease-in-out 0.15s, opacity ease-in-out 0.15s;
}
.article-card.personal .thumbnail-color{
    width: 100%;
    height: 60px;
    position: absolute;
    top: 0;
    background-color: #2c995a38;
    opacity: 1;
    backdrop-filter: blur(1px);
    transition: background-color ease-in-out 0.15s, opacity ease-in-out 0.15s;
}

.article-card.tech:hover{
    box-shadow: 4px 4px 0 0 #3666d9,0 4px 10px 0 rgba(216, 216, 216, 0.8);
    border: 1px solid #3666d9;
}
.article-card.personal:hover{
    box-shadow: 4px 4px 0 0 #2c995a,0 4px 10px 0 rgba(216, 216, 216, 0.8);
    border: 1px solid #2c995a;
}

.article-card:hover .thumbnail-color{ background-color: unset; opacity: 0; }

.article-card img{
    height: 60px;
    width: 100%;
    object-fit: cover;
}

.article-card a.h3{ 
    padding: 20px; 
    text-decoration: none;
    height: 108px;
    margin-bottom: 10px;
    font-size: 1.7rem;
    transition: color 0.15s ease-in-out;
}

.article-card.tech a.h3:hover{ color: #3666d9; }
.article-card.personal a.h3:hover{ color: #2c995a; }

.article-card .badge{ display: flex; align-items: center; font-size: 0.75rem; border-radius: 9px; letter-spacing: 0.7px; font-family: 'Lora'; font-weight: normal;}
.article-card.tech .read-time .badge{ background-color: #3666d9; }
.article-card.personal .read-time .badge{ background-color: #2c995a; }

.article-card .read-time{
    padding: 0 20px;
    font-size: 0.8rem;
    color: gray;
    margin: 0 0 7px 0;
    display: flex;
}

.article-card .description{
    padding: 0 20px; 
    margin-bottom: 0; 
}

.article-card .published-date{
    color: gray;
    padding:20px;
    margin-top: auto;
    margin-bottom: 0;
}

article h2, article h3, article h4{ margin: 48px 0 24px 0; }
article h3{ font-size: 1.5rem;}

article p, article a{ font-size: 1.1rem; }
article a{
    display: inline-block;
    text-decoration: none;
    color: #3666d9;
    box-sizing: border-box;
    border-bottom: 1px solid transparent;
}
article a:hover{ border-bottom: 1px solid #3666d9 ; }

.header-block h1{
    background: linear-gradient(to right, rgba(33, 37, 41, 0.7) 0%, rgba(33, 37, 41, 0.4) 50%, rgba(33, 37, 41, 0.7) 100%);
    backdrop-filter: blur(7px);
    width: 100%;
    height: 100%;
    display: block;
}
.header-block{
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: relative;
}

.page-img-container{ margin-bottom: 32px; text-align: center; }
.page-img-container img{ width: 100%; margin: 0 auto; }

.alert{ border-left-width: 4px; border-right-width: 4px; border-top-width: 0; border-bottom-width: 0;}

.breadcrumb{ margin: 0; }
.breadcrumb-item:not(.active) a{ color:rgb(87, 87, 87); }
.breadcrumb-item.active a{ color: rgb(87, 87, 87); text-decoration: none; }

cite{ font-style: normal; font-family: "PT Sans"; }

.resume{
    width: 8.5in;
    height: 11in;
    padding: 0.4in;
    border: 1px solid lightgray;
    font-size: smaller;
}
.resume .h1{
    font-size: 1.5rem;
    color: white;
    background: linear-gradient(to right, #3666d9 0%, #26499c 100%);
    padding: 5px;
    border-radius: 2px;
}
.resume .h2{ font-size: 1.2rem; color: #3666d9; font-weight: 600;}
.resume .h3{ font-size: 0.9rem; }
.resume .h4{ font-size: 0.8rem; }
.resume ul.ps-3 li{ font-family: "lora"; font-weight: 500; margin-bottom: 6px; }

footer a.link-light{ text-decoration: none; position: relative; }
footer a.link-light::after{ 
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: rgb(248, 249, 250);
    transition: width ease-in-out 0.15s;
}
footer a.link-light:hover::after{ 
    width:100%;
}

@media screen and (max-width:1200px) {
    .article-container{ width:90% }
    .article-card{ width: 100%; height: 100%; }
    .article-card a.h3{ height: unset; margin-bottom: 0; }
}

@media screen and (max-width:992px) {
    .article-card{ grid-column: span 3 !important; }
    .article-card.tech .thumbnail-color, .article-card.personal .thumbnail-color{ backdrop-filter: blur(0);}
}

@media screen and (max-width:768px){
    .resume{
        width: 100%;
        padding: 0.25in;
        height: 100%;
    }
}

.offcanvas-body .menu{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 32px;
}

.offcanvas-body .menu a{
    padding: 20px 0;
    background-color: rgba(54, 103, 217, 0.2);
}

/* About Page styles */

.about-main-body .left-column, .about-main-body .right-column{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about-main-body .column-card{
    padding: 30px 20px;
    background: linear-gradient(to bottom right, #ffffff, #e6e6e6);
    border-radius: 0 5px 0 5px;
    position: relative;
    border-left:1px solid #3666d9;
    border-right:1px solid #3666d9;
}

.about-main-body .column-card::before{
    position:absolute;
    background:linear-gradient(to right, #3666d9 50%, transparent 100%);
    width: 70px;
    height: 1px;
    content: '';
    top: 0;
    left: 0;
}

.about-main-body .column-card::after{
    position:absolute;
    background:linear-gradient(to left, #3666d9 50%, transparent 100%);
    width: 70px;
    height: 1px;
    content: '';
    bottom: 0;
    right: 0;
}

.about-main-body .column-card h2{ font-size: 1.5rem; position: relative; margin-bottom: 16px; }
.about-main-body .column-card h2::after{
    content: '';
    bottom:-3px;
    left: 0;
    width: 45%;
    height: 1px;
    background: linear-gradient(to right, rgb(185, 185, 185) 80%, transparent 100%);
    position: absolute;
}

.about-main-body ul li cite{
    color: rgb(109, 109, 109);
    font-style: italic;
}