@font-face {
    font-family: "Bungee";
    src: url(../fonts/Bungee/Bungee-Regular.ttf);
}

@font-face {
    font-family: "Kanit";
    src: url(../fonts/Kanit/Kanit-Regular.ttf);
}

@font-face {       
    font-family: "Kanit-Light";
    src: url(../fonts/Kanit/Kanit-Light.ttf);
}

body{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    display: flex;
    flex-direction: column;
    background-color: #1a1a1a;
    color: #e9e9e9;
    font-family: "Kanit-Light";
    width: 100%;
    height: 100%;



.header{

    display: flex;
    flex-direction: row;
    width: auto;
    height: auto;
    background-color: #272727; 
    align-items: center;
    margin: 0%;
    padding: 0%;

    .headerTitle{
        position: relative;
        left: 2%;
        top: 2%;
        color: #ffffff;
        font-family: "Bungee";
        padding: 0% 35px 0% 0%;
        margin: 0%;
        border-right: 5px solid #2e2e2e;
    };

    .headerNav{
    position: relative;
    left: 3%;
    top: 2%;
    
        .headerMenu{
            font-family: "Kanit";
            list-style: none;
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            align-items: center;
            background-color: #2e2e2e;
            padding: 15px 0%;
            border-radius: 15px;

            a{
                color: #d6d6d6;
                padding: 20px;
                text-decoration: none;
            };

        };
    };

    #headerMail{
        position: absolute;
        right: 2%;
        font-family: "Bungee";
        font-size: 20pt;
        border-left: 5px solid #2e2e2e;
        background-clip: content-box;
        padding: 0.5% 2%;
        margin: 0% 0% 0% 0%;
    };

}

.main{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    height: 100%
};

#mainWellcome{
    background-color: #3b3b3b;
    color: #ffffff;
    font-family: "Bungee";
    font-size: 28pt;
    width: 100%;
    padding: 1.5% 0%;
    margin: 0%;
    display: flex;
    justify-content: center;
    align-items: center;
};

#mainConstruct{
background-color: #bd9355;
color: black;
width: 100%;
margin: 0%;
padding: 25% 0%;
display: flex;
justify-content: space-around;
align-items: center;
font-size: 45%;
font-family: monospace;
};

.footer{
    position: relative;
    bottom: 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 1% 0%;
    background-color: rgb(19, 19, 19);
    font-family: monospace;
    font-weight: 650;
    color: #3b3b3b;
};

};