* {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    
     :root {
        --primary-color: #880808;
        --secondary-color: #000000;
        --thirdary-color: #E63024;
        --for-color: #7A0831;
        --embers-color: #FF5C49;
        --deep-shadow: #090708;
        --footer-color: #00044183;
        --text-color: #ffffff;
        --max-width: 1100px;
        a {
            text-decoration: none;
        }
    }
    
    html {
        scrollbar-width: none;
    }
    
    body {
        font-family: Arial, sans-serif;
        color: var(--text-color);
        background-color: var(--secondary-color);
    }
    
    header {
        width: 100%;
        height: 75px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    main {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    
    footer {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    
    .leftFooter {
        max-width: var(--max-width);
        width: 100%;
        background-color: var(--footer-color);
        padding: 20px 50px 35px 90px;
        border-top: 1px solid white;
        border-top-left-radius: 6px;
        border-top-right-radius: 9px;
        display: flex;
        flex-direction: row;
        gap: 20px;
    }
    
    .titlePagefooter {
        width: 10%;
        font-size: 25px;
        font-weight: bold;
        font-style: normal;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    .contentPage {
        width: 90%;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }
    /* Contents */
    
    .containerHeader {
        width: 100%;
        height: 70px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: row;
        gap: 15px;
        backdrop-filter: blur(5px);
        position: fixed;
        top: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    }
    
    .logoPage {
        max-width: 25%;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 10px;
        cursor: none;
    }
    
    .titlePage {
        font-size: 25px;
        font-weight: bold;
        font-style: normal;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    .nav {
        width: 50%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }
    
    .UserInterface {
        width: 25%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }
    
    .logoPage img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
    
    .UserInterface a {
        width: 80px;
        text-decoration: none;
        color: var(--text-color);
        background-color: darkred;
        text-align: center;
        padding: 10px 0;
        border-radius: 8px;
        &:hover {
            background-color: #ff0101;
        }
    }
    
    .nav a {
        width: 100px;
        text-decoration: none;
        color: var(--text-color);
        background-color: darkred;
        text-align: center;
        padding: 10px 0;
        border-radius: 8px;
        &:hover {
            background-color: #ff0101;
            border-bottom: 1px solid transparent;
        }
    }
    
    .nav .active {
        background-color: #fc2d2da6;
    }
    
    .subtilePage {
        max-width: var(--max-width);
        width: 100%;
        height: 85vh;
        padding: 20px;
        margin: 10px 0;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.877);
        border-bottom: 1px solid rgba(255, 255, 255, 0.877);
        background-color: #00044183;
    }
    
    .container {
        max-width: var(--max-width);
        width: 100%;
    }
    
    .columnCont {
        display: flex;
        flex-direction: column;
        /* padding-left: 60px; */
        margin-bottom: 20px;
        gap: 10px;
    }
    
    .rowCont {
        height: 350px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap row;
        gap: 10px;
        overflow: auto;
        scroll-behavior: smooth;
        scrollbar-color: #880808 #FF5C49;
        scrollbar-base-color: #FF5C49;
        scrollbar-gutter: stable;
    }
    
    .rowCont::-webkit-scrollbar-thumb:hover {
        background: #a80505;
        /* Color on hover */
    }
    
    .rowCont::-webkit-scrollbar-track {
        background: #440000;
        /* Color of the tracking area */
        border-radius: 4px;
    }
    
    .rowCont::-webkit-scrollbar {
        width: 10px;
        /* Width of vertical scrollbar */
        height: 10px;
        /* Height of horizontal scrollbar */
    }
    
    .LabelContent {
        font-size: 22px;
        font-family: Georgia, 'Times New Roman', Times, serif;
        border-bottom: 1px solid white;
        width: fit-content;
    }
    
    .cards {
        display: flex;
        justify-content: center;
    }
    
    .card {
        width: 280px;
        height: 300px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #a50000;
        padding: 8px;
        border-radius: 8px;
    }
    
    .card img {
        width: 260px;
        height: 150px;
        object-fit: cover;
        border-radius: 8px;
    }
    /* HTML: <div class="loaderSite"></div> */
    
    .loaderSite {
        width: 28px;
        aspect-ratio: 1;
        display: grid;
        border: 2px solid #0000;
        border-radius: 50%;
        border-color: #c5c5c5 #0000;
        animation: l16 1s infinite linear;
    }
    
    .loaderSite::before,
    .loaderSite::after {
        content: "";
        grid-area: 1/1;
        margin: 1px;
        border: inherit;
        border-radius: 50%;
    }
    
    .loaderSite::before {
        border-color: #f03355 #0000;
        animation: inherit;
        animation-duration: .5s;
        animation-direction: reverse;
    }
    
    .loaderSite::after {
        margin: 4px;
    }
    
    @keyframes l16 {
        100% {
            transform: rotate(1turn)
        }
    }