body {
    background-color: black;
}

#main{
    height: 45px;
    max-width: 100%;
    border: 2px white;
    background-color: aliceblue;
    color: rgb(0, 0, 0);
    text-align: center;
    font-size: xx-large;
    padding: 10px;
    font-weight: 700;
}
#main:hover{
    box-shadow: 2px 2px 10px 2px rgb(139 , 245, 245);
}

.parent-box {
    border: 2px solid rgb(255, 255, 255);
}

#child-box {
    height: 200px;
    width: 200px;
    background-color: rgb(127, 4, 4);
    margin: auto;
}

#child-box:hover {
    transform: scale(1.1);
    box-shadow: 2px 2px 10px 2px rgb(139, 245, 245);
}


.parent-box2 {
    border: 2px solid rgb(255, 255, 255);
}

#child-box2 {
    height: 200px;
    width: 200px;
    background-color: rgb(127, 4, 4);
    margin: auto;
}

#child-box2:hover {
    transform: skew(45deg);
    box-shadow: 2px 2px 10px 2px rgb(139, 245, 245);
}



.parent-box3 {
    border: 2px solid rgb(255, 255, 255);
}

#child-box3 {
    height: 200px;
    width: 200px;
    background-color: rgb(127, 4, 4);
    margin: auto;
}

#child-box3:hover {
    transform: rotate(45deg);
    box-shadow: 2px 2px 10px 2px rgb(139, 245, 245);
}



.parent-box4 {
    border: 2px solid rgb(255, 255, 255);
}

#child-box4 {
    height: 200px;
    width: 200px;
    background-color: rgb(127, 4, 4);
    margin: auto;
}

#child-box4:hover {
    transform: translate(50px,-20px);
    box-shadow: 2px 2px 10px 2px rgb(139, 245, 245);
}