@charset "UTF-8";

/* CSS rules go below */

pre{
    font-family: 'Courier New', Courier, monospace;
}
header{display: inline-flex;
outline: 1px solid rgb(255, 255, 255);
background-color: darkorchid;
box-shadow: 10px 10px 5px;
height: 40px;
font-size: xx-large;
}

body{
    background-color: darkgrey;
}
.box1{
    color: aliceblue;
}
.box2{
    color: rgb(30, 32, 33);
}
.box3{
    color: rgb(0, 0, 0);
}
.box4{
    color: aliceblue;
}
.box5{
    color: aliceblue;
}
.box6{
    color: aliceblue;
}
.box7{
    color: aliceblue;
}
.box8{
    color: rgb(50, 50, 51);
}
.box9{
    color: aliceblue;
}
.box10{
    color: aliceblue;
}
.box11{
    color: aliceblue;
}
.box12{
    color: aliceblue;
}


.box1{
    width: 400px;
    height: 400px;
    margin: 30px;
    background-color: rgb(78, 12, 166);
    box-shadow: 20px 20px 15px rgb(226, 228, 71);

}
.box2{
    width: 50px;
    height: 35px;
    margin: 30px;
    background-color: rgb(59, 214, 178);
    box-shadow: 12px 20px 20px rgba(0,0,0,0.3);

}
.box3{
    width: 120px;
    height: 120px;
    margin: 30px;
    background-color: rgb(235, 52, 122);
    box-shadow: 13px 15px black;

}
.box4{
    width: 20px;
    height: 120px;
    margin: 30px;
    background-color: silver;
    box-shadow: inset 40px 4px 10px rgba(0,0,0,0.4);

}
.box5{
    width: 400px;
    height: 200px;
    margin: 30px;
    background-color: rgb(79, 195, 193);
    box-shadow: inset 10px 4px 10px rgba(0,0,0,0.4);

}
.box6{
    width: 200px;
    height: 120px;
    margin: 30px;
    background-color: rgb(255, 64, 64);
    box-shadow: inset 30px 30px 20px rgba(218, 247, 166, 0.4);

}
.box7{
    width: 120px;
    height: 120px;
    margin: 30px;
    background-color: rgb(119, 119, 119);
    box-shadow: -20px 40px rgb(45, 54, 97);

}
.box8{
    width: 70px;
    height: 100px;
    margin: 30px;
    background-color: rgb(254, 219, 77);
    box-shadow: -15px 25px 15px black;

}
.box9{
    width: 500px;
    height: 500px;
    margin: 30px;
    background-color: rgb(40, 68, 45);
    box-shadow: -30px 30px 10px rgb(66, 226, 66);

}
.box10{
    width: 100px;
    height: 300px;
    margin: 30px;
    background-color: rgb(144, 0, 123);
    box-shadow: inset 60px 60px url("https://la-bella-vita-paradise.netlify.app/content/aword.png");
}
.box11{
    width: 200px;
    height: 120px;
    margin: 30px;
    background-color: rgb(205, 54, 54);
    box-shadow: inset 15px 15px rgb(27, 163, 225);

}
.box12{
    width: 200px;
    height: 120px;
    margin: 30px;
    background-color: rgb(101, 27, 212);
    box-shadow: -5px 5px 80px rgb(149, 115, 133);

}
.box13{
    width: 200px;
    height: 120px;
    margin: 30px;
    background-color: rgb(25, 110, 171);
    box-shadow: 15px 52px 60px rgb(255, 202, 55);

}
.box14{
    width: 60px;
    height: 60px;
    margin: 30px;
    background-color: rgb(123, 217, 173);
    box-shadow: -5px 5px 10px black;

}
.box15{
    width: 60px;
    height: 60px;
    margin: 30px;
    background-color: rgb(255, 100, 221);
    box-shadow: -5px 5px 10px black;

}
.box16{
    width: 500px;
    height: 60px;
    margin: 30px;
    background-color: rgb(229, 104, 46);
    box-shadow: -50px 50px 10px rgb(95, 94, 94);

}

.box17{
    width: 37px;
    height: 70px;
    margin: 30px;
    background-color: rgb(255, 66, 66);
    box-shadow: 20px 30px 20px rgb(7, 64, 12);

}
.box18{
    width: 100px;
    height: 100px;
    margin: 30px;
    background-color: rgb(158, 22, 255);
    box-shadow: -50px 50px 10px rgb(95, 94, 94);

}
.box19{
    width: 200px;
    height: 450px;
    margin: 50px;
    background-color: rgb(255, 244, 32);
    box-shadow: -50px 50px 10px rgb(95, 94, 94);

}
.box21{
    width: 300px;
    height: 300px;
    margin: 30px;
    background-color: rgb(109, 138, 218);
    box-shadow: -50px 50px 10px rgb(244, 89, 89);

}
.box22{
    width: 300px;
    height: 300px;
    margin: 30px;
    background-color: rgb(46, 192, 229);
    box-shadow: -50px 50px 10px rgb(47, 249, 40);

}


.box{
    transition: all 250ms ease-in-out 0ms;
    will-change: all;
}
.box1:hover:hover{
    transform: translateY(-4px) scale(1.04);
    box-shadow: 10vh 25vw 50px 10px rgb(14, 12, 67);

}
.box2:hover:hover{
    transform: translateY(-4px) scale(1.04);
    box-shadow: 10vh 25vw 20px 10px rgb(218, 241, 88);

}
.box3:hover:hover{
    transform: translateY(-4px) scale(1.04);
    box-shadow: 10vh 25vw 45px 10px rgb(255, 23, 128);

}
.box4:hover:hover{
    transform: translateY(4px) scale(1.04);
    box-shadow: -10vh 10vw 60px 10px rgb(39, 180, 199);

}
.box5:hover:hover{
    transform: translateY(-4px) scale(1.04);
    box-shadow: 10vh -15vw 30px 10px rgb(253, 25, 25);

}
.box6:hover:hover{
    transform: translateY(-4px) scale(1.04);
    box-shadow: 10vh 25vw 50px 10px rgb(14, 12, 67);

}
.box7:hover:hover{
    transform: translateY(-4px) scale(1.04);
    box-shadow: 10vh 25vw 50px 10px rgb(0, 0, 0);

}
.box8:hover:hover{
    transform: translateY(-4px) scale(1.04);
    box-shadow: 10vh 25vw 50px 10px rgb(198, 196, 232);

}
.box9:hover:hover{
    transform: translateY(-4px) scale(1.04);
    box-shadow: 10vh 25vw 50px 10px rgb(14, 12, 67);

}
.box10:hover:hover{
    transform: translateY(-4px) scale(1.04);
    box-shadow: -10vh -25vw 50px 10px rgb(255, 241, 46);

}
.box11:hover:hover{
    transform: translateY(-4px) scale(1.04);
    box-shadow: 10vh -50vw 90px 10px rgb(27, 163, 225);

}
.box12:hover:hover{
    transform: translateY(-4px) scale(1.04);
    box-shadow: 10vh 25vw 50px 10px rgb(96, 179, 45);

}
.box13:hover:hover{
    transform: translateY(-4px) scale(1.04);
    box-shadow: 10vh 25vw 50px 10px rgb(14, 12, 67);

}
.box14:hover:hover{
    transform: translateY(-4px) scale(1.04);
    box-shadow: 10vh 40vw 50px 10px rgb(255, 180, 250);

}
.box15:hover:hover{
    transform: translateY(-4px) scale(1.04);
    box-shadow: 10vh 35vw 50px 10px rgb(255, 187, 104);

}
.box16:hover:hover{
    transform: translateY(-4px) scale(1.04);
    box-shadow: 10vh 25vw 50px 10px rgb(14, 12, 67);

}
.box17:hover:hover{
    transform: translateY(-4px) scale(1.04);
    box-shadow: 10vh 25vw 50px 10px rgb(14, 12, 67);

}
.box18:hover:hover{
    transform: translateY(-4px) scale(1.04);
    box-shadow: 10vh 25vw 50px 10px rgb(142, 139, 236);

}
.box19:hover:hover{
    transform: translateY(-4px) scale(1.04);
    box-shadow: 10vh 25vw 50px 10px rgb(252, 52, 52);

}
.box20:hover:hover{
    transform: translateY(-4px) scale(1.04);
    box-shadow: 10vh 25vw 50px 10px rgb(14, 12, 67);

}
.box21:hover:hover{
    transform: translateY(-4px) scale(1.04);
    box-shadow: 10vh -25vw 50px 10px rgb(254, 254, 53);

}
.box22:hover:hover{
    transform: translateY(-4px) scale(1.04);
    box-shadow: 10vh -25vw 50px 10px rgb(235, 48, 179);

}

.container{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.box10{
    box-shadow: 0 0 120px 40px rgba(31, 218, 255, 0.9);
}