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;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}


body {
    display: flex;
    flex-direction: column;
    margin: 10px;
}


/* header section */

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


/* nav bar section */

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


nav ul {
    list-style-type: none;
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
}


nav ul li {
    margin: 20px 0;
}


nav ul li a {
    text-decoration: none;
    padding: 15px 10px;
    display: flex;
    color: whitesmoke;
}

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

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

nav ul li a:hover {
    background-color: #7b6369;
    color: white;
}




/* main and introduction section */

main {
    margin-left: 10rem; /* match width of header */
    display: flex;
    flex-direction: column;
    text-align: end;
    width: calc(100% - 10rem); /*Take remaining width after considering header */
    overflow-x: auto;
}


#introduction {
    margin-top: 8rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-bottom: 2rem;
    width: 100%;
    
}

#introduction h1 {
    font-size: xx-large;
}



/* hr section appropriate styling to ensure it is visible */
hr {
    margin: 10px 0; 
    border: none;
    border-top: 3px solid #ccc; 
}

/* footer section */

footer {
    display: flex;
    justify-content: flex-end;
    /* align-items: baseline; */
}

footer p {
    padding-top: 4rem;
    padding-bottom: 0rem;
}



/* responsive design */

    /* For tablets and smaller devices */
    @media (max-width: 768px) {

        body {
            flex-direction: column;
        }

        nav ul {
            flex-direction: column;
            align-items: flex-start;
        }

        main {
            margin-left: 0;
            width: 100%;
        }    

        #introduction {
            padding: 10px;
        }
    }

    /* For mobile phones */
    @media (max-width: 480px) {
        
        html {
            font-size: 14px;
        }
        /* standardised element CSS */
        
        body {
            flex-direction: column;
            margin: 0;
        }

        header {
            position: static;
            height: 15%;
            width: 100%;
        }
        
        #nav-container {
            width: 100%;
        }

        nav ul {
            display: flex;
            flex-direction: row;
        }

        nav ul li {
            margin: 0 5px;
            padding-top: 25px;
        }
        
        nav ul li a {
            padding: 0px;
            font-size: 14px;
            margin: 0 2px;      
        }

    

        #introduction img {
            max-width: 100%;
            height: auto;
        }

        #LinkedIn{
            height: 25px;
            width: auto;
           
        }
        
        #GitHub{
            height: 20px;
            width: auto;
            margin-left: 5px;
        }

        /* main */
        main {
            width: 100%;
            overflow-x: hidden;
            padding-right: 10px;
            margin-right: 40px;
        }
       

        /* CSS of personalized main elements */

        #introduction {
            margin-top: 0.5rem;
        }
        #introduction h1{
            margin: 0.3rem;
            padding: 0.5rem;
        }

        #introduction h3{
            margin-bottom: 2rem;
    
        }

    }