body, html {
    background-image: url('./images/white-background.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Oxanium', sans-serif;
}

body {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    height: 100%;
}



/* header bar section */

header {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 200px; /* Adjust width as needed */
    overflow-y: auto; /* Allows scrolling if content exceeds viewport height */
    
}


/* nav bar section */



nav {
    height: 100%; 
    background-color: #2C4E49; /* Background color for the nav */
    display: flex;
    justify-content: center; /*horizontal*/
    align-items: center; /*vertical*/
    position: sticky;
    top: 0;
    z-index: 1000; /* Ensure it's above other content */
}


nav ul {
    display: flex;
    flex-direction: column;
    margin: 0;
    list-style-type: none;
    padding-top: 0px;
}


nav ul li {
    margin: 0 20px;
}


nav ul li a {
    text-decoration: none;
    padding: 15px 10px; /*changes spacing between the links */
    display: flex;
    color: whitesmoke;
}

#LinkedIn{
    height: 50px;
    width: auto;
}

#GitHub{
    height: 40px;
    width: auto;
    margin-left: 5px;
}

nav ul li a:hover {
    background-color: #2C4E49;
    color: aliceblue;
    
}


/* main */
main {
    margin-left: 200px; /* match width of header */
    padding: 20px;
    display: flex;
    flex-direction: column;
    width: calc(100% - 200px); /* Take remaining width after considering header */
    overflow-x: auto;
}



/* contact us */

#contact-us {
    padding-top: 20px;
    margin: 20px;
}

#contact-us-title {
    text-align: center;
    background-color:#2C4E49;
    color: aliceblue;
    padding-top: 20px;
    padding-bottom: 10px;;
}

#contactForm input {
    padding: 5px;
}

#contact-us-text {
    padding: 15px;
    text-align: center;
    border-bottom: red 2px solid;
}

/* form section */


form {
    display: flex;
    flex-direction: column;
}

form input, textarea {
    padding: 5px;
    margin:0px 25px;
}