@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300;400;500;600;700&family=Poppins:wght@200;300;400;500;600;700;800&family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=42dot+Sans:wght@300..800&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: 0.3s ease-out;
}

a {
    text-decoration: none;
}

html {
    scroll-behavior: smooth;
}

:root {
    --head-font: 'Josefin Sans';
    --text-font: 'Poppins';
    --timer-font: 'Ubuntu Mono';
    --primary: crimson;
    --primary-dull: rgb(183, 11, 45);
    --accent: orange;
    --accent-dull: rgb(222, 145, 2);
    --text: black;
    --text-dull: rgb(80, 80, 80);
    --bg: white;
    --bg-dull: rgb(245, 245, 245);
    --shadow: rgb(0, 0, 0, 0.1);
    --reverse: rgb(225, 225, 225);

    /* uniform-values */
    --active: rgb(0, 200, 0);
    --active-bg: rgb(0, 200, 0, 0.2);
    --upcoming: orange;
    --upcming-bg: rgb(255, 166, 0, 0.2);
    --ended: red;
    --ended-bg: rgb(255, 0, 0, 0.2);
    --glow: rgb(0, 0, 0, 0.25);
    --theme: invert(0);
}



/* :root {
    --head-font: 'Josefin Sans';
    --text-font: 'Poppins';
    --timer-font: 'Ubuntu Mono';
    --primary: crimson;
    --primary-dull: rgb(183, 11, 45);
    --accent: orange;
    --primary-dull: rgb(183, 11, 45);
    --text: white;
    --bg: black;
    --text-dull: rgb(150, 150, 150);
    --bg-dull: rgb(20, 20, 20);
    --shadow: rgba(255, 255, 255, 0.1);
    --reverse: rgb(50, 50, 50);

    --active: rgb(0, 200, 0);
    --active-bg: rgb(0, 200, 0, 0.2);
    --upcoming: orange;
    --upcoming-bg: rgb(255, 166, 0, 0.2);
    --ended: red;
    --ended-bg: rgb(255, 0, 0, 0.2);
    --glow: rgb(250, 250, 250, 0.7);
    --theme: invert(1);
} */


body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--text-font);
    transition: background 0.3s ease-out, color 0.3s ease-out;
}



/*-- scroll styling */

::-webkit-scrollbar {
    width: 4px;
    border-radius: 10px;
    height: 0px;
    margin: 0px 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-dull);
    margin: 0px 20px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dull);
}

/* -------------------- */

/* GLOBAL-ERROR-INFO-MSG---- */
.global-message {
    position: fixed;
    z-index: 1000;
    bottom: 80px;
    right: 20px;
    font-size: 14px;
    font-family: var(--text-font);
    padding: 15px 20px;
    text-align: center;
    border-radius: 5px;
    background: var(--bg);
    font-weight: 500;
    animation: messagePop 0.3s ease-in-out;
    color: white;
    box-shadow: 0px 0px 5px var(--shadow);
}

#global-info {
    display: none;
    background: var(--active);
}

#global-error {
    display: none;
    background: var(--ended);
}

@keyframes messagePop {
    0% {
        transform: translateX(100px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}