@charset "UTF-8";


@font-face {
    .xanh-mono-regular {
    font-family: "Xanh Mono", monospace;
    font-weight: 400;
    font-style: normal;
}

}

:root{

    --font-xanh: "Xanh Mono", monospace;

    --color1: #ebe5d9;
    --color2: #d8c9b6;
    --color3: #abad97;
    --color4: #687540;
    --color5: #584638;
    --color6: #314430;

    --box_shadow: 1px 1px 5px rgba(0, 0, 0, 0.278);

    --z-tooltip:10;
    --z-fixed:100;

}

* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

body {
    background-color: var(--color2);
    width: 100%;
}

p, h1, h2 {
    font-family: garamond, serif;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}


/*================REUSABLE CSS CLASSES==============*/

.container {
    max-width: 1120px;
    margin-inline: 1.5rem;
}



/*===================HEADER==================*/

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--color2);
    box-shadow: var(--box_shadow);
    z-index: var(--z-fixed);
}




/*====================NAV==================*/

.nav {
    height: 72px;
}


.nav__data {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav__logo {
    display: inline-flex;
    align-items: center;
    column-gap: .25rem;
    font-family: var(--font-xanh);
}

.nav__logo > img {
    height: 72px;
    width: 72px;
}

.nav__toggle {
    position: relative;
    width: 32px;
    height: 32px;

}

.nav__burger, 
.nav__close {
    color: var(--color5);
    position: absolute;
    width: max-content;
    height: max-content;
    inset: 0;
    margin: auto;
    font-size: 1.25rem;
    cursor: pointer;
    user-select: none;
    transition: opacity .1s, transform .4s;
}

.nav__close{
    opacity: 0;
}

/*================NAV MENU===============*/