/*

Full-page view:

https://codepen.io/GeorgePark/full/gegavO/

*/

@import url(https://fonts.googleapis.com/css?family=Montserrat:500);

:root {
    /* Base font size */
    font-size: 10px;
    /* Border color variable */
    --border-color: #e70;
}

* {
    box-sizing: border-box;
}



.cube-container {
    position: relative;
    width: 30rem;
    height: 30rem;
    margin: 5rem auto 6rem;
    perspective: 100rem;
}

.cube {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(0.32, 0.05, 0.35, 1.6);
}

.cube-face-image {
    display: block;
    position: absolute;
    /* opacity: 0.95; */
    /* border: 0.2rem solid #fafafa; */
    box-shadow: 0 0 0.5rem #fff, 0 0 1.5rem var(--border-color), 0 0 3rem var(--border-color);
}

.image-buttons {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-gap: 1.5rem;
    justify-content: center;
}

    .image-buttons input {
        border: 0.2rem solid #fafafa;
    }

        .image-buttons input:focus {
            outline: none;
            border: 0.2rem solid var(--border-color);
        }

/* Transform images to create cube */

.image-1 {
    transform: translateZ(15rem);
}

.image-2 {
    transform: rotateX(-180deg) translateZ(15rem);
}

.image-3 {
    transform: rotateY(90deg) translateZ(15rem);
}

.image-4 {
    transform: rotateY(-90deg) translateZ(15rem);
}

.image-5 {
    transform: rotateX(90deg) translateZ(15rem);
}

.image-6 {
    transform: rotateX(-90deg) translateZ(15rem);
}

/* Transform cube to show correct image */

.cube.initial-position {
    transform: translateZ(-15rem) translateY(-2rem) rotateX(-15deg) rotateY(18deg) rotateZ(2deg);
}

.cube.show-image-1 {
    transform: translateZ(-15rem);
}

.cube.show-image-2 {
    transform: translateZ(-15rem) rotateX(180deg);
}

.cube.show-image-3 {
    transform: translateZ(-15rem) rotateY(-90deg);
}

.cube.show-image-4 {
    transform: translateZ(-15rem) rotateY(90deg);
}

.cube.show-image-5 {
    transform: translateZ(-15rem) rotateX(-90deg);
}

.cube.show-image-6 {
    transform: translateZ(-15rem) rotateX(90deg);
}
/* Typewriter effect 1 */
@keyframes typing {
    0.0000%, 27.3488% {
        content: "";
    }

    1.1395%, 26.2093% {
        content: "S";
    }

    2.2791%, 25.0698% {
        content: "Se";
    }

    3.4186%, 23.9302% {
        content: "Ser";
    }

    4.5581%, 22.7907% {
        content: "Serv";
    }

    5.6977%, 21.6512% {
        content: "Servi";
    }

    6.8372%, 20.5116% {
        content: "Servic";
    }

    7.9767%, 19.3721% {
        content: "Service";
    }

    9.1163%, 18.2326% {
        content: "Services";
    }
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.typewriter {
    --caret: currentcolor;
}

    .typewriter::before {
        content: "";
        animation: typing 10.5s infinite;
    }

    .typewriter::after {
        content: "";
        border-right: 1px solid var(--caret);
        animation: blink 0.5s linear infinite;
    }

    .typewriter.thick::after {
        border-right: 1ch solid var(--caret);
    }

    .typewriter.nocaret::after {
        border-right: 0;
    }


@media (prefers-reduced-motion) {
    .typewriter::after {
        animation: none;
    }

    @keyframes sequencePopup {
        0%, 100% {
            content: "developer";
        }
    }

    .typewriter::before {
        content: "Services";
        animation: sequencePopup 12s linear infinite;
    }
}

/**/