@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100..900;1,100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

.work-sans-subtext {
  font-family: "Work Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}


* {
    margin: 0;
    /* background-color:#F6FBEA; wait this actually looks kinda good */
}

:root {
    --green-hero: #b6d94def;
    --dark-green-text: #33653B;
    --icon-color: #3F5500;
    --black-text: #11302F;
    --subtle-green-text: #6D6C4F;
    --light-green: #EAF5CB;
    --very-light-green: #F6FBEA;

    --yellow-accent: #F7EE80;
    --purple-accent: #DFD6F2;

}

.hero-outer { background-color: var(--green-hero); }

.hero {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
    padding-left: clamp(16px, 6vw, 200px);
    padding-right: clamp(16px, 6vw, 200px);
    padding-top: clamp(48px, 10vw, 90px);
    padding-bottom: clamp(24px, 10vw, 45px);

    max-width: 1200px;
    margin: 0 auto;

    gap: 50px;

}

.hero-text {
    flex: 1 1 420px;
}

.hero-heading {
    margin-top: 24px;
    font-family:'Courier New', Courier, monospace;
    font-size: clamp(36px, 5vw, 52px);
    line-height: 1.1;
    color: var(--dark-green-text);
}

.hero-subtext {
    font-size: clamp(16px, 2.2vw, 20px);
    margin-top: 16px;
    font-family: "Work Sans", sans-serif;
    margin-bottom: 20px;
    line-height: 1.6;
    color: var(--subtle-green-text);
}

.hero-links {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 20px;
    padding-bottom: 20px;
    list-style: none;
    padding-left: 0;
}

.icon-button {
    display: inline-grid;
    place-items: center;
    width: 50px; height: 50px;
    color: var(--icon-color) ;
    outline: none;
}
.icon-button:hover {
    color: var(--very-light-green);
    transition: color .12s;
}
.icon-button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
    border-radius: 8px;
}


.hero-img {
    display: flex;
    justify-content: center;
}

.hero-img img {
    border-radius: 50%;
}

.skills-outer {
    background-color: var(--light-green);
}


.skills {
    background-color: var(--light-green);
    
    padding-left: clamp(16px, 6vw, 200px);
    padding-right: clamp(16px, 6vw, 200px);
    padding-top: clamp(24px, 10vw, 45px);
    padding-bottom: clamp(24px, 10vw, 45px);

    max-width: 1200px;
    margin: 0 auto;

    font-family: 'Courier New', Courier, monospace;
    
}

.skills-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.projects-outer {
    background-color: var(--very-light-green);
}

.projects {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

    justify-content: center;

    padding-left: clamp(16px, 6vw, 200px);
    padding-right: clamp(16px, 6vw, 200px);
    padding-top: clamp(16px, 6vw, 45px);
    /* padding-bottom: clamp(16px, 6vw, 45px); */

    max-width: 1200px;
    margin: 0 auto;
}

.projects-heading {
    display: flex;
    font-family: 'Courier New', Courier, monospace;
    margin-bottom: 20px;
}

.p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 4vw, 30px);
    flex-wrap: wrap;

    margin-top: 25px;
    margin-bottom: 25px;
    color: var(--black-text);
}

.p-img {
    display: flex;
    flex: 0 0 min(300px, 100%);
    justify-content: center;
    align-items: center;
}
.p-img img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 300px;
}

.p-text {
    flex: 1 1 360px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
}

.p-title {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-style: italic;
    font-size: 25px;
}

.year-and-techstack {
    font-family:'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    margin-bottom: 5px;
    gap: 15px;
    row-gap: 5px;

    flex-wrap: wrap;
}

.p-techstack {
    background-color: var(--purple-accent);
    padding: 5px;
    border-radius: 4px;
}

.year {
    background-color: var(--yellow-accent);
    padding: 5px;
    border-radius: 4px;
}

.p-description {
    font-family: "Work Sans", sans-serif;
    margin-bottom: 7px;
}

.p-links ul {
    display: flex;
    gap: 20px;
    margin-top: 15px;
    justify-content: flex-start;
    padding: 0;
}

.p-links li {
    list-style: none;
    
}

.p-links a{
    font-family:'Franklin Gothic', 'Arial Narrow', Arial, sans-serif
}

.p-more summary {
    list-style: none;
    cursor: pointer;
    display: inline-block;
    text-decoration: underline;
    outline: none;
    font-family: "Work Sans";
}
.p-more summary::-webkit-details-marker {display: none; }

.p-more .label-less {display: none}
.p-more[open] .label-more {display: none}
.p-more[open] .label-less {display: inline;}

.p-more-body {
  margin-top: 8px;
}

@keyframes smooth-reveal {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.footer {
    padding-bottom: clamp(32px, 10vw, 70px);
}



@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}