:root {
	--background-color: #0D1B2A;
	--complement-color: #1B263B;
	--accent-color: #FFF2A0;
    --accent-color-opaque: rgba(255, 242, 160, 0.05); /* Adjust the opacity here */
	--text-color: white;
}

/* Effects all content within the website */
body {
    position: relative; /* Ensure the body is positioned relative for the pseudo-element */
    background: linear-gradient(to bottom, var(--background-color), var(--complement-color)); /* Gradient only */
    color: var(--text-color);
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/*body::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    background: url("Logo.png") repeat 0 0;*/
/*    background-size: 600px 600px;*/
/*    opacity: 1.0; */
/*    z-index: -1; */
/*}*/

/* Header Modifications */
h1 { color: var(--accent-color); }
h3, h4 { margin-right: 10px; }


/* Colors */
.primaryColor { color: var(--background-color); }
.complementColor { color: var(--complement-color); }
.accentColor { color: var(--accent-color); }

/* Containers within the body */
.portfolio-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.projects-and-socials {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.projects-and-socials h1 {
    text-align: center;
}

.project, .social {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin-bottom: 10px;
}

.project h2, .social h2 {
    flex: 0 0 auto;
}

.project h3, .social h3 {
    flex: 0 0 auto;
    margin-right: 10px;
}

.project p, .social p {
    flex: 1 1 auto;
}

a.project-link, a.social-link {
    color: inherit; /* Ensures links inherit the current text color */
    text-decoration: none; /* Removes underline from links */
    width: 100%; /* Makes the link fill the width of the container */
    display: block; /* Ensures the link covers the entire container area */
    position: relative;
    transition: background-color 0.3s ease;
}

a.project-link:hover, a.social-link:hover {
    color: var(--accent-color);
}

a.project-link:hover::before, a.social-link:hover::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw; /* Full viewport width */
    height: 100%; /* Full height of the container */
    background-color: var(--accent-color-opaque); /* Background color with opacity */
    z-index: -1; /* Place behind the content */
}

@media (max-width: 600px) {
    .projects-and-socials {
        width: 90%;
    }

    .project, .social {
        flex-direction: column;
        align-items: flex-start;
    }

    .project h2, .social h2 {
        margin-bottom: 5px;
    }

    .project p, .social p {
        margin-bottom: 10px;
    }
}

.headshot {
	border-radius: 50%;
	width: 200px;
	height: 200px;
	object-fit: cover;
	margin-bottom: 10px;
	border: 5px solid var(--complement-color);
}