style.css

:root {
    --color-accent: oklch(65% 50% 0);
    color-scheme: light dark
    }

body {
    /* Set line height to 1.5 times the font size
         and use the OS’s UI font as the website font
       */
    accent-color: var(--color-accent);
    font: 100%/1.5 system-ui;
    max-width: 100ch;
    margin-inline: max(1em, (100% - 100ch) / 2);

  }
  h1 {
    text-align: center;
  }
.color-scheme {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 80%;
  font-family: inherit;
}

.dropdown {
    position: relative;
    display: inline-block;
}
.bio {
    display: grid;
    grid-template-columns: minmax(350px, 1fr) 2fr; 
    grid-template-columns: 1fr 2fr; /* Left: Image & Name, Right: About & Stats */
    gap: 20px;
    align-items: center;
    background-color: white;
    border-radius: 10px;
}

/* Left Side: Name & Image */
.bio h1 {
    border-radius: 10px;
    grid-column: 1 / 2; /* Name stays on the left */
    margin-bottom: 10px;
    padding: 10px;
}

.bio img {
    border: 10px;
    width: 100%;
    max-width: 400px;
    height: auto; /* Keeps the aspect ratio */
    display: block;

}

/* Right Side: About Me & Profile Stats */
.bio-content {
    grid-column: 2 / 3; /* Stays on the right */
    background-color: white;
    padding: 8px;
    border-radius: 10px;
    margin-bottom:5px;
}

.bio h2 {
    margin-top: 2px;
    font-weight: normal;
    margin-bottom: 5px;
}

/* Styling for Profile Stats */
#profile-stats h2{
    margin-top: 2px;
    font-weight: normal;
    margin-bottom:5px;
}
#profile-stats dl {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    text-align: center;
}

#profile-stats dt {
    grid-row: 1;
}

#profile-stats dd {
    margin: 0;
    grid-row: 2;
}


/* >>>>>>>>>>>>>>>>>>>> NAVIGATION <<<<<<<<<<<<<<<<<<<< */


nav {
    display: flex;
    margin-bottom: 1em;
    border-bottom-width: 1px;
    border-bottom-style: solid;
     --border-color: oklch(50% 10% 200 / 40%);
    border-bottom-color: var(--border-color);
    

    ul, 
    ul li {
        display: contents;
    }

    a {
        flex: 1;
        text-decoration: none;
        color: inherit;
        text-align: center;
        padding: 0.5em;
        
        &.current{
            flex: 1;
            border-bottom-width: 0.4em;
            padding-bottom: 0.2em;
            border-bottom-color: var(--color-accent);
        }

        &:hover{
            border-bottom: 0.4em solid var(--color-accent);
            background-color: color-mix(in oklch, var(--color-accent), canvas 85%);
            padding-bottom: 0.2em;
        }
    }

  }

/* >>>>>>>>>>>>>>>>>>>> PROJECTS <<<<<<<<<<<<<<<<<<<< */

.projects{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
    gap: 1em;

    img{
        border-radius: 10px;
        width:300px;
        height:150px;
        margin-top:1.5px;
        margin-bottom:2px;
    }

    article {
        grid-template-rows:subgrid;
        grid-row: span 3;
        gap: 10px 10px;

        h2 {
            margin-top:1px;
            margin-bottom:2px;
            gap: 1em;
        }
        h1, h2, h3, h4, h5, h6 {
            line-height: 1.1;
            text-align: balance;
        }
        &:hover{
            border-bottom:0.4em solid var(--color-accent);
            background-color: oklch(from var(--color-accent) 95% 5% h);
            padding-bottom: 0.2em;

        }
    }
}


/* >>>>>>>>>>>>>>>>>>>> CONTACT <<<<<<<<<<<<<<<<<<<< */

input, textarea{
    width: 100%;
    display: grid;
    font: inherit;
    grid-column: 2;
}
button {
    font: inherit;
    width: 100%;
    display: grid;
    grid-column: 2;
    font: inherit;
}

form { 
    display: grid;
    grid-template-columns: 1fr 8fr;
    grid-column: 1 / -1;
    gap: 1em;
  }

label {
    display: grid;
    grid-template-columns: subgrid;
  }


/* >>>>>>>>>>>>>>>>>>>> RESUME <<<<<<<<<<<<<<<<<<<< */
.resume-header{
    text-align:center;
}

.resume article{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;

    &:hover{
        background-color: oklch(from var(--color-accent) 95% 5% h);
    }
}

.resume article header {
    flex: 1;
}
.resume article header h3{
    margin: 0; /* Remove default margins */
    line-height: 1.1; /* Tighter line spacing */
}
.resume-details {
    display: block;
    text-align: right;
    margin: 0; /* Add spacing between spans */
}

.resume-details time , p{
    margin: 0;
    font-size: 1em;
    line-height: 1.2;
}

.skills{
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 2rem;
    margin-top: 1rem;
}
.skills-column{
    text-align: center;
}

.skills-column ul li {
    text-align: left;
    list-style-type: circle;
    
}
.skills-column h3 {
    padding: 1em;
    text-align: center;  
}