*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --white: #ffffff;
    --white-smoke: #f5f5f5;
    --red-dark: #c21f22;
    --red-bright: #e3371e;
    --blue-dark: #0c1220;
    --blue-darker: #010b13;
}

/*_______________BeVietnamPro_______________*/

@font-face {
    font-family: BeVietnamProEL;
    src: url(/fonts/BeVietnamPro/1_BeVietnamProExtraLight.ttf);
}

@font-face {
    font-family: BeVietnamProL;
    src: url(/fonts/BeVietnamPro/2_BeVietnamProLight.ttf);
}

@font-face {
    font-family: BeVietnamProR;
    src: url(/fonts/BeVietnamPro/3_BeVietnamProRegular.ttf);
}

@font-face {
    font-family: BeVietnamProM;
    src: url(/fonts/BeVietnamPro/4_BeVietnamProMedium.ttf);
}

@font-face {
    font-family: BeVietnamProSB;
    src: url(/fonts/BeVietnamPro/5_BeVietnamProSemiBold.ttf);
}

@font-face {
    font-family: BeVietnamProB;
    src: url(/fonts/BeVietnamPro/6_BeVietnamProBold.ttf);
}

@font-face {
    font-family: BeVietnamProEB;
    src: url(/fonts/BeVietnamPro/7_BeVietnamProExtraBold.ttf);
}

@font-face {
    font-family: BeVietnamProBl;
    src: url(/fonts/BeVietnamPro/8_BeVietnamProBlack.ttf);
}

body::-webkit-scrollbar {
    display: none;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* margin: 0; */
    background-color: var(--white-smoke);
    color: var(--blue-darker);
    font-family: BeVietnamProL;

    #nav {
        display: flex;
        width: 75%;
        height: 5rem;
        margin: auto;
        align-items: center;
        justify-content: space-evenly;

        a {
            font-family: BeVietnamProEB;
            color: var(--orange-lighter);
            font-size: 1.25rem;
            text-transform: uppercase;
            letter-spacing: 0.75rem;
            text-indent: 0.75rem;
            list-style-type: none;
            text-decoration: none;
            /* margin-block:1rem; */
        }

        a:hover {
            background: var(--red-dark);
            color: var(--white);
            border-radius: 5px;
        }

        /*         .active {
            border-top: solid 3px var(--red-dark);
            border-bottom: solid 3px var(--red-dark);
        } */

        .active {
            background-color: var(--red-dark);
            color: var(--white);
            border-radius: 5px;
        }
    }
}