* {
    cursor: url("/65768.png"), auto !important;
}

body {
    background-color: #0d0d0d;
    color: #e5e5e5;
    font-family: 'Share Tech Mono', monospace;
    margin: 0;
    padding: 0;
}

.navbar {
    position: sticky;
    top: 0;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 15px 40px;

    background: #0d0d0d;

    border-bottom: 1px solid #222;

    z-index: 1000;
}

.nav-logo {
    font-family: "Orbitron", sans-serif;

    color: #9d4edd;

    font-size: 18px;
}


/* Navigation Links */

.nav-links {
    list-style: none;

    display: flex;

    gap: 25px;

    margin: 0;
    padding: 0;
}

.nav-links a {
    text-decoration: none;

    color: #e5e5e5;

    font-family: "Share Tech Mono", monospace;

    transition: 0.3s;
}

.nav-links a:visited {
    color: #e5e5e5;
}

.nav-links a:hover {
    color: #00ff9f;

    text-shadow:
        0 0 10px #00ff9f;
}


/* =========================
   MUSIC BUTTON
========================= */

.music-control {
    display: flex;
    align-items: center;
}

.music-control button {
    background: #9d4edd;

    border: none;

    color: white;

    padding: 8px 14px;

    border-radius: 5px;

    font-family: 'Share Tech Mono', monospace;

    font-size: 12px;

    transition: 0.3s;

    cursor: url("/65768.png"), auto !important;
}

.music-control button:hover {
    background: #00ff9f;

    color: #000;

    box-shadow:
        0 0 12px #00ff9f;
}


/* =========================
   HEADINGS
========================= */

h1 {
    font-family: 'Orbitron', sans-serif;

    font-size: 40px;

    color: #9d4edd;
}

h2 {
    color: #00ff9f;

    border-bottom: 2px solid #333;

    padding-bottom: 10px;

    text-shadow:
        0 0 5px rgba(0, 255, 159, 0.3);
}

h1:hover,
h2:hover,
h3:hover {
    color: #00ff9f;
}


/* =========================
   SECTIONS
========================= */

section {
    padding: 40px;

    max-width: 900px;

    margin: auto;
}


/* =========================
   LINKS
========================= */

a {
    color: #00ff9f;

    transition: 0.3s;
}

a:visited {
    color: #9d4edd;
}

a:hover {
    color: #00ff9f;

    text-shadow:
        0 0 8px #00ff9f;
}


/* =========================
   TERMINAL
========================= */

.terminal-window {
    display: block;
    width: 100%;
    min-height: 300px;

    background: #080808;

    border: 1px solid #333;
    border-radius: 8px;

    overflow: hidden;

    box-shadow:
        0 0 20px rgba(0, 255, 159, 0.08),
        inset 0 0 30px rgba(157, 78, 221, 0.05);
}


/* Terminal Header */

.terminal-header {
    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px 15px;

    background: #151515;

    border-bottom: 1px solid #333;
}


/* Terminal Dots */

.terminal-dot {
    width: 10px;

    height: 10px;

    border-radius: 50%;
}

.red {
    background: #ff5f56;
}

.yellow {
    background: #ffbd2e;
}

.green {
    background: #27c93f;
}


/* Terminal Title */

.terminal-title {
    margin-left: 10px;

    color: #888;

    font-size: 13px;
}


/* Terminal Body */

.terminal-body {
    display: block;

    min-height: 250px;

    padding: 25px;

    background: #080808;

    color: #e5e5e5;

    font-family: 'Share Tech Mono', monospace;

    font-size: 15px;

    line-height: 1.7;

    box-sizing: border-box;
}

/* =========================
   EDUCATION
========================= */

.education-card {
    background: #111;

    padding: 25px;

    margin-bottom: 20px;

    border-left: 4px solid #9d4edd;

    transition: 0.3s;
}

.education-card:hover {
    border-left-color: #00ff9f;

    box-shadow:
        0 0 15px rgba(0, 255, 159, 0.08);

    transform: translateX(4px);
}

.education-header {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 20px;
}

.education-card h3 {
    margin-top: 0;

    margin-bottom: 5px;

    color: #9d4edd;

    font-family: 'Orbitron', sans-serif;
}

.school {
    color: #e5e5e5;

    margin: 0;
}

.education-location {
    color: #888;

    font-size: 14px;
}

.education-status {
    color: #00ff9f;

    font-size: 12px;

    border: 1px solid #00ff9f;

    padding: 5px 8px;

    white-space: nowrap;

    text-shadow:
        0 0 5px #00ff9f;
}

.education-focus {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 15px;
}

.education-focus span {
    color: #00ff9f;

    border: 1px solid #333;

    padding: 5px 10px;

    font-size: 12px;

    background: #0d0d0d;
}
/* Terminal Prompt */

.prompt {
    color: #00ff9f;

    text-shadow:
        0 0 5px #00ff9f;
}


/* Terminal Output */

.terminal-output {
    color: #e5e5e5;

    margin-left: 20px;

    margin-top: 5px;

    margin-bottom: 15px;
}


/* Online Status */

.status {
    color: #00ff9f;

    text-shadow:
        0 0 8px #00ff9f;
}


/* Blinking Terminal Cursor */

.cursor-blink {
    color: #00ff9f;

    text-shadow:
        0 0 8px #00ff9f;

    animation: blink 1s infinite;
}

@keyframes blink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}


/* =========================
   CERTIFICATIONS
========================= */

.cert-category {
    color: #9d4edd;

    font-family: 'Share Tech Mono', monospace;

    font-size: 14px;

    margin-top: 30px;

    margin-bottom: 15px;

    text-shadow:
        0 0 5px rgba(157, 78, 221, 0.5);
}

.certification {
    margin-bottom: 25px;
}

.cert-header {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    margin-bottom: 8px;
}

.cert-header p {
    margin: 0;

    color: #e5e5e5;
}

.cert-status {
    font-size: 11px;

    white-space: nowrap;

    padding: 4px 8px;

    border: 1px solid;
}

.certified {
    color: #00ff9f;

    border-color: #00ff9f;

    text-shadow:
        0 0 5px #00ff9f;
}

.progress-status {
    color: #00ff9f;

    border-color: #00ff9f;
}

.planned {
    color: #888;

    border-color: #555;
}

.progress {
    background: #333;

    border-radius: 20px;

    margin-bottom: 10px;

    overflow: hidden;

    height: 10px;
}

.progress-bar {
    background:
        linear-gradient(
            90deg,
            #9d4edd,
            #00ff9f
        );

    height: 100%;

    border-radius: 20px;

    text-align: right;

    padding-right: 5px;

    color: transparent;

    box-sizing: border-box;

    transition: width 0.5s ease;
}

/* =========================
   PROJECTS
========================= */

.project {
    background: #111;

    padding: 20px;

    margin-bottom: 20px;

    border-left: 4px solid #9d4edd;

    transition: 0.3s;
}

.project:hover {
    border-left-color: #00ff9f;

    box-shadow:
        0 0 15px rgba(0, 255, 159, 0.08);

    transform: translateX(4px);
}


/* =========================
   SECURITY LOG
========================= */

#log .project {
    font-family: 'Share Tech Mono', monospace;
}

#log .prompt {
    color: #9d4edd;

    text-shadow:
        0 0 5px #9d4edd;
}


/* =========================
   SOCIAL ICONS
========================= */

.social-bar {
    position: fixed;

    bottom: 30px;

    left: 20px;

    display: flex;

    flex-direction: column;

    gap: 15px;

    z-index: 1000;
}

.social-bar a {
    color: #e5e5e5;

    text-decoration: none;

    cursor: url("/65768.png"), auto !important;

    transition: 0.3s;
}

.social-bar a:visited {
    color: #e5e5e5;
}

.social-bar a:hover {
    color: #00ff9f;
}

.social-bar i {
    font-size: 25px;

    transition: 0.3s;
}

.social-bar a:hover i {
    color: #00ff9f;

    transform: scale(1.2);

    text-shadow:
        0 0 10px #00ff9f;
}

/* =========================
   HERO / RADAR
========================= */

.hero {

    min-height: 650px;

    max-width: 1200px;

    margin: auto;

    padding: 60px 40px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    justify-content: center;

    position: relative;

}


.hero-content {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 80px;

}


.hero-text {

    flex: 1;

}


.system-text {

    color: #9d4edd;

    font-size: 13px;

    letter-spacing: 1px;

    margin-bottom: 20px;

}


.hero h1 {

    font-family: 'Orbitron', sans-serif;

    font-size: clamp(35px, 5vw, 65px);

    margin: 0;

    color: #9d4edd;

    text-shadow:
        0 0 10px rgba(157, 78, 221, 0.5);

}


.hero h3 {

    color: #00ff9f;

    font-size: 20px;

    letter-spacing: 2px;

    margin-top: 10px;

}


.hero-lines {

    margin-top: 35px;

    color: #aaa;

    line-height: 1.5;

}


.hero-lines p {

    margin: 5px 0;

}


.hero-lines p::first-letter {

    color: #00ff9f;

}


.hero-status {

    margin-top: 30px;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 12px;

    border: 1px solid #333;

    background: #080808;

    color: #aaa;

    font-size: 12px;

}


.hero-status strong {

    color: #00ff9f;

}


.status-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #00ff9f;

    box-shadow:
        0 0 8px #00ff9f;

    animation: statusPulse 1.5s infinite;

}


@keyframes statusPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }

}


.location {

    color: #666;

    font-size: 12px;

    margin-top: 15px;

}


/* =========================
   RADAR
========================= */

.radar-container {

    width: 400px;

    flex-shrink: 0;

    text-align: center;

}


.radar {

    width: 360px;

    height: 360px;

    position: relative;

    margin: auto;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 255, 159, 0.08) 0%,
            rgba(0, 255, 159, 0.03) 45%,
            transparent 70%
        );

    border: 1px solid rgba(0, 255, 159, 0.5);

    overflow: hidden;

    box-shadow:
        0 0 30px rgba(0, 255, 159, 0.08),
        inset 0 0 30px rgba(0, 255, 159, 0.05);

}


/* Radar circles */

.radar-circle {

    position: absolute;

    border: 1px solid rgba(0, 255, 159, 0.25);

    border-radius: 50%;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

}


.circle-1 {

    width: 33%;

    height: 33%;

}


.circle-2 {

    width: 66%;

    height: 66%;

}


.circle-3 {

    width: 90%;

    height: 90%;

}


/* Radar crosshair */

.radar-line {

    position: absolute;

    background: rgba(0, 255, 159, 0.18);

}


.horizontal {

    width: 100%;

    height: 1px;

    top: 50%;

}


.vertical {

    height: 100%;

    width: 1px;

    left: 50%;

}


/* Radar sweep */

.radar-sweep {

    position: absolute;

    width: 50%;

    height: 50%;

    left: 50%;

    top: 50%;

    transform-origin: 0% 100%;

    background:
        conic-gradient(
            from 0deg,
            rgba(0, 255, 159, 0.35),
            transparent 35deg
        );

    animation: radarSweep 4s linear infinite;

}


@keyframes radarSweep {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}


/* Radar dots */

.radar-dot {

    position: absolute;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #00ff9f;

    box-shadow:
        0 0 10px #00ff9f;

    animation: radarPulse 2s infinite;

}


.dot-1 {

    top: 28%;

    left: 67%;

}


.dot-2 {

    top: 65%;

    left: 28%;

    animation-delay: .7s;

}


.dot-3 {

    top: 45%;

    left: 75%;

    animation-delay: 1.3s;

}


@keyframes radarPulse {

    0% {

        opacity: .3;

        transform: scale(.7);

    }

    50% {

        opacity: 1;

        transform: scale(1.4);

    }

    100% {

        opacity: .3;

        transform: scale(.7);

    }

}


/* ES in center */

.radar-center {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    border: 1px solid #9d4edd;

    color: #9d4edd;

    font-family: 'Orbitron', sans-serif;

    font-size: 18px;

    background: #080808;

    box-shadow:
        0 0 15px rgba(157, 78, 221, .5);

}


.scan-text {

    color: #00ff9f;

    font-size: 11px;

    margin-top: 15px;

    letter-spacing: 2px;

    animation: scanBlink 1.5s infinite;

}


@keyframes scanBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .4;
    }

}


/* Scroll indicator */

.scroll-indicator {

    text-align: center;

    margin-top: 60px;

    color: #555;

    font-size: 11px;

    letter-spacing: 2px;

}


.scroll-indicator span {

    color: #00ff9f;

    font-size: 20px;

    animation: scrollBounce 1.5s infinite;

    display: block;

}


@keyframes scrollBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }

}
/* =========================
   RESPONSIVE / MOBILE
========================= */

@media (max-width: 768px) {

    .navbar {
        flex-direction: column;

        gap: 15px;

        padding: 15px;
    }

    .nav-links {
        flex-wrap: wrap;

        justify-content: center;

        gap: 15px;
    }

    section {
        padding: 25px 20px;
    }

    .terminal-body {
        padding: 18px;

        font-size: 13px;

        overflow-x: auto;
    }

    .music-control {
        margin-bottom: 5px;
    }

    .social-bar {
        bottom: 20px;

        left: 15px;
    }

}