body {
    overflow-x: hidden;
}

@media (max-width: 600px) {
    main{gap:25px;}
    main>.pageLinkSection {
        --link-height: 100px;
        >a {font-size: 1.5em}
    }
}

@media (min-width: 600px) {
    main{gap:50px;}
    main>.pageLinkSection {
        --link-height: 200px;
        >a {font-size: 3.5em}
    }
}

.welcomeNotice {
    width: min(800px,80vw);
    margin-inline: auto;
    text-align: center;
    padding: 2em;
    border-radius: 50px;
    box-sizing: border-box;
    margin-block: 20px;
}

main {
    width: min(600px,70vw);
    margin-inline: auto;
    margin-block: 30px;
    display: flex;
    flex-direction: column;
    align-items: stretch;

    >.pageLinkSection{
        position: relative;
        width: 100%;
        z-index: 1;

        height: var(--link-height);

        backdrop-filter: brightness(1);
        >a {
            display: flex;
            border: 5px solid rgba(255,171,0,1);
            background-image: linear-gradient(167deg, rgba(255,221,150,0.6) 0%, rgba(255,255,150,0.6) 42%, rgba(200,249,255,0.6) 100%);

            box-sizing: border-box;

            padding-inline: calc(var(--link-height) * 0.75);

            width: 100%;
            height: 100%;
            border-radius: 200px;
            color: black;
            text-decoration: none;
            line-height: 100%;
            text-align: center;
            align-items: center;
            justify-content: center;
            font-family: var(--font-yuruka),sans-serif;

            mix-blend-mode: screen;

            backdrop-filter: brightness(0);

            transition: transform 0.25s ease;

            &:hover, &:active, &:focus-visible {transform: scale(1.1)}
        }
        >.images-container {
            z-index: -1;
            position: absolute;
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            &.meet-the-team>img {border-radius: 100%};
            >img {
                position: absolute;
                top: var(--top);
                right: var(--right);
                left: var(--left);
                bottom: var(--bottom);
                height: var(--height);
                width: auto;

                transition: transform 0.25s ease;
                transform: rotate(var(--angle));
            }

            &:has(~a:hover, ~a:active, ~a:focus-visible)>img {
                transform: translate(calc(var(--distance) * cos(var(--angle-move))), calc(var(--distance) * sin(var(--angle-move)))) rotate(calc(var(--angle) + var(--angle-rotate))) scale(var(--scale));
            }
            /*background: red;*/
        }
    }
}