:root {
    --font-mono: "Courier New", monospace;
    --color-bg: #000;
    --color-text: #fff;
    --color-accent: #f00;
    --border-color: #fff;
}

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

html {
    overflow-x: hidden;
    width: 100%;
}

body {
    min-height: 100dvh;
    width: 100%;
    max-width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    background: center/cover fixed no-repeat;
    color: #333;
    overflow-x: hidden;
    position: relative;
}

h1 {
    text-align: center;
    margin-block-start: clamp(2rem, 5vh, 4rem);
}

p {
    text-align: center;
    font-size: clamp(1rem, 2vw, 1.2rem);
}


.status,
.items,
.about,
.projects,
.social {
    position: absolute;
    background: var(--color-bg);
    border: clamp(0.25rem, 0.4vw, 0.3125rem) solid var(--border-color);
    color: var(--color-text);
    font-family: var(--font-mono);
    container-type: inline-size;
}

.status,
.items {
    inset-inline-start: clamp(0.5rem, 4vw, 3rem);
    inline-size: min(38vw, 12rem);
    padding-inline: clamp(0.625rem, 2vw, 1.5rem);
}

.status {
    inset-block-start: clamp(0.5rem, 2.5vh, 2rem);
    padding-block: clamp(0.625rem, 1.8vh, 1.25rem);
    font-size: clamp(1rem, 1.8vw, 1.3125rem);
    line-height: 1.6;
}

.status a {
    color: var(--color-text);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.status a:hover {
    opacity: 0.7;
}

.status .name {
    font-size: clamp(1.25rem, 3.2cqi, 1.75rem);
    font-weight: bold;
    margin-block-end: clamp(0.5rem, 1.2vh, 0.625rem);
}

.status .info div {
    font-size: clamp(1.125rem, 2.8cqi, 1.5rem);
    font-weight: bold;
    line-height: 1.6;
}

.items {
    inset-block-start: clamp(9rem, 24vh, 16rem);
    padding-block: clamp(0.625rem, 1.8vh, 1.25rem);
}

.items a {
    color: var(--color-text);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.items a:hover {
    opacity: 0.7;
}

.items ul {
    list-style: none;
}

.items li {
    font-weight: bold;
    margin-block-end: clamp(0.5rem, 1.5vh, 1rem);
    font-size: clamp(1.125rem, 3.8cqi, 1.875rem);
    text-align: center;
}

.items .heart {
    color: var(--color-accent);
    margin-inline-end: 0.375rem;
}

.about,
.projects,
.social {
    inset-block-start: clamp(0.5rem, 2.5vh, 2rem);
    inset-inline-start: min(44vw, clamp(12.5rem, 28vw, 18rem));
    inline-size: min(54vw, 36rem);
    max-block-size: calc(100dvh - clamp(1rem, 5vh, 4rem));
    padding-block: clamp(0.625rem, 2vh, 1.5rem);
    padding-inline: clamp(0.625rem, 2vw, 1.5rem);
    font-size: clamp(0.75rem, 1.5vw, 1.125rem);
    line-height: 1.6;
    overflow-y: auto;
}

.about,
.projects {
    inset-block-end: clamp(0.5rem, 1.5vh, 1.25rem);
}

.social {
    inset-block-end: calc(100dvh - clamp(9rem, 24vh, 16rem) + clamp(0.625rem, 1.8vh, 1.25rem));
}

.about h2,
.projects h2,
.social h2 {
    font-size: clamp(1.125rem, 2.5vw, 1.75rem);
    font-weight: bold;
    margin-block-end: clamp(0.625rem, 2vh, 1.5rem);
    color: var(--color-text);
}

.about p,
.projects p,
.social p {
    margin-block-end: clamp(0.625rem, 2vh, 1.25rem);
    font-weight: bold;
    text-align: left;
}

.about a,
.projects a,
.social a {
    color: var(--color-text);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.about a:hover,
.projects a:hover,
.social a:hover {
    opacity: 0.7;
}

.projects ul li a,
.social ul li a {
    color: #add8e6;
    font-weight: bold;
}

.projects ul li a:hover,
.social ul li a:hover {
    color: #e0f6ff;
    opacity: 1;
}


@media screen and (min-width: 48rem) {
    .status,
    .items {
        inset-inline-start: clamp(3.25rem, 5vw, 4.25rem);
        inline-size: min(40vw, 15rem);
        padding-inline: clamp(1.25rem, 2vw, 1.625rem);
        border-width: clamp(0.3125rem, 0.45vw, 0.375rem);
    }

    .status {
        inset-block-start: clamp(2.25rem, 3.5vh, 3rem);
        padding-block: clamp(1rem, 1.8vh, 1.375rem);
        font-size: clamp(1.1875rem, 1.8vw, 1.375rem);
    }

    .items {
        inset-block-start: clamp(14.5rem, 26vh, 18rem);
        min-block-size: clamp(12rem, 28vh, 15rem);
        padding-block: clamp(1.75rem, 3.5vh, 2.5rem);
        font-size: clamp(1.4375rem, 2.3vw, 1.6875rem);
        line-height: 2;
    }

    .items li {
        font-size: clamp(1.625rem, 4.2cqi, 2rem);
    }

    .about,
    .projects,
    .social {
        inset-block-start: clamp(2.25rem, 3.5vh, 3rem);
        inset-inline-start: clamp(19rem, 43vw, 22rem);
        inline-size: min(48vw, 38rem);
        max-block-size: calc(100dvh - clamp(4.5rem, 7vh, 6rem));
        min-block-size: clamp(26rem, 58vh, 35rem);
        padding-block: clamp(2rem, 4vh, 3rem);
        padding-inline: clamp(1.75rem, 3.5vw, 2.5rem);
        border-width: clamp(0.3125rem, 0.45vw, 0.375rem);
        font-size: clamp(1.0625rem, 1.7vw, 1.1875rem);
    }

    .about,
    .projects {
        inset-block-end: clamp(1.5rem, 2.5vh, 2.25rem);
    }

    .social {
        inset-block-end: calc(100dvh - clamp(14.5rem, 26vh, 18rem) + clamp(1.75rem, 3.5vh, 2.5rem));
    }

    .about h2,
    .projects h2,
    .social h2 {
        font-size: clamp(1.5rem, 2.8vw, 1.875rem);
    }
}



@media screen and (min-width: 64rem) {
    .status,
    .items {
        inset-inline-start: clamp(4rem, 6vw, 6rem);
        inline-size: min(35vw, 17.5rem);
        padding-inline: clamp(1.5rem, 2.5vw, 2rem);
        border-width: clamp(0.375rem, 0.5vw, 0.4375rem);
    }

    .status {
        inset-block-start: clamp(3rem, 4.5vh, 4.5rem);
        padding-block: clamp(1.25rem, 2.2vh, 1.75rem);
        font-size: clamp(1.25rem, 1.9vw, 1.4375rem);
    }

    .items {
        inset-block-start: clamp(17rem, 30vh, 21.5rem);
        min-block-size: clamp(14rem, 32vh, 18rem);
        padding-block: clamp(2rem, 4.2vh, 3rem);
        font-size: clamp(1.5625rem, 2.5vw, 1.8125rem);
        line-height: 2;
    }

    .items li {
        font-size: clamp(1.875rem, 4.8cqi, 2.25rem);
    }

    .about,
    .projects,
    .social {
        inset-block-start: clamp(3rem, 4.5vh, 4.5rem);
        inset-inline-start: clamp(23rem, 46vw, 26rem);
        inline-size: min(50vw, 44rem);
        max-block-size: calc(100dvh - clamp(6rem, 9vh, 9rem));
        min-block-size: clamp(32rem, 68vh, 42rem);
        padding-block: clamp(2.5rem, 5vh, 3.5rem);
        padding-inline: clamp(2rem, 4vw, 3rem);
        border-width: clamp(0.375rem, 0.5vw, 0.4375rem);
        font-size: clamp(1.125rem, 1.8vw, 1.25rem);
    }

    .about,
    .projects {
        inset-block-end: clamp(2rem, 3.5vh, 3.25rem);
    }

    .social {
        inset-block-end: calc(100dvh - clamp(17rem, 30vh, 21.5rem) + clamp(2rem, 4.2vh, 3rem));
    }

    .about h2,
    .projects h2,
    .social h2 {
        font-size: clamp(1.625rem, 3vw, 2rem);
    }
}



@media screen and (min-width: 90rem) {
    .status,
    .items {
        inset-inline-start: clamp(5.25rem, 7vw, 7.5rem);
        inline-size: min(30vw, 20rem);
        padding-inline: clamp(1.75rem, 2.8vw, 2.25rem);
        border-width: clamp(0.4375rem, 0.55vw, 0.5rem);
    }

    .status {
        inset-block-start: clamp(4rem, 5.5vh, 6rem);
        padding-block: clamp(1.5rem, 2.5vh, 2rem);
        font-size: clamp(1.3125rem, 2vw, 1.5rem);
    }

    .items {
        inset-block-start: clamp(22rem, 37vh, 29rem);
        min-block-size: clamp(16rem, 36vh, 21rem);
        padding-block: clamp(2rem, 4.2vh, 3.5rem);
        font-size: clamp(1.5625rem, 2.5vw, 1.8125rem);
        line-height: 2;
    }

    .items li {
        font-size: clamp(1.875rem, 4.8cqi, 2.375rem);
    }

    .about,
    .projects,
    .social {
        inset-block-start: clamp(4rem, 5.5vh, 6rem);
        inset-inline-start: clamp(26.5rem, 36vw, 32rem);
        inline-size: min(52vw, 54rem);
        max-block-size: calc(100dvh - clamp(8rem, 11vh, 12rem));
        min-block-size: clamp(38rem, 72vh, 52rem);
        padding-block: clamp(3rem, 6vh, 4.5rem);
        padding-inline: clamp(2.75rem, 5vw, 4rem);
        border-width: clamp(0.4375rem, 0.55vw, 0.5rem);
        font-size: clamp(1.1875rem, 1.9vw, 1.3125rem);
    }

    .about,
    .projects {
        inset-block-end: clamp(2.5rem, 4vh, 4.25rem);
    }

    .social {
        inset-block-end: calc(100dvh - clamp(22rem, 37vh, 29rem) + clamp(2rem, 4.2vh, 3.5rem));
    }

    .about h2,
    .projects h2,
    .social h2 {
        font-size: clamp(1.75rem, 3.2vw, 2.125rem);
    }
}



@media screen and (min-width: 120rem) {
    .status,
    .items {
        inset-inline-start: clamp(7rem, 8vw, 9rem);
        inline-size: min(28vw, 22.5rem);
        padding-inline: clamp(2rem, 3vw, 2.5rem);
        border-width: clamp(0.5rem, 0.6vw, 0.5625rem);
    }

    .status {
        inset-block-start: clamp(5.5rem, 6.5vh, 7.5rem);
        padding-block: clamp(1.75rem, 2.8vh, 2.25rem);
        font-size: clamp(1.375rem, 2.1vw, 1.5625rem);
    }

    .items {
        inset-block-start: clamp(27rem, 43vh, 35.5rem);
        min-block-size: clamp(18rem, 40vh, 24rem);
        padding-block: clamp(2.5rem, 5vh, 4rem);
        font-size: clamp(1.625rem, 2.6vw, 1.875rem);
        line-height: 2;
    }

    .items li {
        font-size: clamp(2rem, 5.2cqi, 2.5rem);
    }

    .about,
    .projects,
    .social {
        inset-block-start: clamp(5.5rem, 6.5vh, 7.5rem);
        inset-inline-start: clamp(30.5rem, 34vw, 38rem);
        inline-size: min(54vw, 65rem);
        max-block-size: calc(100dvh - clamp(11rem, 13vh, 15rem));
        min-block-size: clamp(46rem, 78vh, 62rem);
        padding-block: clamp(3.5rem, 7vh, 5.25rem);
        padding-inline: clamp(3.25rem, 6vw, 4.75rem);
        border-width: clamp(0.5rem, 0.6vw, 0.5625rem);
        font-size: clamp(1.25rem, 2vw, 1.375rem);
    }

    .about,
    .projects {
        inset-block-end: clamp(3.5rem, 5vh, 5.75rem);
    }

    .social {
        inset-block-end: calc(100dvh - clamp(27rem, 43vh, 35.5rem) + clamp(2.5rem, 5vh, 4rem));
    }

    .about h2,
    .projects h2,
    .social h2 {
        font-size: clamp(1.875rem, 3.5vw, 2.25rem);
    }
}



@media screen and (min-width: 160rem) {
    .status,
    .items {
        inset-inline-start: clamp(8.5rem, 9vw, 10.5rem);
        inline-size: min(25vw, 26.25rem);
        padding-inline: clamp(2.25rem, 3.5vw, 3rem);
        border-width: clamp(0.5625rem, 0.7vw, 0.6875rem);
    }

    .status {
        inset-block-start: clamp(7rem, 7.5vh, 9rem);
        padding-block: clamp(2rem, 3.2vh, 2.75rem);
        font-size: clamp(1.5rem, 2.3vw, 1.6875rem);
    }

    .items {
        inset-block-start: clamp(32rem, 49vh, 42.5rem);
        min-block-size: clamp(20rem, 44vh, 28rem);
        padding-block: clamp(3rem, 5.5vh, 4.75rem);
        font-size: clamp(1.75rem, 2.8vw, 2rem);
        line-height: 2;
    }

    .items li {
        font-size: clamp(2.1875rem, 5.6cqi, 2.75rem);
    }

    .about,
    .projects,
    .social {
        inset-block-start: clamp(7rem, 7.5vh, 9rem);
        inset-inline-start: clamp(36rem, 32vw, 46rem);
        inline-size: min(56vw, 80rem);
        max-block-size: calc(100dvh - clamp(14rem, 15vh, 18rem));
        min-block-size: clamp(56rem, 82vh, 76rem);
        padding-block: clamp(4.25rem, 8vh, 6.25rem);
        padding-inline: clamp(4rem, 7vw, 5.75rem);
        border-width: clamp(0.5625rem, 0.7vw, 0.6875rem);
        font-size: clamp(1.375rem, 2.2vw, 1.5rem);
    }

    .about,
    .projects {
        inset-block-end: clamp(4.5rem, 6vh, 6.75rem);
    }

    .social {
        inset-block-end: calc(100dvh - clamp(32rem, 49vh, 42.5rem) + clamp(3rem, 5.5vh, 4.75rem));
    }

    .about h2,
    .projects h2,
    .social h2 {
        font-size: clamp(2rem, 3.8vw, 2.5rem);
    }
}


@media screen and (max-width: 30rem) {
    .status {
        inset-block-start: clamp(0.5rem, 2vh, 1.25rem);
        inset-inline-start: clamp(0.5rem, 2vw, 1.25rem);
        inline-size: min(38vw, 11.25rem);
        padding-block: clamp(0.625rem, 1.5vh, 1.125rem);
        padding-inline: clamp(0.625rem, 1.5vw, 1.125rem);
        border-width: clamp(0.1875rem, 0.3vw, 0.25rem);
        font-size: clamp(0.9375rem, 1.5vw, 1.1875rem);
    }

    .items {
        inset-block-start: clamp(10rem, 26vh, 15rem);
        inset-inline-start: clamp(0.5rem, 2vw, 1.25rem);
        inline-size: min(38vw, 11.25rem);
        min-block-size: clamp(7rem, 22vh, 11rem);
        padding-block: clamp(1rem, 3vh, 2rem);
        padding-inline: clamp(0.625rem, 2vw, 1.375rem);
        border-width: clamp(0.1875rem, 0.3vw, 0.25rem);
        font-size: clamp(1.125rem, 1.9vw, 1.5rem);
        line-height: 2;
    }

    .items li {
        font-size: clamp(1.125rem, 3.2cqi, 1.625rem);
    }

    .about,
    .projects,
    .social {
        inset-block-start: clamp(0.5rem, 2vh, 1.25rem);
        inset-inline-start: min(44vw, clamp(12.5rem, 50vw, 15rem));
        inline-size: min(54vw, 26rem);
        max-block-size: calc(100dvh - clamp(1rem, 4vh, 2.5rem));
        padding-block: clamp(1rem, 3vh, 2rem);
        padding-inline: clamp(0.625rem, 2vw, 1.375rem);
        border-width: clamp(0.1875rem, 0.3vw, 0.25rem);
        font-size: clamp(0.75rem, 1.4vw, 1.0625rem);
    }

    .about h2,
    .projects h2,
    .social h2 {
        font-size: clamp(1rem, 2.2vw, 1.5rem);
    }

    .about,
    .projects {
        inset-block-end: clamp(0.5rem, 2vh, 1.25rem);
    }

    .social {
        inset-block-start: clamp(0.5rem, 2vh, 1.25rem);
        inset-block-end: clamp(0.5rem, 2vh, 1.25rem);
    }
}

@media screen and (max-block-size: 31.25rem) and (orientation: landscape) {
    .status {
        inset-block-start: clamp(0.5rem, 1.5vh, 0.75rem);
        inset-inline-start: clamp(0.5rem, 2vw, 1.25rem);
        inline-size: min(30vw, 10rem);
        padding-block: clamp(0.5rem, 1vh, 0.75rem);
        padding-inline: clamp(0.5rem, 1vw, 0.75rem);
        border-width: 0.1875rem;
        font-size: clamp(0.875rem, 1.4vw, 1.0625rem);
    }

    .items {
        inset-block-start: clamp(0.5rem, 1.5vh, 0.75rem);
        inset-inline-start: clamp(32vw, 38vw, 15rem);
        inline-size: min(30vw, 10rem);
        min-block-size: clamp(7rem, 85vh, 10rem);
        padding-block: clamp(0.75rem, 2vh, 1.375rem);
        padding-inline: clamp(0.5rem, 1.2vw, 0.875rem);
        border-width: 0.1875rem;
        font-size: clamp(0.875rem, 1.7vw, 1.3125rem);
        line-height: 1.9;
    }

    .items li {
        font-size: clamp(1rem, 3cqi, 1.5rem);
    }

    .about,
    .projects,
    .social {
        inset-block-start: clamp(0.5rem, 1.5vh, 0.75rem);
        inset-inline-start: min(66vw, clamp(24rem, 70vw, 30rem));
        inline-size: min(33vw, 15rem);
        max-block-size: calc(100dvh - clamp(1rem, 3vh, 1.5rem));
        padding-block: clamp(0.75rem, 2vh, 1.5rem);
        padding-inline: clamp(0.5rem, 1.5vw, 1rem);
        border-width: 0.1875rem;
        font-size: clamp(0.625rem, 1.2vw, 0.875rem);
    }

    .about h2,
    .projects h2,
    .social h2 {
        font-size: clamp(0.875rem, 1.8vw, 1.125rem);
    }

    .about,
    .projects {
        inset-block-end: clamp(0.5rem, 1.5vh, 0.75rem);
    }

    .social {
        inset-block-end: calc(100dvh - clamp(0.5rem, 1.5vh, 0.75rem) - clamp(7rem, 85vh, 10rem));
    }
}