/* BODY BACKGROUND COLOR */
:root {
    --bs-body-bg: #000;
}

#main {
    padding-top: 2rem;
}

.technologies-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* This creates a grid with 6 columns */
    gap: 10px;  /* This adds grid space (gutters) */
    justify-items: center; /* This centers items horizontally */
    align-items: center; /* This centers items vertically */
}

.svg-icons {
    width: 48px;
    height: 48px;
}

.justify-text {
    text-align: justify;
    text-justify: inter-word;
}

.text-secondary {
    --bs-text-opacity: 0.5;
    color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}

@media (min-width: 992px) {
    #main {
        padding-top: 4.5rem;
        padding-bottom: 0;
    }
}

/* CUSTOM FONT FOR TITLE */
@font-face {
    font-family: "Baier Font";
    src:
    url("fonts/Jaapokkisubtract-Regular.otf") format("opentype");
    url("fonts/jaapokkisubtract-regular-webfont.woff") format("woff");
}

.navbar-brand{
    font-family: "Baier Font", serif;
}

/* CUSTOM MENU BUTTON @Mobile */
.hs-bg-primary {
    background-color: #6c757d;
}

/* NAVBAR */
@media (min-width: 992px) {
    #mainNav .navbar-nav li.nav-item a.nav-link {
        color: #fff;
        border-bottom: 2px solid transparent;
        transition: border-bottom .2s, color .2s;
    }
}

#mainNav .navbar-nav li.nav-item a.nav-link:hover {
    color: #6c757d;
    border-color: #6c757d;
}

#mainNav .navbar-nav li.nav-item a.nav-link.active {
    background: none;
    color: #fff;
    border-color: #6c757d;
}

#mainNav .navbar-nav li.nav-item a.nav-link.active:hover {
    background: none;
    color: #6c757d;
}

.navbar-right li a {
    text-align: right;
}

.break-long-words {
    word-break: break-all;
}

.masthead {
    padding-top: 6rem;
}

@media (min-width: 992px) {
    .masthead {
        padding-top: 6rem;
    }
}

a {
    color: #fff;
    text-decoration: underline;
}

a:hover {
    color: #6c757d;
    text-decoration: underline;
}

.btn-primary {
    color: #fff;
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
    border-color: grey;
}
.btn-primary:hover {
    color: #fff;
    background-color: red;
    border-color: #000;
}

.btn-check:focus + .btn-primary, .btn-primary:focus {
    color: #fff;
    background-color: #16a085;
    border-color: #fff;
    box-shadow: 0 0 0 0.25rem rgba(60, 198, 171, 0.5);
}
.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #15967d;
    border-color: #fff;
}
.btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(60, 198, 171, 0.5);
}
.btn-primary:disabled, .btn-primary.disabled {
    color: #fff;
    background-color: red;
    border-color: red;
}

.portfolio .portfolio-item .portfolio-item-caption {
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.25s ease-in-out;
    opacity: 0;
    background-color: rgba(108, 117, 125, 0.75);
}