:root {
    --step--2: clamp(0.4297rem, 1.0279rem + -0.6646cqi, 0.8784rem);
    --step--1: clamp(0.6953rem, 1.0178rem + -0.3584cqi, 0.9372rem);
    --step-0: clamp(1rem, 0.9583rem + 0.1852cqi, 1.125rem);
    --step-1: clamp(1.067rem, 0.8159rem + 1.1159cqi, 1.8203rem);
    --step-2: clamp(1.1385rem, 0.5363rem + 2.6766cqi, 2.9452rem);
    --step-3: clamp(1.2148rem, 0.0313rem + 5.26cqi, 4.7653rem);
    --step-4: clamp(1.2962rem, -0.8419rem + 9.5023cqi, 7.7102rem);
    --step-5: clamp(1.383rem, -2.3144rem + 16.4328cqi, 12.4751rem);
}




main {
    background: var(--TSBackground);
    position: absolute;
    z-index: 2;
    top: 7.5%;
    left: 16.5%;
    width: 67%;
    height: 37.5%;
}


body {
    --TSBackground: linear-gradient(145deg, #ffffff, #b6d2ca);
    --aboutMe: linear-gradient(145deg, hotpink, rgb(155, 51, 103));
    --antwoord: rgb(71, 71, 71);
}

.dark-theme {
    --TSBackground: linear-gradient(145deg, #6a6a6a, #303030);
    --aboutMe: linear-gradient(145deg, rgb(105, 145, 255), rgb(51, 89, 155));
    --antwoord: rgb(222, 222, 222);
}

main {
    color: var(--antwoord);
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    container-type: inline-size;
}



main img {
    position: absolute;
    top: 40%;
    left: 2%;
    width: min(42%, 400px);
    max-width: 42%;
    max-height: 90%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    transform: translateY(-50%);
    background: var(--aboutMe);
    border-radius: 1em;
    box-shadow: 1rem 1rem 1em rgb(53 63 65 / 35%);
}

h1 {
    position: absolute;
    top: 72%;
    left: 2%;
    font-family: "RodinNTLG B", system-ui;
    font-size: 3.2cqi;
}

h2 {
    position: absolute;
    top: 83%;
    left: 2%;
    font-family: "RodinNTLG N", system-ui;
    font-size: 1.6cqi;
}

main ul {
    display: grid;
    grid-template-columns: auto auto;
    position: absolute;
    top: 10%;
    left: 45%;
    width: 70%;
    max-width: 50%;
    gap: 0.7rem;
    text-decoration: none;
    list-style-type: none;
    padding: 0;
}


main ul .V {
    color: white;
    background: var(--aboutMe);
    padding: 1em;
    border-radius: 1em;
    box-shadow: 0.0625rem 0.0625rem 1rem rgb(53 63 65 / 35%);
    font-size: 1.7cqi;
    overflow-wrap: anywhere;
}

main ul .A {
    color: var(--antwoord);
    background: var(--TSBackground);
    padding: 1em;
    border-radius: 1em;
    box-shadow: 0.0625rem 0.0625rem 1rem rgb(53 63 65 / 35%);
    font-size: 1.7cqi;
    overflow-wrap: anywhere;
}

@media (max-width: 1000px) {
    main {
        display: block;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0.75rem;
        scrollbar-width: thin;
    }

    main img {
        position: relative;
        top: auto;
        left: auto;
        float: left;
        width: clamp(72px, 25vw, 120px);
        max-width: 100%;
        max-height: none;
        margin: 0 0.75rem 0.5rem 0;
        transform: none;
        padding: 1rem;
    }

    h1,
    h2 {
        position: static;
        margin: 0.25rem 0;
        font-size: clamp(0.9rem, 4vw, 1.25rem);
        padding: 1em;
    }

    main ul {
        position: static;
        clear: both;
        width: 100%;
        max-width: none;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.3rem;
        margin-top: 0.5rem;
    }

    main ul .V,
    main ul .A {
        min-width: 0;
        margin: 0;
        padding: 0.5rem;
        font-size: var(--step-2);
        overflow-wrap: anywhere;
    }
}