@keyframes smartphoneRotation {
    from {
        transform: rotate(-5deg) skew(5deg) scale(0.5) translateX(-100%);
        box-shadow: -7px 5px 2px 2px #c0c0c0;
    }

    to {
        transform: rotate(5deg) skew(-5deg) scale(0.5) translateX(-100%);
        box-shadow: 7px 5px 2px 2px #c0c0c0;
    }
}

@keyframes laptopRotation {
    from {
        transform: scale(.2) translate(-50%) rotateZ(-5deg) skew(-5deg);
        box-shadow: -10px -8px 2px 2px #8b8b8b;
    }

    to {
        transform: scale(.2) translate(-50%) rotateZ(5deg) skew(5deg);
        box-shadow: 10px -8px 2px 2px #8b8b8b;
    }
}

@keyframes laptopStandRotation {
    from {
        box-shadow: -10px 2px 2px 2px #8b8b8b;
    }

    to {
        box-shadow: 10px 2px 2px 2px #8b8b8b;
    }
}

@keyframes laptopFootRotation {
    from {
        box-shadow: -10px 0px 2px 2px #8b8b8b;
    }

    to {
        box-shadow: 10px 0px 2px 2px #8b8b8b;
    }
}

/* The device with borders */
.smartphone {
    position: relative;
    left: 50%;
    width: 360px;
    height: 640px;
    margin-top: -170px;
    margin-bottom: -170px;
    border: 5px white solid;
    border-top-width: 60px;
    border-bottom-width: 60px;
    border-radius: 36px;
    background-color: #fff;
    transform: rotate(-2deg) skew(2deg) scale(0.5) translateX(-100%);
    animation: smartphoneRotation alternate ease-in-out 10s infinite;
    transition: transform 1s;
    box-shadow: 0 0 10px white;
}





/* The horizontal line on the top of the device */
.smartphone:before {
    content: '';
    display: block;
    width: 60px;
    height: 5px;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    box-shadow: 0 0 5px black inset;
    border-radius: 10px;
}

/* The circle on the bottom of the device */
.smartphone:after {
    content: '';
    display: block;
    width: 35px;
    height: 35px;
    position: absolute;
    left: 50%;
    bottom: -65px;
    transform: translate(-50%, -50%);
    background: #ffffff;
    box-shadow: 0 0 5px black inset;
    border-radius: 50%;
}

/* The screen (or content) of the device */
.smartphone .content {
    width: 360px;
    height: 640px;
    background: white;
    border-radius: 5px;
    overflow: hidden;
}

/* The laptop with borders */
.laptop {
    transform-origin: 0 0;
    left: 50%;
    transform-style: preserve-3d;
    transform: scale(.2) translate(-50%);
    position: relative;
    width: 1366px;
    height: 800px;
    margin-bottom: -600px;
    margin-top: 20px;
    border-radius: 16px;
    border-style: solid;
    border-color: white;
    border-width: 5px 5px 40px;
    background-color: white;

    box-shadow: -10px -8px 2px 2px #8b8b8b;

    animation: laptopRotation alternate 10s infinite;
}



.laptop::before {
    content: '';
    display: block;
    position: absolute;
    width: 100px;
    height: 200px;
    left: 50%;
    bottom: -240px;
    transform: translateX(-50%);
    background: white;
    border-radius: 0 0 16px 16px;
    box-shadow: -10px 2px 2px 2px #8b8b8b;
    animation: laptopStandRotation alternate 10s infinite;
}

.laptop:after {
    content: '';
    display: block;
    position: absolute;
    width: 700px;
    height: 20px;
    left: 50%;
    bottom: -240px;
    transform: translateX(-50%);
    background: white;
    border-radius: 16px 16px 0 0;
    box-shadow: -10px 0px 2px 2px #8b8b8b;
    animation: laptopStandRotation alternate 10s infinite;
}


/* The screen (or content) of the device */
.laptop .content {
    width: 1366px;
    height: 800px;
    overflow: hidden;
    border-radius: 16px;
    border: none;
}

@media only screen and (min-width: 1400px) {

    @keyframes smartphoneRotation {
        from {
            transform: rotate(-5deg) skew(5deg) scale(0.6) translateX(-100%);
            box-shadow: -7px 5px 2px 2px #c0c0c0;
        }

        to {
            transform: rotate(5deg) skew(-5deg) scale(0.6) translateX(-100%);
            box-shadow: 7px 5px 2px 2px #c0c0c0;
        }
    }

    @keyframes laptopRotation {
        from {
            transform: scale(.25) translate(-50%) rotateZ(-5deg) skew(-5deg);
            box-shadow: -10px -8px 2px 2px #8b8b8b;
        }

        to {
            transform: scale(.25) translate(-50%) rotateZ(5deg) skew(5deg);
            box-shadow: 10px -8px 2px 2px #8b8b8b;
        }
    }

    /* For desktop: */
    .smartphone,
    .laptop {
        grid-row-start: 2;
        grid-row-end: 2;
        place-self: center;
    }

    .project.second .laptop,
    .project.second .smartphone {
        grid-row-start: 2;
        grid-row-end: 2;
        grid-column-start: 3;
        grid-column-end: 4;
    }

    .smartphone {
        left: 50%;
        margin-right: 10vw;
    }

    .laptop {
        left: 550px;
        margin-bottom: -500px;
    }


}