* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing:content-box;
}

body {
    margin: 0; /* Reset default margin */
    padding: 0; /* Reset default padding */
    width: 100vw; /* Set the width to 100% of the viewport width */
    height: 100vh; /* Set the height to 100% of the viewport height */
    background-image: url("Images/background_real_darker.jpg"); /* Set the background image */
    background-size: 100% 100%; /* Make the background image cover the entire element */
    background-position: center; /* Position the background image at the center */
    color: #ffffffda; /* Set the text color */
}

/*HEADER*/

.head-container {
    padding-left: 2rem;
    padding-top: 0.5rem;
}

.buttons-container-header {
    padding: 2rem 3%; /*Top&Bottom, Left&Right*/
}

header nav {
    display: flex;
    align-items: center;
    justify-content: space-between; /*Aligns flex items along the main axis of the current line of the flex container.*/
    flex-wrap: wrap;
}

header nav ul li {
    display: inline-block; /*Put it in a list but horizontally*/
    list-style: none;
    margin-left: 15px;
}

header nav ul li a {
    color: #ffffffda;
    text-decoration: none;
    font-size: 18px;
    position: relative;
}

/*for the line below the nav*/

header nav ul li a::after{
    content: '';
    width: 0;
    height: 3px;
    background: #9f9f9f;
    position: absolute;
    left: 0;
    bottom: -6px;
    transition: 0.5s;
}

/*enable the line just when the cursor is there*/
header nav ul li a:hover::after{
    width: 100%;
}

/*end for the line below the nav*/

/*END HEADER*/


/*MAIN*/

.buttons-container-main {
    padding: 0rem 4rem; /*Top&Bottom, Left&Right*/
}

main ul li a {
    color: #ffffffda;
    text-decoration: none;
    font-size: 18px;
    position: relative;
}

.personal-info {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translate(-15%, -12%);
}


/*END MAIN*/


/*FOOTER*/
footer p {
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translate(4%, 0%);
}
/*END FOOTER*/