:root {

    --bg: #07080a;
    --surface: #101216;
    --surface2: #15181e;

    --text: #f3f1eb;
    --muted: #9698a0;

    --border: rgba(255,255,255,.10);

    --purple: #a9a0ff;
    --purple2: #d9d5ff;

    --green: #a9ffa0;

    --max: 1180px;

}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    background: var(--bg);

    color: var(--text);

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    line-height: 1.6;

    overflow-x: hidden;

}


a {
    color: inherit;
    text-decoration: none;
}


button {
    font-family: inherit;
}


img {
    max-width: 100%;
    display: block;
}


.noise {

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 100;

    opacity: .025;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='%23fff'/%3E%3C/svg%3E");

}


/* NAV */

.navbar {

    height: 82px;

    max-width: var(--max);

    margin: auto;

    padding: 0 28px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom:
        1px solid var(--border);

}


.logo {

    font-size: 15px;

    font-weight: 800;

    letter-spacing: .12em;

}


.logo span {
    color: var(--purple);
}


.navbar nav {

    display: flex;

    gap: 27px;

}


.navbar nav a {

    color: var(--muted);

    font-size: 11px;

    transition: .25s;

}


.navbar nav a:hover {
    color: white;
}


.menu-btn {

    display: none;

    border: 0;

    background: none;

    color: white;

    font-size: 22px;

    cursor: pointer;

}


/* HERO */

.hero {

    max-width: var(--max);

    min-height:
        calc(100vh - 82px);

    margin: auto;

    padding:
        90px 28px;

    display: grid;

    grid-template-columns:
        1fr .9fr;

    align-items: center;

    gap: 65px;

}


.eyebrow,
.section-label,
.visual-label {

    font-family:
        "DM Mono",
        monospace;

    font-size: 10px;

    letter-spacing: .15em;

    color: var(--muted);

}


.eyebrow {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 25px;

}


.status-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 15px var(--green);

}


.hero h1 {

    font-size:
        clamp(50px, 6.8vw, 86px);

    line-height: .94;

    letter-spacing: -.07em;

    font-weight: 800;

}


.hero h1 span {

    color: var(--purple);

}


.hero h1 em {

    font-family: Georgia, serif;

    font-weight: 400;

    color: var(--purple2);

}


.hero-description {

    max-width: 600px;

    margin:
        30px 0;

    color: var(--muted);

    font-size: 14px;

}


.hero-buttons {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

}


.btn {

    display: inline-block;

    padding:
        14px 20px;

    border:
        1px solid var(--border);

    font-size: 11px;

    font-weight: 800;

    transition: .25s;

}


.btn-primary {

    background: white;

    color: #08090b;

}


.btn-primary:hover {

    transform:
        translateY(-3px);

}


.btn-secondary:hover {

    background:
        var(--surface2);

}


.hero-meta {

    display: flex;

    gap: 35px;

    flex-wrap: wrap;

    margin-top: 50px;

}


.hero-meta div {

    display: flex;

    flex-direction: column;

}


.hero-meta span {

    font:
        8px "DM Mono";

    color: #666;

    letter-spacing: .14em;

}


.hero-meta strong {

    margin-top: 4px;

    font-size: 11px;

}


/* HERO PHOTO */

.hero-photo {

    position: relative;

    min-height: 510px;

    display: grid;

    place-items: center;

}


.photo-frame {

    position: relative;

    width: min(470px, 100%);

    height: 520px;

    overflow: hidden;

    border:
        1px solid var(--border);

    transform:
        rotate(2deg);

    box-shadow:
        0 35px 100px rgba(0,0,0,.55);

}


.photo-frame img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter:
        grayscale(.15)
        contrast(1.1);

    transition:
        transform 1s ease;

}


.photo-frame:hover img {

    transform:
        scale(1.05);

}


.photo-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.85),
            transparent 60%
        );

}


.photo-caption {

    position: absolute;

    bottom: 25px;

    left: 25px;

    display: flex;

    flex-direction: column;

}


.photo-caption span {

    font:
        9px "DM Mono";

    color: var(--purple);

}


.photo-caption strong {

    font-size: 42px;

    line-height: 1;

    letter-spacing: -.06em;

}


.photo-caption small {

    margin-top: 7px;

    font:
        8px "DM Mono";

    color: #aaa;

}


.floating-card {

    position: absolute;

    right: -10px;

    bottom: 40px;

    z-index: 5;

    width: 220px;

    padding: 18px;

    background:
        rgba(15,17,21,.94);

    border:
        1px solid var(--border);

    backdrop-filter:
        blur(12px);

}


.floating-card span {

    font:
        8px "DM Mono";

    color: #666;

}


.floating-card strong {

    display: block;

    margin-top: 8px;

    font-size: 13px;

}


.floating-card p {

    margin-top: 3px;

    font-size: 10px;

    color: var(--muted);

}


/* MARQUEE */

.marquee {

    overflow: hidden;

    white-space: nowrap;

    padding: 15px 0;

    border-block:
        1px solid var(--border);

    font:
        10px "DM Mono";

    letter-spacing: .18em;

    color: #777;

}


.marquee div {

    animation:
        marquee 25s linear infinite;

}


.marquee span {

    padding:
        0 25px;

    color: var(--purple);

}


@keyframes marquee {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-35%);
    }

}


/* SECTIONS */

.section {

    max-width: var(--max);

    margin: auto;

    padding:
        120px 28px;

}


.section h2 {

    font-size:
        clamp(40px, 5vw, 66px);

    line-height: 1;

    letter-spacing: -.06em;

}


.section h2 em {

    font-family: Georgia, serif;

    font-weight: 400;

    color: var(--purple2);

}


/* ABOUT */

.about-grid {

    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap: 90px;

    margin-top: 45px;

}


.about-content p {

    color: var(--muted);

    font-size: 14px;

    margin-bottom: 18px;

}


.about-photo {

    position: relative;

    height: 250px;

    margin-top: 35px;

    overflow: hidden;

    border:
        1px solid var(--border);

}


.about-photo img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter:
        grayscale(.4)
        brightness(.65);

}


.about-photo div {

    position: absolute;

    bottom: 20px;

    left: 20px;

    display: flex;

    flex-direction: column;

}


.about-photo span {

    font:
        8px "DM Mono";

    color: var(--purple);

}


.about-photo strong {

    margin-top: 5px;

    font-size: 17px;

}


.stats {

    display: flex;

    gap: 45px;

    margin-top: 35px;

    padding-top: 25px;

    border-top:
        1px solid var(--border);

}


.stats div {

    display: flex;

    flex-direction: column;

}


.stats strong {

    font-size: 27px;

}


.stats span {

    font:
        8px "DM Mono";

    color: #777;

}


/* EDUCATION */

.education {

    border-top:
        1px solid var(--border);

}


.education-heading {

    display: flex;

    justify-content: space-between;

    align-items: end;

    margin-top: 45px;

}


.education-heading p {

    max-width: 340px;

    color: var(--muted);

    font-size: 12px;

}


.timeline {

    margin-top: 60px;

    border-top:
        1px solid var(--border);

}


.education-item {

    display: grid;

    grid-template-columns:
        140px 35px 1fr;

    min-height: 190px;

    border-bottom:
        1px solid var(--border);

}


.edu-year {

    padding-top: 28px;

    font:
        9px "DM Mono";

    color: #666;

}


.edu-line {

    position: relative;

    border-left:
        1px solid var(--border);

}


.edu-line span {

    position: absolute;

    top: 31px;

    left: -4px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #666;

}


.current .edu-line span {

    background: var(--purple);

    box-shadow:
        0 0 15px var(--purple);

}


.edu-content {

    position: relative;

    padding:
        25px 0 35px 30px;

}


.edu-number {

    font:
        9px "DM Mono";

    color: #666;

}


.edu-content h3 {

    margin-top: 8px;

    font-size: 23px;

}


.edu-place {

    color: var(--purple2);

    font-size: 11px;

}


.edu-content > p:last-child {

    max-width: 650px;

    margin-top: 12px;

    color: var(--muted);

    font-size: 12px;

}


.current-badge {

    position: absolute;

    right: 0;
    top: 25px;

    padding:
        5px 8px;

    border:
        1px solid #a9a0ff55;

    font:
        8px "DM Mono";

    color: var(--purple2);

}


/* SKILLS */

.skills {

    border-top:
        1px solid var(--border);

}


.skills-heading {

    display: flex;

    align-items: end;

    justify-content: space-between;

    margin-top: 45px;

}


.skills-heading p {

    max-width: 350px;

    color: var(--muted);

    font-size: 12px;

}


.skills-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;

    margin-top: 50px;

}


.skill-card {

    min-height: 245px;

    padding: 25px;

    background:
        var(--surface);

    border:
        1px solid var(--border);

    transition: .3s;

}


.skill-card:hover {

    transform:
        translateY(-5px);

    border-color:
        #ffffff25;

}


.skill-card > span {

    font:
        9px "DM Mono";

    color: #666;

}


.skill-card h3 {

    margin-top: 30px;

    font-size: 22px;

}


.skill-card p {

    margin-top: 8px;

    color: var(--muted);

    font-size: 11px;

}


.skill-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 22px;

}


.skill-tags b {

    padding:
        5px 7px;

    border:
        1px solid var(--border);

    font:
        8px "DM Mono";

    color: #aaa;

    font-weight: 400;

}


.learning-bar {

    display: grid;

    grid-template-columns:
        170px 1fr;

    gap: 20px;

    margin-top: 25px;

    padding: 20px;

    background:
        var(--surface);

    border:
        1px solid var(--border);

}


.learning-bar > span {

    font:
        9px "DM Mono";

    color: var(--purple);

}


.learning-bar div {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

}


.learning-bar b {

    font-size: 12px;

}


/* PROJECTS */

.work {

    border-top:
        1px solid var(--border);

}


.section-header {

    display: flex;

    justify-content: space-between;

    align-items: end;

    margin-bottom: 45px;

}


.section-header h2 {

    margin-top: 18px;

}


.section-header > p {

    color: var(--muted);

    font-size: 11px;

}


.projects {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 18px;

}


.project {

    background:
        var(--surface);

    border:
        1px solid var(--border);

    transition: .35s;

}


.project:hover {

    transform:
        translateY(-5px);

    border-color:
        #ffffff25;

}


.project.featured {

    grid-column:
        span 2;

    display: grid;

    grid-template-columns:
        1.15fr .85fr;

}


.project-image {

    position: relative;

    height: 310px;

    overflow: hidden;

}


.featured .project-image {

    height: 410px;

}


/* ASTRO */

.project-astro {

    background:
        radial-gradient(
            circle at 55% 50%,
            #5a5291,
            transparent 20%
        ),
        linear-gradient(
            135deg,
            #090a0e,
            #1b1730
        );

}


.astro-circle {

    position: absolute;

    width: 210px;
    height: 210px;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #e0dcff,
            #6960a8 50%,
            #25203e
        );

    box-shadow:
        0 0 90px #9187ff55;

}


.project-big-title {

    position: absolute;

    left: 28px;
    bottom: 25px;

    font-size: 55px;

    line-height: .85;

    font-weight: 800;

    letter-spacing: -.07em;

}


.project-big-title em {

    font-family: Georgia, serif;

    color: var(--purple2);

    font-weight: 400;

}


/* BALLOON */

.project-balloon {

    background:
        linear-gradient(
            145deg,
            #21152c,
            #0b0e14
        );

}


.project-balloon > strong {

    position: absolute;

    left: 22px;
    bottom: 20px;

    font-size: 38px;

    line-height: .85;

    letter-spacing: -.06em;

}


.balloon-shape {

    position: absolute;

    width: 70px;
    height: 90px;

    border-radius:
        50% 50% 47% 47%;

}


.balloon-shape.one {

    left: 18%;
    top: 30%;

    background: #9c91ff;

    transform:
        rotate(-15deg);

}


.balloon-shape.two {

    left: 43%;
    top: 18%;

    background: #ded8ca;

}


.balloon-shape.three {

    left: 68%;
    top: 30%;

    background: #635b9e;

    transform:
        rotate(14deg);

}


/* 2048 */

.project-2048 {

    display: grid;

    place-items: center;

    background:
        linear-gradient(
            135deg,
            #16171c,
            #292632
        );

}


.mini-board {

    width: 220px;

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 6px;

    transform:
        rotate(-5deg);

}


.mini-board b {

    aspect-ratio: 1;

    display: grid;

    place-items: center;

    background: #e8e5dd;

    color: #222;

    font-size: 13px;

}


.mini-board b:last-child {

    background: var(--purple);

    color: white;

}


/* GADGET */

.project-gadget {

    background:
        linear-gradient(
            135deg,
            #151a21,
            #0a0d10
        );

}


.device-phone {

    position: absolute;

    width: 75px;
    height: 145px;

    left: 25%;
    top: 20%;

    border:
        2px solid #aaa8ff77;

    border-radius: 11px;

    transform:
        rotate(-12deg);

    background:
        linear-gradient(
            #272b35,
            #101217
        );

}


.device-laptop {

    position: absolute;

    width: 245px;
    height: 145px;

    left: 43%;
    top: 30%;

    border:
        2px solid #aaa8ff55;

    border-radius: 8px;

    transform:
        rotate(7deg);

    background:
        linear-gradient(
            #292e38,
            #0c0f13
        );

}


.project-gadget > strong {

    position: absolute;

    right: 20px;
    bottom: 20px;

    text-align: right;

    line-height: .85;

    font-size: 28px;

}


/* THRIFT */

.project-thrift {

    display: grid;

    place-items: center;

    background:
        linear-gradient(
            135deg,
            #29231d,
            #101112
        );

}


.fashion-card {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 210px;
    height: 180px;

    border:
        1px solid #d4c5a955;

    background:
        linear-gradient(
            135deg,
            #40362b,
            #171513
        );

    transform:
        rotate(-5deg);

}


.fashion-card small {

    font:
        8px "DM Mono";

    color: #cdbd9b;

}


.fashion-card strong {

    font-size: 34px;

    letter-spacing: -.06em;

}


.fashion-card span {

    font:
        7px "DM Mono";

    color: #888;

}


/* ACCOUNTING */

.project-accounting {

    background:
        linear-gradient(
            135deg,
            #101a19,
            #080d0e
        );

    display: grid;

    place-items: center;

}


.accounting-screen {

    width: 250px;
    height: 150px;

    padding: 20px;

    display: flex;

    flex-direction: column;

    gap: 9px;

    border:
        1px solid #8ffff955;

    background:
        #0d1515;

}


.accounting-screen div {

    height: 8px;

    background:
        #86e5cb33;

}


.accounting-screen div:nth-child(1) {
    width: 80%;
}

.accounting-screen div:nth-child(2) {
    width: 60%;
}

.accounting-screen div:nth-child(3) {
    width: 90%;
}

.accounting-screen div:nth-child(4) {
    width: 70%;
}

.accounting-screen div:nth-child(5) {
    width: 45%;
}


.project-accounting > strong {

    position: absolute;

    bottom: 20px;
    left: 20px;

    font-size: 26px;

    line-height: .85;

}


/* BUBBLE */

.project-bubble {

    background:
        radial-gradient(
            circle,
            #313568,
            #0b0d13 65%
        );

}


.project-bubble > strong {

    position: absolute;

    bottom: 20px;
    left: 20px;

    font-size: 38px;

    line-height: .85;

}


.bubble {

    position: absolute;

    border-radius: 50%;

    border:
        1px solid #ffffff44;

    box-shadow:
        inset 8px 8px 20px #ffffff22;

}


.bubble-a {

    width: 95px;
    height: 95px;

    left: 20%;
    top: 20%;

    background:
        #9d94ff55;

}


.bubble-b {

    width: 130px;
    height: 130px;

    left: 48%;
    top: 25%;

    background:
        #6e79ff33;

}


.bubble-c {

    width: 55px;
    height: 55px;

    left: 73%;
    top: 15%;

    background:
        #b9b1ff55;

}


/* CINEMA */

.project-cinema {

    display: grid;

    place-items: center;

    background:
        linear-gradient(
            135deg,
            #201519,
            #0b0d11
        );

}


.cinema-card {

    width: 240px;

    padding: 28px;

    border:
        1px solid #ffffff22;

    background:
        linear-gradient(
            135deg,
            #321d25,
            #171116
        );

    box-shadow:
        0 20px 50px #0008;

}


.cinema-card span {

    font:
        8px "DM Mono";

    color: #a9a0ff;

}


.cinema-card strong {

    display: block;

    margin:
        8px 0;

    font-size: 34px;

    letter-spacing: -.06em;

}


.cinema-card small {

    font:
        7px "DM Mono";

    color: #777;

}


/* PROJECT INFO */

.project-info {

    padding: 27px;

}


.project-number {

    display: flex;

    justify-content: space-between;

    font:
        9px "DM Mono";

    color: #666;

}


.project-info h3 {

    margin:
        22px 0 8px;

    font-size: 21px;

}


.project-info p {

    color: var(--muted);

    font-size: 12px;

}


.tags {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 20px;

}


.tags span {

    padding:
        5px 7px;

    border:
        1px solid var(--border);

    font:
        8px "DM Mono";

    color: #aaa;

}


/* GAME */

.game-section {

    border-top:
        1px solid var(--border);

}


.game-intro {

    display: flex;

    justify-content: space-between;

    align-items: end;

    margin:
        45px 0 35px;

}


.game-intro p {

    max-width: 400px;

    color: var(--muted);

    font-size: 12px;

}


.reaction-game {

    padding: 20px;

    background:
        var(--surface);

    border:
        1px solid var(--border);

}


.game-top {

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    padding-bottom: 17px;

    border-bottom:
        1px solid var(--border);

}


.game-top div {

    display: flex;

    flex-direction: column;

}


.game-top span {

    font:
        8px "DM Mono";

    color: #666;

}


.game-top strong {

    font-size: 25px;

}


.game-arena {

    position: relative;

    height: 390px;

    margin-top: 20px;

    overflow: hidden;

    border:
        1px solid var(--border);

    background:
        radial-gradient(
            circle at center,
            #1d1e2a,
            #090a0d 65%
        );

}


.game-message {

    position: absolute;

    inset: 0;

    display: grid;

    place-content: center;

    text-align: center;

    pointer-events: none;

}


.game-message strong {

    font-size: 18px;

}


.game-message span {

    margin-top: 5px;

    color: #777;

    font:
        9px "DM Mono";

}


.target {

    display: none;

    position: absolute;

    width: 48px;
    height: 48px;

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

    border:
        7px solid white;

    border-radius: 50%;

    background:
        var(--purple);

    box-shadow:
        0 0 25px #a9a0ff;

    cursor: pointer;

}


.game-controls {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-top: 18px;

}


.game-start {

    padding:
        12px 20px;

    background: white;

    color: #08090b;

    border: 0;

    font-size: 10px;

    font-weight: 800;

    cursor: pointer;

}


#gameStatus {

    font:
        9px "DM Mono";

    color: #777;

}


/* CONTACT */

.contact {

    padding-top: 80px;

}


.contact-box {

    padding:
        65px;

    background:
        radial-gradient(
            circle at 85% 15%,
            #40386644,
            transparent 35%
        ),
        var(--surface);

    border:
        1px solid var(--border);

}


.contact-box h2 {

    margin:
        25px 0 15px;

    font-size:
        clamp(44px,6vw,75px);

    line-height: .95;

}


.contact-box p {

    color: var(--muted);

    font-size: 13px;

    margin-bottom: 27px;

}


.email {

    font:
        15px "DM Mono";

    padding-bottom: 5px;

    border-bottom:
        1px solid #777;

}


.email span {

    color: var(--purple);

    margin-left: 8px;

}


/* FOOTER */

footer {

    max-width: var(--max);

    margin: auto;

    padding:
        25px 28px 35px;

    display: flex;

    justify-content: space-between;

    border-top:
        1px solid var(--border);

    font:
        8px "DM Mono";

    color: #666;

}


footer a:hover {
    color: white;
}


/* TOP */

.top-button {

    position: fixed;

    right: 25px;
    bottom: 25px;

    width: 42px;
    height: 42px;

    border:
        1px solid var(--border);

    background:
        #121419;

    color: white;

    cursor: pointer;

    opacity: 0;

    pointer-events: none;

    transition: .25s;

}


.top-button.show {

    opacity: 1;

    pointer-events: auto;

}


/* ANIMATION */

.reveal {

    opacity: 0;

    transform:
        translateY(25px);

    transition:
        .7s ease;

}


.reveal.visible {

    opacity: 1;

    transform:
        none;

}


/* TABLET */

@media(max-width:850px) {

    .navbar nav {

        position: absolute;

        display: none;

        top: 75px;

        right: 20px;

        flex-direction: column;

        gap: 0;

        background:
            #101216;

        border:
            1px solid var(--border);

        z-index: 20;

    }


    .navbar nav.open {
        display: flex;
    }


    .navbar nav a {

        padding:
            13px 20px;

    }


    .menu-btn {
        display: block;
    }


    .hero {

        grid-template-columns: 1fr;

        padding-top: 70px;

    }


    .hero-photo {

        min-height: 430px;

    }


    .about-grid {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    .skills-grid {

        grid-template-columns:
            repeat(2,1fr);

    }


    .projects {

        grid-template-columns: 1fr;

    }


    .project.featured {

        grid-column: auto;

        display: block;

    }


    .featured .project-image {

        height: 330px;

    }


    .section-header,
    .skills-heading,
    .education-heading,
    .game-intro {

        display: block;

    }


    .section-header > p,
    .skills-heading p,
    .education-heading p,
    .game-intro p {

        margin-top: 15px;

    }

}


/* MOBILE */

@media(max-width:520px) {

    .navbar {

        padding:
            0 20px;

    }


    .hero {

        padding:
            65px 20px;

    }


    .hero h1 {

        font-size: 52px;

    }


    .hero-photo {

        min-height: 390px;

    }


    .photo-frame {

        height: 390px;

    }


    .floating-card {

        right: -5px;

        bottom: 20px;

        width: 190px;

    }


    .section {

        padding:
            90px 20px;

    }


    .skills-grid {

        grid-template-columns: 1fr;

    }


    .learning-bar {

        grid-template-columns: 1fr;

    }


    .education-item {

        grid-template-columns: 1fr;

    }


    .edu-line {

        display: none;

    }


    .edu-content {

        padding-left: 0;

    }


    .current-badge {

        position: static;

        display: inline-block;

        margin-bottom: 8px;

    }


    .stats {

        gap: 20px;

        flex-wrap: wrap;

    }


    .project-big-title {

        font-size: 40px;

    }


    .contact-box {

        padding:
            40px 25px;

    }


    .game-arena {

        height: 320px;

    }


    .game-controls {

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

    }


    footer {

        flex-direction: column;

        gap: 12px;

    }

}