html, body {
    margin: 0;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
}

body {
    position: relative;
    background-image: url("../img/images.steamusercontent.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 40px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

.hero {
    width: min(100%, 760px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.white {
    color: white;
}

.handjet-bold {
    font-family: "Handjet", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.portfoliotext {
    font-size: 48px;
    margin: 0 0 20px;
    text-align: center;
}

.centerpfp {
    display: block;
    margin: 0 auto;
    max-width: 220px;
    width: 60%;
    height: auto;
    border-radius: 50%;
}

.aboutmetext {
    text-align: center;
    margin-top: 0;
    line-height: 1.6;
}

.icon-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 0 0 22px;
    flex-wrap: wrap;
}

.icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.mini-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(0, 0, 0, 0.22);
    border: 2px solid rgba(0, 0, 0, 0.75);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 0, 0, 0.65);
    padding: 4px;
    display: block;
}

.design-toggle,
.web-toggle {
    position: fixed;
    top: 18px;
    z-index: 30;
    width: 78px;
    height: 78px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.95);
    font-family: "Handjet", sans-serif;
    font-size: 22px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: transform 0.25s ease, opacity 0.25s ease, background 0.25s ease;
    opacity: 0.8;
    --float-shift: 0px;
    transform: translateY(var(--float-shift));
}

.design-toggle {
    left: 18px;
}

.web-toggle {
    right: 18px;
}

.design-toggle:hover,
.web-toggle:hover {
    transform: scale(1.06);
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

.design-list {
    position: fixed;
    left: 18px;
    top: 110px;
    width: min(240px, calc(100vw - 36px));
    max-height: calc(100vh - 140px);
    background: rgba(10, 12, 18, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    backdrop-filter: blur(8px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
    padding: 14px 14px 12px;
    --design-x-shift: -120%;
    --float-shift: 0px;
    transform: translateX(var(--design-x-shift)) translateY(var(--float-shift));
    opacity: 0;
    transition: transform 0.35s ease, opacity 0.25s ease;
    z-index: 25;
    pointer-events: none;
    will-change: transform;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.design-list.is-open {
    --design-x-shift: 0px;
    opacity: 1;
    pointer-events: auto;
}

.design-list-header {
    margin: 0 0 10px;
    color: rgba(255, 255, 255, 0.88);
    font-family: "Handjet", sans-serif;
    font-size: 26px;
    letter-spacing: 0.5px;
}

.design-list-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.design-item-card {
    display: block;
    width: 100%;
    border: none;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-family: "Handjet", sans-serif;
    font-size: 20px;
    text-align: left;
    padding: 10px 12px 8px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    box-sizing: border-box;
}

.design-item-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(2px);
}

.design-item-label {
    display: block;
    margin-bottom: 8px;
}

.design-preview {
    display: block;
    width: 100%;
    height: 96px;
    border-radius: 10px;
    object-fit: cover;
    background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03));
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-image:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px),
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.22), transparent 40%);
    background-size: 24px 24px, 24px 24px, 100% 100%;
    background-position: center;
}

.project-web {
    position: fixed;
    top: 18px;
    right: 14px;
    width: 420px;
    height: 420px;
    pointer-events: none;
    opacity: 0;
    transform: translate(100%, -12%) rotate(10deg) scale(0.8);
    transition: transform 0.7s cubic-bezier(0.18, 1, 0.2, 1), opacity 0.2s ease;
    z-index: 20;
}

.project-web.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translate(0, 0) rotate(0deg) scale(1);
}

.project-web::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.42)' stroke-width='2'%3E%3Cpolygon points='250,20 350,80 480,250 350,420 250,480 150,420 20,250 150,80' /%3E%3Cpolygon points='250,60 335,105 430,250 335,395 250,440 165,395 70,250 165,105' /%3E%3Cpolygon points='250,120 310,150 370,250 310,350 250,380 190,350 130,250 190,150' /%3E%3Cpolygon points='250,180 277,205 312,250 277,295 250,320 223,295 188,250 223,205' /%3E%3Cpath d='M250 20 L250 480 M20 250 L480 250 M150 80 L350 420 M350 80 L150 420 M80 150 L420 350 M420 150 L80 350 M250 20 L150 420 M250 20 L350 420 M250 480 L150 80 M250 480 L350 80 M20 250 L350 80 M20 250 L350 420 M480 250 L150 80 M480 250 L150 420' /%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transition: opacity 0.45s ease;
    filter: drop-shadow(0 0 12px rgba(255,255,255,0.12));
}

.project-web.is-open::before {
    opacity: 1;
}

.web-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 74px;
    height: 74px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.45);
    background: rgba(14, 18, 26, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Handjet", sans-serif;
    font-size: 20px;
    z-index: 2;
}

.project-node {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: rgba(18, 20, 32, 0.5);
    color: white;
    font-family: "Handjet", sans-serif;
    font-size: 22px;
    cursor: pointer;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7) rotate(8deg);
    transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.2s ease;
    box-shadow: none;
}

.project-web.is-open .project-node {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
}

.project-node:hover {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.28);
}

.node-1 {
    left: 58%;
    top: 28%;
}

.node-2 {
    left: 76%;
    top: 50%;
}

.node-3 {
    left: 62%;
    top: 76%;
}

.node-4 {
    left: 32%;
    top: 60%;
}

.project-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 50;
}

.project-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.modal-card {
    width: min(90vw, 340px);
    background: rgba(18, 20, 30, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
    color: white;
    padding: 18px 18px 16px;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
}

.modal-tag {
    display: inline-block;
    margin-bottom: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#modal-title {
    margin: 0 0 10px;
    font-family: "Handjet", sans-serif;
    font-size: 30px;
}

#modal-text {
    margin: 0;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.84);
}

#modal-text a {
    color: #ff5a5a;
    text-decoration: underline;
}

#modal-text a:hover {
    color: #ff7b7b;
}

@media (max-width: 700px) {
    .project-web {
        width: 300px;
        height: 300px;
        right: 8px;
    }

    .web-toggle {
        width: 68px;
        height: 68px;
        font-size: 18px;
    }
}