/*-------- Anchors ----------------------------------------------------------------*/
html {
    overflow-y: scroll;
    background-color: black;
}

.sticky {
    height: 100vh;
    width: 100%;
    top: 0vh;
    left: 0vw;
    overflow: hidden;
}

.connect-background {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 150%;
    width: 150%;
    user-select: none;
    pointer-events: none;
    background-color: black;
}

.connect {
    --dy: 0vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + var(--dy)));
}

.connect-title {
    position: absolute;
    color: white;
    font-family: 'Ubuntu', sans-serif;
    white-space: nowrap;
}

.copyright-notice {
    position: absolute;
    color: #606060;
    font-family: 'Ubuntu', sans-serif;
}

@media (min-aspect-ratio: 1/1) {
    .connect {
        height: 100vh;
        width: 100vh;
    }

    .connect-title {
        top: 10vh;
        left: 5vh;
        font-size: 5vh;
    }

    .copyright-notice {
        bottom: 1vh;
        right: 3vh;
        font-size: 1.5vh;
    }
}

@media (aspect-ratio: 1/1), (max-aspect-ratio: 1/1) {
    .connect {
        height: 100vh;
        width: 100vw;
    }

    .connect-title {
        top: calc(35vh - 25vw);
        transform: translate(-50%, 0%);
        left: 50vw;
        font-size: 8vw;
    }

    .copyright-notice {
        bottom: 3vw;
        right: 6vw;
        font-size: 2.5vw;
    }
}

/* E-mail */
.email {
    position: absolute;
    transform: translate(-50%, -50%);
    border: none;
    background-color: transparent;
    padding: 0;
    font-family: 'Ubuntu', sans-serif;
    color: white;
    user-select: none;
    white-space: nowrap;
}

    .email:focus {
        outline: 0;
    }

    .email .email-tooltip {
        opacity: 0;
        visibility: hidden;
        transition: 0.75s;
    }

@media (min-aspect-ratio: 1/1) {
    .email {
        left: 57.5vh;
        top: 42.25vh;
        font-size: 6.8vh;
    }

        .email:hover .email-tooltip {
            opacity: 1;
            visibility: visible;
            transition: 0.25s;
        }

    .email-tooltip {
        --pointer-size: 2.5vh;
        top: 0vh; /* How close is the tooltip to an element */
        width: 27vh;
        height: 9vh;
    }

        .email-tooltip .--background {
            border-radius: 1vh;
        }

        .email-tooltip .--text {
            font-size: 3.5vh;
        }

    .email-phixyl-letter {
        width: 3.572vh;
        margin-left: 0.4vh;
        margin-right: 0.3vh;
        transform: translate(0, 1.2425vh);
    }
}

@media (aspect-ratio: 1/1), (max-aspect-ratio: 1/1) {
    .email {
        left: 50vw;
        top: calc(50vh - 20.8vw);
        font-size: 8.35vw;
    }

        .email.--copied .email-tooltip {
            opacity: 1;
            visibility: visible;
            transition: 0.25s;
        }

    .email-tooltip {
        --pointer-size: 2.5vw;
        top: -1vw; /* How close is the tooltip to an element */
        width: 30vw;
        height: 10vw;
    }

        .email-tooltip .--background {
            border-radius: 2vw;
        }

        .email-tooltip .--text {
            font-size: 4vw;
        }

    .email-phixyl-letter {
        width: 4.3862vw;
        margin-left: 0.4911vw;
        margin-right: 0.3684vw;
        transform: translate(0, 1.5257vw);
    }
}

/* Social icons */
.soc-icos {
    position: absolute;
    transform: translate(-50%, -50%);
}

.soc-ico {
    position: absolute;
    transform: translate(-50%, -50%);
    border-radius: var(--roundness);
    user-select: none;
}

    .soc-ico .--background {
        height: 100%;
        width: 100%;
        border-radius: var(--roundness);
    }

    .soc-ico img {
        position: absolute;
        top: 50%;
        left: 50%;
        height: auto;
        width: 50%;
        transform: translate(-50%, -50%);
    }

    .soc-ico.--email .--background {
        background-color: #404040;
    }

    .soc-ico.--facebook .--background {
        background-color: #1877F2;
    }

    .soc-ico.--youtube .--background {
        background-color: #FF0000;
    }

    .soc-ico.--instagram .--background {
        background-color: #C13584;
    }

    .soc-ico.--linkedin .--background {
        background-color: #2867B2;
    }

    .soc-ico.--linkedin img {
        transform: translate(-42%, -50%);
        height: 50%;
        width: auto;
    }

    .soc-ico.--twitter .--background {
        background-color: #1DA1F2;
    }

@media (min-aspect-ratio: 1/1) {
    .soc-icos {
        left: 50vh;
        top: 50vh;
    }

    .soc-ico {
        --roundness: 2vh;
        height: 12vh;
        width: 12vh;
        filter: brightness(92%) contrast(120%) saturate(70%);
    }

        .soc-ico:hover {
            filter: brightness(100%) contrast(100%) saturate(100%);
        }

        .soc-ico.--email {
            top: -7.5vh;
            left: -30vh;
        }

        .soc-ico.--facebook {
            top: 7.5vh;
            left: -30vh;
        }

        .soc-ico.--youtube {
            top: 7.5vh;
            left: -15vh;
        }

        .soc-ico.--instagram {
            top: 7.5vh;
            left: 0vh;
        }

        .soc-ico.--linkedin {
            top: 7.5vh;
            left: 15vh;
        }

        .soc-ico.--twitter {
            top: 7.5vh;
            left: 30vh;
        }
}

@media (aspect-ratio: 1/1), (max-aspect-ratio: 1/1) {
    .soc-icos {
        left: 50vw;
        top: calc(50vh + 10vw);
    }

    .soc-ico {
        --roundness: 3.33vw;
        height: 20vw;
        width: 20vw;
    }

        .soc-ico.--email {
            top: -12.5vw;
            left: -25vw;
        }

        .soc-ico.--instagram {
            top: -12.5vw;
            left: 0vw;
        }

        .soc-ico.--facebook {
            top: -12.5vw;
            left: 25vw;
        }

        .soc-ico.--twitter {
            top: 12.5vw;
            left: -25vw;
        }

        .soc-ico.--youtube {
            top: 12.5vw;
            left: 0vw;
        }

        .soc-ico.--linkedin {
            top: 12.5vw;
            left: 25vw;
        }
}