/* Custom styles for the website */

:root {
    --body-color: #0e0f0f;
    --highlight-color: #0077ff;
    --theme-color: #122d58;
}

body {
    background-color: var(--body-color);
    color: black;
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
}

.navbar {
    background-color: var(--theme-color) !important;
}

.navbar-brand,
.nav-link {
    color: black !important;
}

.nav-link:hover {
    color: var(--highlight-color) !important;
}

.bigfont {
    font-size: 2.5rem;
    font-weight: 600;
}

.btn-theme {
    background-color: var(--highlight-color);
    color: white;
    transition: background-color 0.3s, color 0.3s;
}

.btn-theme:hover {
    background-color: white;
    color: var(--highlight-color);
}

.homelogo {
    max-width: 100%;
    height: auto;
}

.underline-theme {
    text-decoration: underline solid var(--highlight-color);
}

.codestackunderline {
    text-decoration-color: var(--highlight-color);
}

.headerimagehome {
    background: url('/assets/bannerimage.jpg') center center / cover no-repeat;
    height: 400px;
    position: relative;
}

.middlecontenthome {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
}

.hovertitlemain:hover {
    color: var(--highlight-color);
    transition: color 0.3s;
}

.borderradius {
    border-radius: 10px;
}

.highlight {
    color: var(--highlight-color);
    font-weight: 500;
}

.highlighta {
    color: var(--highlight-color);
    text-decoration: none;
    transition: color 0.3s;
}

.highlighta:hover {
    color: white;
}

.centertextmobile {
    text-align: center;
}

@media (max-width: 768px) {
    .bigfont {
        font-size: 2rem;
    }

    .headerimagehome {
        height: 250px;
    }
}