body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: radial-gradient(circle at 10% 20%, rgb(0, 0, 0) 0%, rgb(64, 64, 64) 90.2%);
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    padding-top: 100px; /* breathing room between header and nav */
}

header{
    position:relative;
    min-height: 125px; /* matches img margin-top (50px) + img height (75px) */
}

.header-top {
    position: absolute;
    top: 50px;        /* lines up with image top */
    left: 10px;
    height: 75px;     /* same height as image */
    display: flex;
    align-items: center;  /* vertically centers name on image */
    z-index: 1;
}

.myname {
    color: #faf6e9;
    font-size: 25px;
    /*font-family: 'Mozilla Text', sans-serif;*/
    font-family:courier;
    letter-spacing: 2px;
     text-shadow:1px 1px rgb(37, 107, 85);
    margin: 0;
}


.img-container {
    z-index: 0;
    -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);
    mask-image: linear-gradient(to right, black 50%, transparent 100%);
}

#codingpic {
    width: 100%;
    height: 75px;
    object-fit: cover;
    margin-top: 50px;

}

.mytitles {
    font-family: 'Mozilla Text', sans-serif;
    font-weight: bolder;
    color: rgb(120, 120, 153);
     text-shadow:1px 2px rgb(13, 14, 13);
    letter-spacing: 2px;
    font-size: 22px;
    margin: 0;
    text-align: right;
    padding-right: 20px;
    margin-top:-5px;
    padding-top: 0;
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;  /* equal width columns */
    grid-template-rows: auto auto;
    gap: 25px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}


li {
    width: 350px;          /* pick a width that fits "Projects/Experience" */
    box-sizing: border-box;
    padding: 40px 0;       /* vertical padding only — horizontal centering via text-align */
    border: 1px solid white;
    list-style: none;
    text-align: center;
    background: linear-gradient(109.6deg, rgb(72, 200, 160) 11.2%, rgb(32, 40, 48) 91.3%);
    border: none;
    border-radius: 4px;
}

li:hover {
    background:black;
}


a{
    text-decoration:none;
    color:white;
    font-family: courier;
    font-size:16px;
    letter-spacing:2px;
    display: inline-block;
    transition: transform 0.3s ease;

}

a:hover {
    transform: scale(1.15);
    color:rgb(120, 120, 153);
}

.main-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    padding: 0 40px;
}

footer {
    margin-top: auto;
}

.footertext{
    color:#faf6e9;
    font-family: 'Mozilla Text', sans-serif;
    text-align:center;
    letter-spacing:1px;
    font-size:10px;
    padding: 0 10px;
}




.code-window {
    width: 260px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.code-titlebar {
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 12px;
    display: flex;
    gap: 6px;
    align-items: center;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.dot-red { background: #ff5f57; }
.dot-yellow { background: #febc2e; }
.dot-green { background: #28c840; }

.code-body {
    padding: 15px;
    min-height: 180px;
}

#code-output {
    margin: 0;
    font-family: monospace;
    font-size: 12px;
    line-height: 1.6;
    color: rgb(72, 200, 160);
    white-space: pre;
}

#code-output::after {
    content: '▋';
    animation: blink 1s step-end infinite;
    color: #faf6e9;
}


#projectstitle{
    color:gray;
    font-family: 'Mozilla Text', sans-serif;
    letter-spacing:4px;
    font-size:25px;
   
}

#experiencetitle {
    width: 266.84375px;
    color: gray;
    background-color: black;
    font-family: 'Mozilla Text', sans-serif;
    letter-spacing: 4px;
    font-size: 25px;
    text-align: center;
    display: block;
    margin: 0;                  /* was 45px auto 0 — auto margins fight flexbox */
    padding: 15px 30px;
    flex-shrink: 0;             /* keeps the box from getting squished */
}

.experience-image-wrap {
    position: relative;         /* anchor for the boxes on top */
    flex: 1;
    max-width: 1000px;
}

#computerbraintwo {
    display: block;
    width: 100%;
    height: auto;               /* scales naturally inside the wrapper */
}
.experience-layout {
    display: flex;
    align-items: center;        /* ← only this one; delete any flex-start line */
    justify-content: center;
    gap: 30px;
    margin-top: 45px;
    padding: 0 20px;
}

.circuit-wrap {
    position: relative;
}


.skills-row {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);   /* this already centers them vertically */
    display: flex;
    justify-content: space-evenly;  /* was space-around — now all gaps are equal */
    align-items: center;            /* was flex-start — centers boxes to each other too */
    padding: 0 20px;
}

.skills-dropdown {
    position: relative;         /* anchor for this box's own dropdown */
    width: 160px;
}

.skills-toggle {
    width: 100%;
    height: 120px;
    background: #ffffff;
 color: rgb(120, 120, 153);
    border: 2px solid #000000;
    border-radius: 4px;          /* tiny rounding reads more like a real key */
    font-family: 'Mozilla Text', sans-serif;
    font-size: 15px;
    line-height: 1.3;
    cursor: pointer;
    box-shadow: 0 6px 0 #1a1a1a, 0 8px 12px rgba(0, 0, 0, 0.45);   /* solid "edge" + soft drop shadow */
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.skills-toggle:hover {
    transform: translateY(-2px);                                   /* lifts slightly */
    box-shadow: 0 8px 0 #1a1a1a, 0 12px 16px rgba(0, 0, 0, 0.5);
}


.skills-list {
    display: block;             /* cancels the global ul grid */
    position: absolute;         /* floats below the box, over the image */
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    z-index: 5;
}

.skills-toggle:active {
    transform: translateY(4px);                                    /* presses down */
    box-shadow: 0 2px 0 #1a1a1a, 0 3px 6px rgba(0, 0, 0, 0.4);     /* edge shrinks = pressed */
}

.skills-list.open {
    max-height: 500px;
}

.skills-list li {
    width: auto;                /* cancels the global li width:350px */
    box-sizing: border-box;
    color: #faf6e9;
    font-family: 'Mozilla Text', sans-serif;
    font-size: 12px;
    text-align: left;
    padding: 9px 12px;
    background: rgba(0, 0, 0, 0.85);   /* dark so it reads over the light circuit image */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    margin-top: 6px;
}

.projects-layout {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    margin-top: 45px;
}

.blueprint-wrap {
    position: relative;
    width: fit-content;
    margin: 0;   /* the flex container handles centering now */
}

.projectsmenu ul {
    display: block;        /* undo the grid */
    margin: 0;
  
}

.projectsmenu li {
    display: block;
    padding: 15px 30px;
    margin-bottom: 20px;
    background: rgba(0, 0, 0, 0.5);   /* or whatever style you like */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    
}

#jspp-title {
    position: absolute;      /* floats on top of the image */
    top: 400px;               /* nudge down from the top */
    right: 45px;             /* nudge in from the right */
    margin: 0;
    color: white;
    text-align: center;
    z-index: 1;
    font-size:25px;
  font-family: 'Mozilla Text', sans-serif;
}

#Engineblueprint {
    display: block;
    width: 800px;
    height: 500px;
    border-radius: 3px;
    /* margin-top removed — the wrapper handles spacing now */
}



#aiexperience {
    display: block;
    width: 800px;
    max-width: 100%;
    height: auto;         /* no margins needed — .ai-row positions it */
    border-radius:3px;
}


.ai-row {
    width: 1200px;        /* same total width as the projects row (800 + 50 + 350) */
    max-width: 100%;
    margin: 45px auto 0;  /* centered → its left edge matches the blueprint's */
}

.imac {
    position: relative;
    width: 900px;
    max-width: 100%;
    margin: 25px auto;
    container-type: inline-size;   /* lets cqw units track this box */
}


#imaccomputer {
    display: block;
    width: 100%;
    height: auto;
}

#abouttext {
    position: absolute;
      top: 16%;
    left: 20.8%;
    width: 58%;
    height: 47%;       /* taller — fills the screen so no black gap below */
    box-sizing: border-box;
    margin: 0;
    padding: 18px 22px;
    overflow: auto;
    background-color: white;
    color: black;
    font-family: monospace;
      font-size: 1.3cqw; /* slightly bigger to fill the extra room + easier to read */
    line-height: 1.45;
}


.contact-window {
    width: 420px;
    max-width: 90%;
    margin: 60px auto;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.contact-body {
    padding: 25px 30px;
    font-family: monospace;
}

.prompt { color: rgb(72, 200, 160); }   /* the green terminal prompt */

.contact-line {
    color: #faf6e9;
    font-size: 14px;
    margin: 0 0 20px;
}

.contact-label {
    color: rgb(120, 120, 153);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 14px 0 2px;
}

.contact-value {
    display: block;
    color: rgb(72, 200, 160);
    font-size: 16px;
    text-decoration: none;
    margin: 0;
}

a.contact-value:hover { color: #faf6e9; }





@media (max-width: 600px) {
    .main-content,
    .projects-layout,
    .experience-layout {        /* added */
        flex-direction: column;
       gap:20px;
    }

    
   .skills-row {
        position: static;
        transform: none;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        margin-top: 16px;
    }

    .skills-dropdown { width: 80%; }
    .skills-list {
        position: static;
        transform: none;
        width: 100%;
    }
    .myname {
        font-size: 18px;
    }

    ul {
        grid-template-columns: 1fr;
    }

    li {
        padding: 25px 60px;
    }

    #Engineblueprint {              /* added — 800px won't fit a phone */
        width: 100%;
        height: auto;

        
    }

       #jspp-title {
        position: static;     /* back in normal flow — sits above the image */
        margin-bottom: 15px;
        font-size: 20px;
       }
       
}