*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
    /* background: hsl(0 0% 0%); */
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.page {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(360deg, hsl(0 0% 20%), hsl(0 0% 20%));
    ;
}

.rows {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.row {
    position: relative;
    width: 100%;
    height: 3.2rem;
    background: hsl(0 0% 100%);
    border-bottom: 1px solid hsl(0 0% 0%);
}

/* Styles For .my-robot div And It's Children's */

.notebook {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10rem;
    height: 100vh;
}

.my-robot {

    --robot-background: linear-gradient(0deg, #436E9B, #6A9ACD);

    /* --robot-background: linear-gradient(0deg, hsl(0 0% 4.75%) 2em, transparent 2em),
    linear-gradient(90deg, hsl(0 0% 4.75%) 2em, transparent 2em),
    linear-gradient(180deg, hsl(0 0% 4.75%) 2em, transparent 2em),
    linear-gradient(270deg, hsl(0 0% 4.75%) 2em, transparent 2em); */

    /* --robot-border: 0.5rem solid #6A9ACD; */
    --robot-transition-for-all-parts: all 1.5s ease-in-out;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    transition: var(--robot-transition);
    z-index: 1;

}

.my-robot-body,
.my-robot-fingers {

    position: relative;
    transition: var(--robot-transition-for-all-parts);

}

.my-robot-body::before,
.my-robot-body::after {

    --robot-body-before-after-transform: translateX(-50%);

    --robot-body-before-width: 12.5rem;
    --robot-body-before-clip-path: polygon(50% 25%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    --robot-body-before-border-bottom: var(--robot-border);

    --robot-body-after-width: 8.15rem;
    --robot-body-after-height: 12rem;
    --robot-body-after-clip-path: polygon(0 0, 0% 20%, 16% 100%, 25% 100%, 50% 50%, 75% 100%, 85% 100%, 70% 48%, 84% 100%, 100% 20%, 100% 0, 50% 0);

    content: '';

    position: absolute;
    left: 50%;
    transform: var(--robot-body-before-after-transform);

    transition: var(--robot-transition-for-all-parts);

}

.my-robot-body::before {

    top: -4.8rem;

    width: var(--robot-body-before-width);
    aspect-ratio: 1;
    clip-path: var(--robot-body-before-clip-path);
    border-bottom: var(--robot-body-before-border-bottom);
    background: linear-gradient(0deg, #436E9B, #6A9ACD);

    z-index: 1;

}

.my-robot-body::after {

    top: 7.5rem;

    width: var(--robot-body-after-width);
    height: var(--robot-body-after-height);
    clip-path: var(--robot-body-after-clip-path);
    background: linear-gradient(0deg, #6A9ACD, #436E9B);

    z-index: -1;

}

.my-robot-power {

    --robot-power-transform: translate(-50%, -50%);
    --robot-power-width: 6rem;
    --robot-power-height: 2.5rem;
    --robot-power-clip-path: polygon(50% 15%, 75% 25%, 100% 40%, 86% 70%, 80% 84%, 50% 85%, 20% 84%, 14% 70%, 0 40%, 25% 25%);
    --robot--power-background: linear-gradient(360deg, hsl(0 0% 20%), hsl(0 0% 20%));

    position: absolute;
    top: -10.5rem;
    left: 50%;
    transform: var(--robot-power-transform);

    width: var(--robot-power-width);
    height: var(--robot-power-height);
    background: linear-gradient(0deg, #42729c, #42729c);
    clip-path: var(--robot-power-clip-path);

    transition: var(--robot-transition-for-all-parts);
    z-index: 1;

}

.my-robot-power::after {

    content: "";

    display: block;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 1.15rem;
    aspect-ratio: 1;
    background: hsl(41, 100%, 48%);

    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

    transition: var(--robot-transition-for-all-parts);
    animation: givingPowerToMyRobot 1s linear infinite;

    opacity: 0;
    visibility: hidden;

}

@keyframes givingPowerToMyRobot {
    50% {
        opacity: 1;
        visibility: visible;
        background: hsl(41, 100%, 48%);

    }
}

.my-robot-face {

    --robot-face-transform: translate(-50%, -50%);
    --robot-face-width: 9rem;

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
    top: -5.9rem;
    left: 50%;
    transform: var(--robot-face-transform);

    width: var(--robot-face-width);
    aspect-ratio: 1;
    background: linear-gradient(0deg, #6A9ACD, #436E9B);
    border-radius: 50%;

    transition: var(--robot-transition-for-all-parts);
    z-index: -1;

}

.my-robot-face:before {

    --robot-face-before-transform: translateX(-50%);
    --robot-face-before-width: 5rem;
    --robot-face-before-height: 3rem;
    --robot-face-before-background: linear-gradient(45deg, #050605, #050605, #050605);

    content: "";

    position: absolute;
    top: 52%;
    left: 50%;
    transform: var(--robot-face-before-transform);

    width: var(--robot-face-before-width);
    height: var(--robot-face-before-height);
    background: linear-gradient(0deg, #42729c, #42729c);

    border-bottom-left-radius: 70px;
    border-bottom-right-radius: 70px;

    transition: var(--robot-transition-for-all-parts);

}

.speak::before {
    animation: 
        mouth 1s linear infinite;
        /* keepQuite 1s linear 6s forwards; */
}

/* .my-robot-face:hover:before {

    --robot-face-hover-before-height: 2rem;
    height: var(--robot-face-hover-before-height);

    border-bottom-left-radius: 35px;
    border-bottom-right-radius: 35px;

} */

@keyframes mouth {

    0%,
    100% {
        height: 3rem;
        border-bottom-left-radius: 70px;
        border-bottom-right-radius: 70px;
    }

    50% {
        height: 2rem;
        border-bottom-left-radius: 35px;
        border-bottom-right-radius: 35px;
    }
}

@keyframes keepQuite {

    0%,
    100% {
        height: 2rem;
        border-bottom-left-radius: 35px;
        border-bottom-right-radius: 35px;
    }

    50% {
        height: 3rem;
        border-bottom-left-radius: 70px;
        border-bottom-right-radius: 70px;
    }
}

.my-robot-eyes {

    --robot-eyes-gap: 0.7rem;
    --robot-eyes-transition: all 1.5s ease-in-out;

    display: flex;
    gap: var(--robot-eyes-gap);

    position: relative;
    top: -1.5rem;

    transition: var(--robot-eyes-transition);

}

.my-robot-eyes .my-robot-eye {

    --robot-eye-width: 2rem;
    --robot-eye-background: #ffffff;
    --robot-eye-transition: all 1.5s ease-in-out;

    position: relative;
    display: block;

    width: var(--robot-eye-width);
    aspect-ratio: 1;
    background: var(--robot-eye-background);
    border-radius: 50%;

    transition: var(--robot-eye-transition);

}

.my-robot-eyes .my-robot-eye:nth-child(1) {
    animation:
        eye 0.25s linear 2s,
        eye 0.25s linear 6s,
        eye 0.25s linear 10s;
}

.my-robot-eyes .my-robot-eye:nth-child(2) {
    animation:
        eye 0.25s linear 4s,
        eye 0.25s linear 8s,
        eye 0.25s linear 12s;
}

@keyframes eye {
    0% {
        transform: scaleY(1);
    }

    100% {
        transform: scaleY(0.5);
    }
}

.my-robot-eyes .my-robot-eye::before {

    --robot-eye-before-transform: translateX(-50%, -50%);
    --robot-eye-before-width: 1rem;
    --robot-eye-before-background: #000000;
    --robot-eye-before-transition: all 1.5s ease-in-out;

    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    /* transform: var(--robot-eye-before-transform); */
    transform: translateX(-50%) translateY(-50%);

    width: var(--robot-eye-before-width);
    aspect-ratio: 1;
    background: var(--robot-eye-before-background);
    border-radius: 50%;

    transition: var(--robot-eye-before-transition);
    transition-delay: 0.2s;
    animation: movTheEye 15s linear infinite;
    animation-delay: 0.2s;

}

@keyframes movTheEye {

    0%,
    100% {
        transform: translateX(-50%) translateY(-50%);
    }

    20% {
        transform: translateX(-50%) translateY(0%);
    }

    40% {
        transform: translateX(-100%) translateY(-50%);
    }

    60% {
        transform: translateX(-50%) translateY(-100%);
    }

    80% {
        transform: translateX(0%) translateY(-50%);
    }
}

.my-robot-ears {

    --robot-ears-gap: 8.8rem;

    position: absolute;

    display: flex;
    gap: var(--robot-ears-gap);

    transition: var(--robot-transition-for-all-parts);

}

.my-robot-ear {

    --robot-ear-width: 1.8rem;
    --robot-ear-height: 3rem;
    --robot-ear-background: var(--robot-background);
    --robot-ear-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);

    position: relative;

    width: var(--robot-ear-width);
    height: var(--robot-ear-height);
    background: linear-gradient(0deg, #436E9B, #6A9ACD);
    clip-path: var(--robot-ear-clip-path);

    transition: var(--robot-transition-for-all-parts);

}

.my-robot-hands {

    --robot-hands-transform: translate(-50%, -50%);
    --robot-hands-width: 21rem;
    --robot-hands-height: 1.8rem;
    --robot-hands-background: var(--robot-background);

    position: relative;
    top: -5.25rem;
    left: 50%;
    transform: var(--robot-hands-transform);

    width: var(--robot-hands-width);
    height: var(--robot-hands-height);
    background: var(--robot-hands-background);
    border-radius: 1rem;

    transition: var(--robot-transition-for-all-parts);

}

.my-robot-hands::before,
.my-robot-hands::after {

    --robot-hands-before-after-width: 13.5rem;
    --robot-hands-before-after-background: var(--robot-background);

    content: '';

    position: absolute;
    top: -5.60rem;

    width: var(--robot-hands-before-after-width);
    aspect-ratio: 1;
    background: var(--robot-hands-before-after-background);

    transition: var(--robot-transition-for-all-parts);
    z-index: -1;

}

.my-robot-hands::before {

    --robot-hands-before-clip-path: polygon(55% 25%, 75% 40%, 75% 56%, 55% 56%, 35% 56%, 35% 50%, 55% 50%, 55% 44%, 35% 44%, 35% 38%, 62% 38%, 50% 30%);

    left: -8.2rem;
    clip-path: var(--robot-hands-before-clip-path);
    animation: helloLeft 1s linear infinite;

}

@keyframes helloLeft {

    0%,
    100% {
        transform: rotate(0);
    }

    50% {
        transform: rotate(2.5deg);
    }
}

.my-robot-hands::after {

    --robot-hands-after-clip-path: polygon(45% 25%, 25% 40%, 25% 56%, 45% 56%, 65% 56%, 65% 50%, 45% 50%, 45% 44%, 65% 44%, 65% 38%, 38% 38%, 50% 30%);

    right: -8.2rem;
    clip-path: var(--robot-hands-after-clip-path);
    animation: helloRight 1s linear infinite;

}

@keyframes helloRight {

    0%,
    100% {
        transform: rotate(0);
    }

    50% {
        transform: rotate(-2.5deg);
    }
}

.my-robot-middle-of-hand,
.my-robot-middle-of-hand::before {

    position: absolute;
    transform: translate(-50%, -50%);

    width: 1.5rem;
    aspect-ratio: 1;
    /* background: linear-gradient(0deg, #42729c, #42729c); */

    border-radius: 0.25rem;

    transition: var(--robot-transition-for-all-parts);
    animation: givingPowerToMyRobot 2s linear infinite;

    opacity: 0;
    visibility: hidden;

}

.my-robot-middle-of-hand {

    top: 0.72rem;
    left: 20.4rem;

}

.my-robot-middle-of-hand::before {

    content: '';

    top: 50%;
    right: 19.11rem;
}

.my-robot-legs {

    position: relative;
    transition: var(--robot-transition-for-all-parts);

}

.my-robot-legs::before,
.my-robot-legs::after {

    --robot-legs-before-after-width: 5.5rem;
    --robot-legs-before-after-background: var(--robot-background);
    --robot-legs-before-after-clip-path: ellipse(25% 40% at 50% 50%);

    content: '';

    position: absolute;
    top: 8rem;

    width: var(--robot-legs-before-after-width);
    aspect-ratio: 1;
    clip-path: var(--robot-legs-before-after-clip-path);
    background: var(--robot-legs-before-after-background);

    transition: var(--robot-transition-for-all-parts);
    z-index: 1;

}

.my-robot-legs::before {

    --robot-legs-before-transform: translate(-50%, -50%) rotate(100deg);

    left: 30.6%;
    transform: var(--robot-legs-before-transform);
    animation: leftLeg 1s linear infinite;
}

.my-robot-legs::after {

    --robot-legs-after-transform: translate(-50%, -50%) rotate(-100deg);

    right: 4.35%;
    transform: var(--robot-legs-after-transform);
    animation: rightLeg 1s linear infinite;
}

@keyframes leftLeg {

    0%,
    100% {
        transform: translate(-50%, -50%) rotate(100deg);
    }

    50% {
        transform: translate(-50%, -50%) rotate(80deg);
    }
}

@keyframes rightLeg {

    0%,
    100% {
        transform: translate(-50%, -50%) rotate(-100deg);
    }

    50% {
        transform: translate(-50%, -50%) rotate(-120deg);
    }
}

.my-robot-shoes-heel {
    position: relative;
}

.my-robot-shoes-heel::before,
.my-robot-shoes-heel::after {

    content: '';

    position: absolute;
    top: 9.05rem;
    transform: translate(-50%, -50%);

    width: 1.15rem;
    aspect-ratio: 1;

    background: linear-gradient(0deg, #42729c, #42729c);

    border-radius: 0.25rem;

    transition: var(--robot-transition-for-all-parts);
    /* animation: givingPowerToMyRobot 5s linear infinite; */

    /* opacity: 0;
    visibility: hidden; */

    z-index: -1;

}

.my-robot-shoes-heel::before {
    left: 37.6%;
}

.my-robot-shoes-heel::after {
    right: 32.25%;
}

/* Styles For .my-robot div And It's Children's */