@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;900&display=swap');

/*Fonts*/
p,
h1,
h2,
h3,
h4,
.nav-link,
button,
a,
.accordion-body {
    font-family: 'Poppins', sans-serif !important;
}

small,
small a,
.metadata,
.small-2 {
    font-family: 'Source Code Pro', monospace !important;
}

.huge {
    font-size: 8rem;
    font-weight: 700;
}

.large {
    font-size: 5rem;
    font-weight: 700;
}

.subtitle {
    font-size: 3rem;
    font-weight: 400;
}

small {
    font-size: .75rem !important;
}

.small-2 {
    font-size: .85rem !important;
}

.book-link {
    text-decoration: none;
    font-weight: bold;
}

/*Spacing*/
.brk {
    margin-bottom: 10px !important;
    display: block;
}

.pb-xxl {
    margin-bottom: 12rem !important;
}

/*Colors*/
.color-grad-bg {
    background: -webkit-linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    animation: gradient 5s ease infinite;
    background-size: 400% 400%;
}

.dark-grad-bg {
    background: #485563;
    background: -webkit-linear-gradient(to right, #29323c, #485563);
    background: linear-gradient(to right, #29323c, #485563);
}

.blue-grad-bg {
    background: #2980b9;
    background: -webkit-linear-gradient(to right, #2c3e50, #2980b9);
    background: linear-gradient(to right, #2c3e50, #2980b9);
}

.black-grad-bg {
    background: #232526;
    background: -webkit-linear-gradient(to right, #414345, #232526);
    background: linear-gradient(to right, #414345, #232526);
    animation: gradient 5s ease infinite;
    background-size: 400% 400%;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.dotted-bg {
    background-color: #ffffff;
    opacity: 1;
    background-image: radial-gradient(#000000 0.5px, #ffffff 0.5px);
    background-size: 10px 10px;
}

/*Nav*/
.nav-link {
    font-size: .9rem !important;
}

.nav-link:hover {
    color: rgb(13, 110, 253) !important;
}

.mobile-nav {
    display: none !important;
}

.navbar-toggler-icon {
    width: 1em !important;
    height: 1em !important;
}

/*Components*/
.card-tag {
    position: absolute;
    top: -35px;
    width: 160px;
    background-color: yellow;
    text-align: center;
    font-size: .75rem !important;
}

.divider {
    height: 2px;
    width: 90%;
    border: 0;
    border-radius: 999px;
    background: #ffffff;
    margin: 1.5rem 0;
}

/*Mobile*/
@media screen and (max-width: 950px) {

    .col-6-img {
        width: 100% !important;
        margin-bottom: 4rem !important;
    }

}

@media screen and (max-width: 600px) {

    .nav-link {
        font-size: 1.2rem !important;
    }

}

@media screen and (max-width: 550px) {

    .huge {
        font-size: 4rem !important;
    }

    .subtitle {
        font-size: 2rem !important;
    }

    .large {
        font-size: 2.5rem !important;
    }

    .portrait-bg {
        background-position: top;
    }

    .full-nav {
        display: none !important;
    }

    .mobile-nav {
        display: block !important;
    }

    .mobile-pt {
        padding-top: 0rem !important;
    }

    .mobile-pb {
        padding-bottom: 1rem !important;
    }

    .mobile-sides {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .modal-text {
        font-size: .9rem !important;
    }

}

@media screen and (max-width: 300px) {

    .huge {
        font-size: 2rem !important;
    }

    .subtitle {
        font-size: 1rem !important;
    }

    .large {
        font-size: 1.8rem !important;
    }

}