/* CSS VARIABLES EASY ACCESS */
:root {
    --color-primary: #0953BA;
    --color-light-blue: #306CBF;
    --color-dark-blue: #073F8C;
    --color-main-bg: #f8f9fa;
    --color-table-item: #CCE1FF;  
    --color-table-item-hover: #AACDFF;
    --navbar-bg: #FAF9F7;

    --dark-text-col: #1d3557;
    --hover-btn-col: #0B63DE;

    --black: black;
    --white: white;
    --red: red;
    --grey: grey;
    --yellow: yellow;
    --orange: orange;
    --purple: purple;
    --green: green;

    /* Gray Colors */
    --color-gray-light: #f0f0f0;
    --color-gray-border: #ccc;

    /* Green Colors */
    --color-light-green: #60DC54;

    /* Red Colors */
    --color-dark-red: #cc2f2f;
    --color-red-text: #ae5351;

    /* Box Shadow color*/
    --shadow-color: rgba(0, 0, 0, 0.1);
    
    /* Gradient Colors */
    --color-gradient-start: #457b9d;
    --color-gradient-end: #1d3557;

    --video-filter-brightness: 1;
}

body.dark-mode {
    /* --- Main Colors (Blue Palette) --- */
    --color-primary: #0953BA;
    --color-light-blue: #27579C;
    --color-dark-blue: #1E40AF;

    /* --- Backgrounds --- */
    --color-main-bg: #0F172A; /* Main body background */
    --color-table-item: #1B3AA1; /* Table row background */
    --color-table-item-hover: #142C78; /* Table row hover */
    --navbar-bg: #1E293B; /* Navbar background */

    /* --- Text Colors --- */
    --dark-text-col: #dadada; /* Primary text color */
    --hover-btn-col: #93C5FD; /* Bright button hover */

    /* --- Standard Color Inversions --- */
    --black: #f0f0f0;
    --white: #f0f0f0;
    --red: red;
    --grey: #868686;
    --yellow: #FACC15;
    --orange: #FB923C;
    --purple: #C084FC;
    --green: #4ADE80;

    /* --- Gray & Status Colors --- */
    --color-gray-light: #646c79; /* Neutral element background */
    --color-gray-border: #4B5563; /* Border color */
    --color-light-green: #60DC54; /* Success/Status green */
    --color-dark-red: #cc2f2f;
    --color-red-text: #ae5351;

    /* --- Effects & Gradients --- */
    --shadow-color: rgba(0, 0, 0, 0.5);
    --color-gradient-start: #4A99D4;
    --color-gradient-end: #0043c9;
    --color-scrollbar-gradient-start: #5f6a7a;
    --color-scrollbar-gradient-end: #52525a;
    --video-filter-brightness: 0.85;
}

/* GENERAL BEHAVIOURS*/
* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    user-select: none; /* Disable text selection */
    transition: all 300ms ease-in-out;
}
*, *::before, *::after {
  box-sizing: border-box;
}

h1, h2, h3, p, ul, li {
    margin: 0;
    padding: 0;
    text-decoration: none;
}

body {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    
    
    background-color: var(--main_bg_col);
}
html {
    scroll-behavior: smooth;
}
a {
    text-decoration: none;
}
/* CORRECT HOVER */

.default-cursor:hover {
    cursor: default;
}
.pointer-cursor:hover {
    cursor: pointer;    
}
.pointer:hover {
    cursor: pointer;
}

/* CORRECT BUTTONS */

.btn:hover {
    cursor: pointer;
}
.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    border: 1px solid var(--black);
    border-radius: 2rem;
    height: 50px;
    width: 150px;
    padding: 1rem;
    font-size: 12px !important;
    transition: all 300ms ease-in-out;
} .btn-2 {
    background-color: var(--color-primary);
    font-weight: 600;
    font-size: 16px;
    color: var(--white);
    border-color: transparent;
    transition: 150ms all ease-in-out;
} .btn-2:hover {
    background-color: var(--color-dark-blue);
    transition: 150ms all ease-in-out;
} .btn-1 {
    width: 80px;
    font-weight: 400;
    background-color: var(--white);
    border-color: var(--white);
    transition: all 300ms ease-in-out;
} .btn-1:hover {
    color: var(--hover-btn-col);
}




/* SCROLL BAR */

/* ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  position: absolute;
  background: var(--color-gray-light);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  position: absolute;
  background: linear-gradient(180deg, var(--color-scrollbar-gradient-start), var(--color-scrollbar-gradient-end));
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--grey);
  cursor: pointer;
} */

@media (max-height: 800px) {
  .main {
    height: calc(100vh - 80px);
  }
}
.msgBox{
    z-index: 100;
    display: none;
    justify-self: center;
    position: absolute;
    height: fit-content;
    width: fit-content;
    border: var(--red) solid 2px;
    background-color: transparent;
    border-left: none;
    border-right: none;
    opacity: 0;
    transition: all 300ms ease;
    bottom: 170px;

}
.msgBox.shown {
    display: flex;
    opacity: 0;
    animation: slidedown 3.5s forwards;
    transition: all 300ms ease;
}
#Msg {
    color: var(--red);
    padding: 0px;
    font-size: 20px;
    font-weight: 900;
}

@keyframes slidedown {
    0% {
        transform: translateY(70px);
        opacity: 0;
    }
    10% {
        transform: translateY(10px);
        opacity: 1;
    }
    90% {
        transform: translateY(10px);
        opacity: 1;
    }
    100% {
        transform: translateY(70px);
        opacity: 0;
    }
}