*{
    margin: 0;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
:root {
    --color-primary: #228B22; /* Forest Green */
    --color-secondary: #F5DEB3; /* Warm Cream */
    --color-accent: #006400; /* Darker Green */
    --color-accent2:#2aad8d;
    --head-font: 'Oswald', sans-serif;
    --text-font: 'EB Garamond', serif;
    --text-font-size: 1.35rem;
  }  
/* Default body styles */
body {
    /* Light mode gradient */
    overflow-x: hidden;
    position: relative;
    width: 100%;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.light {
    background: linear-gradient(135deg, #F5DEB3 60%, #b9fdd4 85%, #488c62);
}

/* Dark mode body */
body.dark {
    background: rgba(33, 33, 33, .9);
    /* Dark background */
    color: #e0e0e0;
    /* Light text */
}
/* The switch - the box around the slider */
.switch {
    font-size: 17px;
    position: relative;
    display: inline-block;
    width: 3.5em;
    height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    left: 20px;
    cursor: pointer;
    inset: 0;
    border: 2px solid #414141;
    border-radius: 50px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.slider:before {
    position: absolute;
    content: "";
    height: 1.4em;
    width: 1.4em;
    left: 0.2em;
    bottom: 0.2em;
    background-color: white;
    border-radius: inherit;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
}

.switch input:checked+.slider {
    box-shadow: 0 0 20px rgba(9, 117, 241, 0.8);
    border: 2px solid #0974f1;
}

.switch input:checked+.slider:before {
    transform: translateX(1.5em);
}
.main{
    display: flex;
    flex-direction: row;
    align-items: center;
}


body {
    background: linear-gradient(135deg, #F5DEB3 60%, #b9fdd4 85%, #488c62);
}

/* Parallax Header */
header {
    position: relative;
    height: 100vh; /* Full height of the viewport */
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-secondary);
    background-image: url(../img/img_13.JPG); /* Ensure image path is correct */
    background-size: cover; /* Ensures the image covers the entire header */
    background-position: center center; /* Centers the image both horizontally and vertically */
    background-repeat: no-repeat;
    background-attachment: fixed; /* Keeps the image fixed for parallax */
}


.banner-left .name h1 {
    font-size: 12rem;
    position: absolute;
    bottom: -80px;
    left: 20px;
    font-family: var(--head-font);
    font-weight: 900;
    font-size: 12rem;
    color: var(--color-primary);
}

.banner-right {
    width: 100%;
    display: flex;
        align-items: center;
        justify-content: center;
        justify-items: center;
        flex-direction: column;
        gap: 2rem;
}

.banner-right h2 {
    text-align: center;
    font-family: var(--head-font);
    font-weight: 900;
    font-size: 2rem;
    color: var(--color-accent);
}

.nav{
    position: absolute;
    top:0;
    right: 2vw;
    display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
    z-index: 1;
}
.nav ul{
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 1rem;

    font-family: var(--head-font);
    font-size: 2rem;
    list-style: none;
    font-weight: 900;
}
.nav ul li a{
    text-decoration: none;
    color: var(--color-primary);
    transition: color 0.4s ease;
}
.nav ul li a:hover{
    color: var(--color-accent);
    border-bottom: var(--color-accent2) 5px solid;
}
.banner-left{
    height: 100vh;
    width: 100vh
}
.banner-left .name{
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;

}
.name{
position: relative;
bottom: 140px;
left:20px;
font-family: var(--head-font);
font-weight: 900;
font-size: 12rem;
color: var(--color-primary);
width: 100%;

}

.banner-right{
    width: 40%;
}
.banner-right h2{
text-align: center;
    font-family: var(--head-font);
    font-weight: 900;
    font-size: 2rem;
    color: var(--color-accent);
}
/**about me*/
button {
    background-color: var(--color-primary);
    color: var(--color-secondary);
    border: none;
    padding: 1rem;
    border-radius: 30px;
    height: fit-content;
    font-family: var(--text-font);
    font-weight: 500;
    font-size: var(--text-font-size);
    line-height: 1.7;
    cursor: pointer;
    margin-bottom: 2rem;
}
.about-me{
    display: flex;
    flex-direction: row;
    margin-left: 14vw;
    margin-right:14vw;
}
.about-me .container-left{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    
}
.about-me .container-left h2{
    font-family: var(--head-font);
    font-weight: 900;
    font-size: 2rem;
    color: var(--color-accent);
    text-align: center;
    margin: 1rem;
    border-bottom: var(--color-accent2) 5px solid;
}
.about-me .container-left p{
    font-family: var(--text-font);
    font-weight: 500;
    font-size: var(--text-font-size);
    margin: 1rem;
    line-height: 1.7;
}
.more{
    margin-top: 14vh;
    margin-left: 14vw;
    margin-right:14vw;
}
.more h2
{    font-family: var(--head-font);
    display: inline-block;
    font-weight: 900;
    font-size: 2rem;
    color: var(--color-accent);
    text-align: center;
    margin: 1rem;
    border-bottom: var(--color-accent2) 5px solid;
}
.columns{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.column1, .column2 {
    flex: 1; /* Ensures both columns take equal space */
    margin: 10px; /* Adds some spacing between the columns */
}
@media (max-width: 768px) {
    .columns {
      flex-direction: column;
    } 
    .nav{
        margin: 2rem;
    }
    .name{
        font-size: 4rem;
        display: block;
        width: 80vw;
    }

    .banner-right{
        display: none;
        overflow: hidden;
    }


}
.more p{
    font-family: var(--text-font);
    font-weight: 500;
    font-size: var(--text-font-size);
    margin: 1rem;
    line-height: 1.7;
}
.skills{
    margin-top: 14vh;
    margin-left: 14vw;
    margin-right:14vw;
}
.skills h2{
    font-family: var(--head-font);
    display: inline-block;
    font-weight: 900;
    font-size: 2rem;
    color: var(--color-accent);
    text-align: center;
    margin: 1rem;
    border-bottom: var(--color-accent2) 5px solid;
}
.skills ul{
    display: flex;
    gap: 1rem;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 1rem;
    list-style: none;
    font-family: var(--text-font);
    font-weight: 500;
    font-size: var(--text-font-size);
    line-height: 1.7;
}
.skills li{
    background-color: var(--color-primary);
    color: var(--color-secondary);
    padding: 1rem;
    border-radius: 30px;
    height: fit-content;
}
/* Default Styles for Larger Screens */
.education {
    margin-top: 14vh;
    margin-left: 14vw;
    margin-right: 14vw;
}
.education h2 {
    font-family: var(--head-font);
    display: inline-block;
    font-weight: 900;
    font-size: 2rem;
    color: var(--color-accent);
    text-align: center;
    margin: 1rem;
    border-bottom: var(--color-accent2) 5px solid;
}
.education table {
    font-family: var(--text-font);
    font-weight: 500;
    font-size: var(--text-font-size);
    margin: 1rem;
    line-height: 1.7;
}
.socials {
    margin-top: 14vh;
    margin-left: 14vw;
    margin-right: 14vw;
    margin-bottom: 14vh;
}
.socials h2 {
    font-family: var(--head-font);
    display: inline-block;
    font-weight: 900;
    font-size: 2rem;
    color: var(--color-accent);
    text-align: center;
    margin: 1rem;
    border-bottom: var(--color-accent2) 5px solid;
}
.links {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 5rem;
}
.links h4 {
    font-family: var(--head-font);
    font-size: var(--text-font-size);
    align-self: flex-end;
    color: var(--color-accent);
}

/* Responsive Styles for Small Screens */
@media (max-width: 768px) {
    .education,
    .socials {
        margin: 2rem; /* Reduce side margins */
    }

    .education h2,
    .socials h2 {
        font-size: 1.5rem; /* Smaller headings for mobile */
        text-align: center;
    }

    .education table {
        font-size: 1rem; /* Adjust font size for better fit */
        margin: 0.5rem;
        overflow-x: hidden; /* Allow horizontal scrolling if needed */
    }

    .links {
        flex-direction: column; /* Stack items vertically */
        gap: 1rem; /* Reduce spacing between items */
        align-items: center; /* Center links for better aesthetics */
    }

    .links h4 {
        text-align: center; /* Center text for better fit */
        font-size: 0.9rem; /* Smaller text */
    }
}