:root {
    --primaryFont: "Hacked", "Montserrat", sans-serif;
    --highlightColor: #B3E10D;
    --disabledColor: #888888;
    --primaryBackgroundColor: #21211F;
}

* {
    font-family: var(--primaryFont);
}

a, button,.clickable {
    cursor: url('../img/cursor.cur') 0 0, pointer !important;
}

.navbar {
    background-color: transparent;
    transition: background-color 0.3s ease-in-out;
}

.navbar-toggler {
    background-color: white;
    color: white;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.7) !important;
}

.nav-link {
    font-size: 1.5rem;
    --bs-nav-link-color: white;
    --bs-nav-link-hover-color: var(--highlightColor);
    --bs-nav-link-disabled-color: var(--disabledColor);
}

.nav-link.active {
    color: var(--highlightColor) !important;
}

.dedsec-video,.about-video {
    max-height: 695px;
    width: 100%;
    object-fit: cover;
    object-position: center center;
}


.btn {
    --bs-btn-border-width: 3px;
    width: 150px !important;
}

.btn-primary {
    --bs-btn-color: var(--primaryBackgroundColor);
    --bs-btn-bg: white;
    --bs-btn-border-color: var(--primaryBackgroundColor);
    --bs-btn-hover-color: white;
    --bs-btn-hover-bg: var(--primaryBackgroundColor);
    --bs-btn-hover-border-color: var(--primaryBackgroundColor);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--primaryBackgroundColor);
    --bs-btn-active-bg: var(--highlightColor);
    --bs-btn-active-border-color: var(--primaryBackgroundColor);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--disabledColor);
    --bs-btn-disabled-border-color: var(var(--primaryBackgroundColor))
}

.window-card {
    border: 5px solid rgba(2, 2, 2, 1);
    scale: 0;
}

.window-card.pop-animation {
    animation: pop 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

.window-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 5px solid rgba(2, 2, 2, 1);
    background-color: var(--highlightColor);
}

.propaganda {
    background-color: var(--primaryBackgroundColor);
    color: white;
}

.left-upper-card {
    min-height: 210px;
    max-height: 210px;
    height: auto;
}

.left-mid-card {
    height: 387px;
}

.left-bottom-card {
    height: 307px;
}

.right-upper-card {
    height: 275px;
}

.right-mid-card {
    height: 360px;
}

.right-bottom-card {
    height: 269px;
}

.vision-main {
    font-size: 6rem;
}

.vision {
    font-size: 4rem;
}

.council-dedsec {
    background: url('../img/dedsecCouncil.webp');
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    max-height: 695px;
    min-height: 250px;
}

.bg-members {
    background: url('../img/councilBackground.webp') no-repeat center center;
    background-size: cover;
}

.btn-members {
    max-height: 100px;
    width: 100px;
    margin-bottom: 20px;
    background-color: transparent;
    border: none;
}

.btn-members img {
    object-fit: cover;
    object-position: center center;
}

.left-message {
    position: absolute;
    top: 15%;
    left: 5%;
    max-width: 30%;
    min-width: 100px;
    height: auto;
}

.right-message {
    position: absolute;
    bottom: 15%;
    right: 5%;
    max-width: 30%;
    min-width: 100px;
    height: auto;
}

.gallery {
    animation: none;
}

.gallery:hover {
    animation: zoom-in 0.5s ease-in-out forwards;
}

.shadow-text {
    z-index: 1;
    text-shadow:
        -5px -5px 0 black,
        5px -5px 0 black,
        -5px 5px 0 black,
        5px 5px 0 black;
}

@media (max-width: 768px) {
    .dedsec-footer {
        display: none !important;
    }
}

@media (max-width: 576px) {
    .dedsec-links {
        display: none !important;
    }

    .dedsec-copy {
        text-align: center;
        width: 100%;
    }
}