:root{
    --page-background: #101513;
    --card-background: #1f2937;
    --container-background: #232522;
    --container-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
    --overlay-background: rgb(46, 46, 46);
    --heading-text: #f5fff9;
    --body-text: #dde7e3;
    --input-background: #232522;
    --input-border: #4b5563;
    --input-focus-border: #2bd49b;
    --primary-button-background: #18b177;
    --primary-button-text: #ffffff;
    --error-color: #dc2626;
    --danger-color: #f87171;
    --success-color: #0f7c52;

    --bg-dark: #101513;
    --bg-dark-transparent: rgba(20, 24, 22, 0.82);
    --bg: #101513;
    --bg-light: #1b2421;
    --bg-light-hover: #23302c;
    --text: #f0f7f3;
    --text-muted: #e5e7eb;
    --text-muted-2: #cbd5e1;
    --text-muted-3: rgba(203, 213, 225, 0.3);
    --highlight: #4b5563;
    --border: #4b5563;
    --border-muted: #374151;
    --primary: #18b177;
    --secondary: #0f7c52;
    --warning-yellow:#fbbf24;

    --border-green:rgba(24, 177, 119, 0.2);
    --border-blue:rgba(34,211,238,.18);

    --nav-width: 230px;
    --nav-bg: rgba(11, 15, 14, 0.78);
    --nav-border: rgba(16, 185, 129, 0.16);
    --card-bg: rgba(20, 20, 26, 0.42);
    --card-border: rgba(16, 185, 129, 0.22);
    --green: #18b177;
    --green-dark: #0f7c52;
    --green-dim: rgba(24, 177, 119, 0.14);
    --text-primary: #f5fff9;
    --text-muted: #b6c8c0;
    --input-bg: rgba(20, 20, 26, 0.5);
    --row-hover: rgba(24,177,119,0.08);
    --danger: #f87171;

    --button-color-light: #16a06b;
    --button-color: #126341;
    --button-color2: #126341;

    --turquoise-blue:#53d9d0;

    --font-size: 16px;

}

body{
    margin: 0;
    padding: 0;
    background:
        radial-gradient(circle at top right, rgba(24, 177, 119, 0.14), transparent 24%),
        linear-gradient(180deg, #101513 0%, #131917 100%);
    font-family: Arial, sans-serif;
}

.background {
    position: fixed;
    width: 100%; height: 100%;
    background-image: url('../STYLES/resources/bg.jpg');
    background-repeat: no-repeat;
    background-size: 300%;;
    z-index: -2;
}

.blur {
    position: fixed;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(42px);
    background: linear-gradient(180deg, rgba(6, 12, 10, 0.62), rgba(8, 12, 11, 0.78));
    z-index: -1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}



.footer {
    background-color: var(--bg-dark-transparent);
    color: var(--text-muted);
    padding: 30px 0 30px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2vh;
}

.footer .ft_top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2vh;
}

.footer .ft_top_logo {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: var(--text);
    font-size: 1.5em;
    gap: 15px;
}

.footer .ft_middle_sections {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 3vw;
}


.footer .ft_botttom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2vh;
}

.footer .ft_bottom_links {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 30px;
}
.footer .ft_bottom_links i {
    color: var(--text);
}

.footer .ft_bottom_links div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 50px;
    background-color: var(--bg-light);
    border-radius: 100%;
}

.footer .ft_bottom_links div:hover {
    cursor: pointer;
    background-color: var(--bg-light-hover);
    transition: 300ms ease-in-out;
}

.footer .ft_bottom_copyright {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-muted-2);
}