@import url('hover.css');

/********* VARIABLES *********/

:root{
    /* BASE STYLES */
    --bg-color: #faf9f6;  

    /* NAV STYLES */
    --nav-height: 10vh;  
    --nav-bg-color: #222222;

    /* ACCENT COLORS */
    --gray-color: #999999;
    --maroon-color: #7f0000;
    --blue-color: #00007f; 
}

/********* FONTS *********/

@font-face {
    font-family: bridgeOfficer;
    src: url(fonts/bridge-officer/bridgeofficer.ttf);
} 

@font-face {
    font-family: bridgeOfficerStraight;
    src: url(fonts/bridge-officer/bridgeofficerstraight.ttf);
} 

/********* GENERAL STYLES *********/

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

.hidden {
    display: none !important;
}

html, body, .container {
    width: 100%;
    height: fit-content;

    background-color: var(--bg-color);

    scroll-behavior: smooth;

    /* Hide Scrollbar */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

/* Hide Scrollbar */
html::-webkit-scrollbar, 
body::-webkit-scrollbar, 
.container::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

/********* HEADER STYLES *********/

.main-header {
    width: 100%;

    position: sticky;
    height: var(--nav-height);
    z-index: 10;
    top: 0;
}

.main-nav {
    width: 100%;
    height: var(--nav-height);

    padding: 1rem;

    background-color: var(--nav-bg-color);
    box-shadow: 0px 0px 100px 20px #000000;
    
    display: flex;
    align-items: center;
}


/* Left Nav */
.left-nav {
    width: 50%;
    height: 100%;
    
    display: flex;
    align-items: center;
    justify-content: left;
}

.nav-logo {
    width: 4rem;
}

/* Right Nav */
.right-nav {
    width: 50%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: right;
}

.nav-links {
    list-style-type: none;
    display: flex;
}

.nav-links li a {
    padding-left: 3rem;
    font-size: 1rem;
    text-decoration: none;
    color: #fff;
    font-family: BridgeOfficerStraight;
}

/********* ARTICLE STYLES *********/

.main-article {
    width: 100%;
    min-height: calc(100vh - var(--nav-height));
}

.page-section {
    min-height: 100vh;
}