/*Custom font*/
@font-face {
    font-family: 'Shermlock';
    src: url(../assets/fonts/Shermlock.ttf);
}
@font-face {
    font-family: 'ShermlockOpen';
    src: url(../assets/fonts/ShermlockOpen.ttf) format("truetype");
}

/*****************************
********DESKTOP DESIGN********
*****************************/

/* For ALL of the page */
body{
    /* background-color: rgb(193, 149, 84); */

    height: auto;
    
    /* Font */
    font-family: 'Shermlock';
    text-align: center;

    /* Prevent any empty borders */
    margin: 0;

    /* Flexbox */
    display: flex;
    flex-direction: column;

    /* Make sure the body is always 100% of the viewport */
    min-height: 100vh;

    /* border: solid 2px red; */
}

h1 {
    /* Font */
    font-family: 'ShermlockOpen';
    color: rgb(0, 0, 0);

    background-color: rgb(255, 255, 255);
}

/* NavBar using FlexBox */
#NavBar {
    /* Sticky: always showing at the very top */
    /* Maybe don't want it sticky? idk, we'll see */
    /* position: sticky; */

    background-color: rgb(167, 167, 143);
    height: 70px;

    display: flex;
    gap: 3vh;

    /* border: solid 2px green; */
}
.NavItem{
    
    align-self: center;

    /* border: solid 2px red; */
}
.NavItem > a {
    /* Font */
    color: rgb(0, 0, 0);
    font-size: 20px;
    /* Remove underline */
    text-decoration: none;
}
.NavItem > a:hover {
    color: rgb(100, 100, 100);
    text-decoration: 3px underline;
}
.HomeNavItem{
    margin-right: 30vh;
    margin-left: 10vh;
}
.HomeNavItem > a {
    /* Font */
    color: rgb(0, 0, 0);
    font-size: 20px;
    /* Remove underline */
    text-decoration: none;
}
.HomeNavItem > a:hover {
    color: rgb(100, 100, 100);
    text-decoration: 3px underline;
}
#NavSocial{
    padding-left: 100px;
    display: flex;
    gap: 2vh;
}
.NavSocialItem {
    /* border: solid 2px red; */
}





#MainContent {
    flex: 1;

    /* border: solid 2px red; */
}

/* For the currently displayed message of "Under Construction */
#TemporaryMessage {

    /* border: solid 2px red; */
}








/* Footer class */
.mainFooter {
    background-color: rgb(239, 239, 226);
    
    /* Font */
    font-family: 'ShermlockOpen';
    font-size: large;
    color: black;
}


/*****************************
********MOBILE DESIGN********
*****************************/
@media screen and (max-width: 600px) {
    body{
        font-size: 28px;
    }
}