#aboutScreen {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin: 44pt;

    justify-content: space-between;
}

@media (max-width: 1500px) {
    #aboutScreen {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 1000px) {
    #aboutScreen {
        margin: 12pt;
    }
}

#aboutTop {
    display: flex;
    align-items: left;
    flex-direction: column;
    margin-left: 44pt;

}

#portrait {
    width: 200px;
    height: 200px;
    border-radius: 100%;
}

#aboutText {
    display: flex;
    flex-direction: column;
    margin-right: 44pt;
    margin-top: 24pt;
}

#bannerTextImgAbout {
    width: 250px;
    padding-bottom: 12pt;
}

#aboutDescription {
    color: black;
    font-size: 14pt;
    text-align: left;
    font-weight: 500;
    max-width: 500px;
    min-width: 200px;
}

#linksGridWrapperAbout {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


#linksGridAbout {

    max-width: 720px;
    display: flex;
    flex-wrap: wrap;
    padding: 12px;
    justify-content: center;
    box-sizing: border-box;

}


.linkThumbnailAbt {
    aspect-ratio: 1;
    width: 200px;
    border-radius: 42px;
    position: relative;
    box-shadow: 0 6px 34px 0 rgba(0, 0, 0, 0.05), 0 3px 6px -3px rgba(0, 0, 0, 0.07);
    transition: scale 0.3s, box-shadow 0.3s, opacity 0.3s;
    transition-timing-function: ease-out;
    margin: 12pt;
    cursor: url(img/link.svg), auto;
    @starting-style {
        opacity: 0;
        scale: 0.95;
    }
}

.linkThumbnailAbt::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 42px;
    background-size: cover;
    border: 1px solid rgba(0, 0, 0, 0.03);
    box-shadow: inset 0 -3px 3px -1px rgba(255, 255, 255, 0.4), inset 0 2px 7px -1px rgba(255, 255, 255, 0.60), inset 0 -12px 43px -3px rgba(0, 0, 0, 0.04);
    mask-border: url("img/mask@2x.png") 49% fill / 66px;
}


.linkThumbnailAbt:hover:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0) 100%);
    border-radius: 42px;
    mask-border: url("img/mask@2x.png") 49% fill / 66px;
    transition: opacity 0.3s, scale 0.3s;
    opacity: 1;
    pointer-events: none;
    z-index: 500;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 15px 53px 0 rgba(255, 255, 255, 0.05), inset 0 21px 43px 0 rgba(0, 0, 0, 0.07), inset 0 1px 1px -1px rgba(255, 255, 255, 0.50), inset 0 -1px 1px -1px rgba(255, 255, 255, 0.50), inset 0 -8px 13px -3px rgba(255, 255, 255, 0.08);
    mix-blend-mode: overlay;
}

.linkThumbnailAbt:active:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(255, 255, 255, 0.8) 0%,
            rgba(255, 255, 255, 0) 100%);
    border-radius: 42px;
    mask-border: url("img/mask@2x.png") 49% fill / 66px;
    transition: opacity 0.3s, scale 0.3s, filter 0.3s;
    opacity: 1;
    pointer-events: none;
    z-index: 4000;

    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: inset 0 15px 53px 0 rgba(255, 255, 255, 0.05), inset 0 21px 43px 0 rgba(0, 0, 0, 0.07), inset 0 1px 1px -1px rgba(255, 255, 255, 0.50), inset 0 -1px 1px -1px rgba(255, 255, 255, 0.50), inset 0 -8px 13px -3px rgba(255, 255, 255, 0.08);
    mix-blend-mode: overlay;
}


#link1::before {
    background-image: url("img/links/bg/bg-mail.webp") !important;
    filter: brightness(105%);
    transition: filter 0.3s;
}

#link3::before {
    background-image: url("img/links/bg/bg-yt.webp") !important;
    filter: brightness(107%);
    transition: filter 0.3s;
}

#link4::before {
    background-image: url("img/links/bg/bg-mastodon.webp") !important;
    filter: brightness(105%);
    transition: filter 0.3s;
}

#link8::before {
    background-image: url("img/links/bg/bg-bsky.webp") !important;
    filter: brightness(105%);
    transition: filter 0.3s;
}

#link5::before {
    background-image: url("img/links/bg/bg-tiktok.webp") !important;
    filter: brightness(105%);
    transition: filter 0.3s;
}

#link2::before {
    background-image: url("img/links/bg/bg-ig.webp") !important;
    filter: brightness(106%);
    transition: filter 0.3s;
}

#link6::before {
    background-image: url("img/links/bg/bg-store.webp") !important;
    filter: brightness(105%);
    transition: filter 0.3s;
}

#link7::before {
    background-image: url("img/links/bg/bg-resume.webp") !important;
    filter: brightness(105%);
    transition: filter 0.3s;
}


#link1:hover::before {
    filter: brightness(100%);
}

#link3:hover::before {
    filter: brightness(100%);
}

#link4:hover::before {
    filter: brightness(100%);
}

#link8:hover::before {
    filter: brightness(100%);
}

#link5:hover::before {
    filter: brightness(100%);
}

#link2:hover::before {
    filter: brightness(100%);
}

#link6:hover::before {
    filter: brightness(100%);
}

#link7:hover::before {
    filter: brightness(100%);
}

.linkThumbnailAbt p {
    cursor: url(img/link.svg), auto;
}

#link7 {

    opacity: 0.4;
    cursor: url("img/cursor.svg"), auto !important;
}

#link7:hover,
#link7:active {
    scale: 1 !important;
}


.linkText {
    color: black;
    position: absolute;
    transform: translateX(30px) translateY(100px);
    font-size: 14pt;
    text-align: left;
    font-weight: 500;
    cursor: url("img/link.svg");
}

.linkTextSmall {
    color: black;
    position: absolute;
    transform: translateX(30px) translateY(130px);
    font-size: 11pt;
    text-align: left;
    font-weight: 400;
    opacity: 0;
    filter: blur(2px);
    /* cursor: url("img/hand cursor.svg"), auto;
     */
    /* cursor: url(img/link.svg), auto;
     */
    transition: opacity 0.3s, filter 0.3s;
}

.linkThumbnailAbt:hover {
    scale: 1.05;
    box-shadow: 0 10px 54px 0 rgba(0, 0, 0, 0.09), 0 3px 6px -3px rgba(0, 0, 0, 0.11);
    z-index: 1000;
}

.linkThumbnailAbt:active {
    scale: 0.95;
}



.linkThumbnailAbt:hover .linkTextSmall {
    opacity: 0.5;
    filter: blur(0px);
}

@media (min-width: 762px) {
    .linkTextSmall {
        display: auto;
    }
}


@media (max-width: 760px) and (min-width: 400px) {
    .linkThumbnailAbt {
        aspect-ratio: 1;
        width: 140px;
        border-radius: 30px;
        mask-border: url("img/mask@2x.png") 49% fill / 47px;
    }

    .linkThumbnailAbt::before {
        border-radius: 30px;
        mask-border: url("img/mask@2x.png") 49% fill / 47px;
    }


    .linkThumbnailAbt:hover:after {
        border-radius: 30px;
        mask-border: url("img/mask@2x.png") 49% fill / 47px;
    }

    .linkThumbnailAbt:active:after {
        border-radius: 30px;
        mask-border: url("img/mask@2x.png") 49% fill / 47px;
    }

    .linkThumbnailAbt .linkText {
        color: black;
        position: absolute;
        transform: translateX(20px) translateY(75px);
        font-size: 12pt;
        text-align: left;
        font-weight: 500;
        cursor: url("img/link.svg"), auto;
    }

    .linkThumbnailAbt .linkIconStyled {
        position: absolute;
        transform: translateX(20px) translateY(20px);
        width: 60px;
        height: 60px;
        clip-path: path('M35.8262253,0 C44.2319734,0 47.2801008,0.875212905 50.3531166,2.51867978 C53.4261325,4.16214665 55.8378533,6.57386749 57.4813202,9.64688337 L57.6544613,9.97628503 C59.1578207,12.8894902 59.9696125,15.9525899 59.9991634,23.7285614 L60,35.8262253 C60,44.2319734 59.1247871,47.2801008 57.4813202,50.3531166 C55.8378533,53.4261325 53.4261325,55.8378533 50.3531166,57.4813202 L50.023715,57.6544613 C47.1105098,59.1578207 44.0474101,59.9696125 36.2714386,59.9991634 L24.1737747,60 C15.7680266,60 12.7198992,59.1247871 9.64688337,57.4813202 C6.57386749,55.8378533 4.16214665,53.4261325 2.51867978,50.3531166 L2.34553866,50.023715 C0.842179311,47.1105098 0.0303874578,44.0474101 0.000836648193,36.2714386 L0,24.1737747 C0,15.7680266 0.875212905,12.7198992 2.51867978,9.64688337 C4.16214665,6.57386749 6.57386749,4.16214665 9.64688337,2.51867978 L9.97628503,2.34553866 C12.8894902,0.842179311 15.9525899,0.0303874578 23.7285614,0.000836648193 L35.8262253,0 Z')
    }

    .linkThumbnailAbt .linkIconStyledRetro {
        position: absolute;
        transform: translateX(20px) translateY(20px);
        width: 60px;
        height: 60px;
        clip-path: path('M35.8262253,0 C44.2319734,0 47.2801008,0.875212905 50.3531166,2.51867978 C53.4261325,4.16214665 55.8378533,6.57386749 57.4813202,9.64688337 L57.6544613,9.97628503 C59.1578207,12.8894902 59.9696125,15.9525899 59.9991634,23.7285614 L60,35.8262253 C60,44.2319734 59.1247871,47.2801008 57.4813202,50.3531166 C55.8378533,53.4261325 53.4261325,55.8378533 50.3531166,57.4813202 L50.023715,57.6544613 C47.1105098,59.1578207 44.0474101,59.9696125 36.2714386,59.9991634 L24.1737747,60 C15.7680266,60 12.7198992,59.1247871 9.64688337,57.4813202 C6.57386749,55.8378533 4.16214665,53.4261325 2.51867978,50.3531166 L2.34553866,50.023715 C0.842179311,47.1105098 0.0303874578,44.0474101 0.000836648193,36.2714386 L0,24.1737747 C0,15.7680266 0.875212905,12.7198992 2.51867978,9.64688337 C4.16214665,6.57386749 6.57386749,4.16214665 9.64688337,2.51867978 L9.97628503,2.34553866 C12.8894902,0.842179311 15.9525899,0.0303874578 23.7285614,0.000836648193 L35.8262253,0 Z')
    }
}

.linkIconStyled {
    background-size: contain;
    position: absolute;
    transform: translateX(30px) translateY(30px);
    width: 70px;
    height: 70px;
    transform-origin: 100% 100%;
    z-index: 12000;
    transition: background-image 0.3s, rotate 0.4s, transform-origin 0.4s;
}

.linkIconStyledRetro {
    background-size: contain;
    position: absolute;
    transform: translateX(30px) translateY(30px);
    width: 70px;
    height: 70px;
    transform-origin: 100% 100%;
    z-index: 13000;
    transition: background-image 0.3s, rotate 0.4s, transform-origin 0.4s, opacity 0.4s;
}

#icon-website {
    background-image: url("img/links/styled/logo flat.webp");
}

#icon-email {
    background-image: url("img/links/styled/mail flat.webp");
}

#icon-ig {
    background-image: url("img/links/styled/instagram flat.webp");
}

#icon-resume {

    background-image: url("img/links/styled/resume flat.webp");
}

#icon-bsky {
    background-image: url("img/links/styled/bsky flat.webp");
}

#icon-yt {
    background-image: url("img/links/styled/yt flat.webp");
}

#icon-mastodon {
    background-image: url("img/links/styled/mastodon flat.webp");
}

#icon-tiktok {
    background-image: url("img/links/styled/tiktok flat.webp");
}

#icon-store {
    background-image: url("img/links/styled/store flat.webp");
}

#icon-email-retro {
    opacity: 0;
    background-image: url("img/links/styled/mail.webp");
}

#icon-ig-retro {
    opacity: 0;
    background-image: url("img/links/styled/instagram.webp");
}

#icon-resume-retro {
    opacity: 0;
    background-image: url("img/links/styled/resume.webp");
}

#icon-bsky-retro {
    opacity: 0;
    background-image: url("img/links/styled/bsky.webp");
}

#icon-yt-retro {
    opacity: 0;
    background-image: url("img/links/styled/yt.webp");
}

#icon-mastodon-retro {
    opacity: 0;
    background-image: url("img/links/styled/mastodon.webp");
}

#icon-tiktok-retro {
    opacity: 0;
    background-image: url("img/links/styled/tiktok.webp");
}

#icon-store-retro {
    opacity: 0;
    background-image: url("img/links/styled/store.webp");
}

#icon-website-retro {
    opacity: 0;
    background-image: url("img/links/styled/logo.webp");
}

.linkThumbnailAbt:hover #icon-email-retro {
    opacity: 1;
}

.linkThumbnailAbt:hover #icon-ig-retro {
    opacity: 1;
}

.linkThumbnailAbt:hover #icon-resume-retro {
    opacity: 1;
}

.linkThumbnailAbt:hover #icon-bsky-retro {
    opacity: 1;
}

.linkThumbnailAbt:hover #icon-yt-retro {
    opacity: 1;
}

.linkThumbnailAbt:hover #icon-mastodon-retro {
    opacity: 1;
}

.linkThumbnailAbt:hover #icon-tiktok-retro {
    opacity: 1;
}

.linkThumbnailAbt:hover #icon-store-retro {
    opacity: 1;
}

.linkThumbnailAbt:hover #icon-website-retro {
    opacity: 1;
}