@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
:root{
    --gradient: linear-gradient(90deg, #3a47d5, #00d2ff 51%, #3a47d5 100%);
    --active-color: rgb(14 165 233);
}
*{
    font-family: "Inter", sans-serif;
}

.nav-item{
    margin-left: 15px;
}
.header-navbar{
    font-weight: bold;
    font-size: large;
    border-bottom: solid 1px rgb(229, 231, 235);
}
.nav-link:hover{
    color: var(--active-color);
    transition: .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out
}

aside{
    border-right: solid 1px rgb(229, 231, 235);
    overflow-y: scroll;
    overflow-x: scroll;
    height: 80vh;
}

.h1 {
    font-weight: bold;
}

.alternative-bg {
    background-color: rgb(249 250 251);
}

.center {
    justify-content: center;
}

.section {
    padding: 3rem 1rem;
}

.gray-font,
.card-text,
p {
    color: rgb(75 85 99);
    font-size: medium;
}

footer{
    background-color: rgb(26 31 44);
    color: rgb(209 213 219);
    ul{
        list-style-type: none;
        padding-left: 0px;
    }
    p, li {
        font-size: large;
        color: rgb(209 213 219);
        padding-bottom: 5px;
    }

    .footer-title {
        color: white;
        font-weight: bold;
    }
    #social-media i{
        margin-right:10px;
        font-size: x-large;
    }
}

#gradient-text {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#gradient-text {
    background: linear-gradient(0deg, #3a47d5, #00d2ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#gradient-text, .big-text{
    font-size: 45pt;
    font-weight: bold;
}

.active-btn{
    color: white;
    background-color: var(--active-color);
}

.btn-gradient {
    background-image: var(--gradient);
    padding: 7px 15px;
    text-align: center;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    display: block;
}

.btn-gradient:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
}

.a-undecorated{
    color: inherit;
    text-decoration: none;
}
.card-img-top{
    color: var(--active-color);
    font-size: xx-large;
    text-align: center;
    margin-top: 20px;
}
.card-text{
    font-size: small;
    text-align: center;
}
.card-title{
    font-weight: bold;
    text-align: center;
}
.font-small{
    font-size: small;
}
.img-shadow{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.active-color{
    color: var(--active-color);
}
.info-panel{
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    padding: 2rem;
}

.card:hover {
    animation: shadow-animation 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@keyframes shadow-animation {
    0%{
        box-shadow: rgba(99, 99, 99, 0.2) 0px 0px 0px 0px;
    }

    100% {
        box-shadow: rgba(99, 99, 99, 0.5) 0px 2px 8px 0px;
    }
}

.head-panel{
    background: linear-gradient(to bottom right, #e5deff , #fff);
}

.large-text{
    font-size: 1.25rem;
    line-height: 1.75rem;
}

code{
    background-color: lightgray;
}

pre{
    background-color: lightgray;
    width: fit-content;
    padding: 10px;
    border-radius: 5px;
    margin: 10px;
}

article p{
    color: black;
    line-height: 2rem;
}

article img{
    display: block;
    margin: 15px auto;
}