*
{
    padding:0;
    margin:0;
    box-sizing:border-box;
    font-family:Arial, sans-serief;
}

html
{
    font-size:62.5%;
}

.center
{
    display:flex;
    justify-content: center;
    align-items: center;
}
.container
{
    height:100vh;
    width:100%;
    background:rgb(127,86,167);
  
}

.header
{
    width:40%;
    height:100%; 
    flex-direction:column;
    align-items: flex-start;
}

.heading
{
    font-size: 4rem;
    font-weight: 200;
    color:#fff;
    letter-spacing: 0.1rem;
}

.sub-heading
{
    font-size: 2rem;
    font-weight: 200;
    color:#eff;
    letter-spacing: 0.1rem;
}

.heading span
{
    font-size: 4rem;
    color: #efd81d;
    transition: color .2s;
}

.btn
{
    width:15rem;
    height:4rem;
    background-color:#efd81d;
    font-size:1.4rem;
    text-transform: uppercase;
    color:#fff;
    letter-spacing:0.1rem;
    border:none;
    margin-top:3.5rem;
    transition: background-color .3s;
    cursor:pointer;
}

.boxes
{
    width:40%;
    height:100%;
    perspective: 150rem;
}

.active.box
{
    top:0;
    left:0;
    transition: all 0.5s;
}

.box
{
    transform-style: preserve-3d;
    transform: rotateY(45deg) rotateX(30deg);
    position:relative;
    display:flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
    cursor:pointer;
}

@keyframes boxAnim
{
    0%
    {
        transform:rotateX(0)rotateY(0)rotateZ(0)
    }

    100%
    {
        transform:rotateX(360deg)rotateY(360deg)rotateZ(360deg)
    }
}

.box-1
{
    left:-25rem;
    top:-6rem;
    animation: boxAnim 100s infinite linear;
}

.box-2
{
    left:-11rem;
    top:-23rem;
    animation: boxAnim 100s -10s infinite linear;
}

.box-3
{
    left:10rem;
    top:-23rem;
    animation: boxAnim 100s -20s infinite linear;
}

.box-4
{
    left:25rem;
    top:-6rem;
    animation: boxAnim 100s -30s infinite linear;
}

.box-5
{
    left:22rem;
    top:13rem;
    animation: boxAnim 100s -40s infinite linear;
}

.box-6
{
    left:0rem;
    top:25rem;
    animation: boxAnim 100s -50s infinite linear;
}

.box-7
{
    left:-21rem;
    top:14rem;
    animation: boxAnim 100s -60s infinite linear;
}

.active.box div
{
    width:16rem;
    height:16rem;
    transition: all .2s .5s ease-in-out;
}
.box div
{
    width:7rem;
    height:7rem;
    /* background:#efd81d; */
    position: absolute;
    opacity: 0.8;
    box-shadow: 0.1rem 0.1rem 0.1rem #eee inset, 
    -0.1rem -0.1rem 0.1rem #eee inset,
    0.1rem 0.1rem 3.5rem rgba(255, 255, 255, 0.2),
    -0.1rem -0.1rem 3.5rem rgba(255, 255, 255, 0.2);
}

.box-1 div/*JS*/
{
    background-color:#efd81d;
}

.box-2 div/*React*/
{
    background-color:#61dbfb;
}

.box-3 div/*vue JS*/
{
    background-color:#41b883;
}

.box-4 div/*angular JS*/
{
    background-color:#b52e31;
}

.box-5 div/*node JS*/
{
    background-color:#43853d;
}

.box-6 div/*SASS*/
{
    background-color:#cf649a;
}

.box-7 div/*Ember JS*/
{
    background-color:#e04e49;
}

.top-side
{
    transform:rotateX(90deg) translateZ(3.5rem);
    
}

.bottom-side
{
    transform:rotateX(90deg) translateZ(-3.5rem);
    
}

.front-side
{
    transform: translateZ(3.5rem);
    
}

.back-side
{
    transform: translateZ(-3.5rem);
    
}

.right-side
{
    transform:rotateY(-90deg) translateX(3.5rem);
    transform-origin: right;
}

.left-side
{
    transform:rotateY(90deg) translateX(-3.5rem);
    transform-origin: left;
}


.active .top-side
{
    transform:rotateX(90deg) translateZ(8rem);
    
}

.active .bottom-side
{
    transform:rotateX(90deg) translateZ(-8rem);
    
}

.active .front-side
{
    transform: translateZ(8rem);
    
}

.active .back-side
{
    transform: translateZ(-8rem);
    
}

.active .right-side
{
    transform:rotateY(-90deg) translateX(8rem);
    transform-origin: right;
}

.active .left-side
{
    transform:rotateY(90deg) translateX(-8rem);
    transform-origin: left;
}