@import url(../Alignment/style.css);

div.container {
    margin: 10px 10%;
    row-gap: 10px;
    border: 5px solid brown;
    background-color: rgb(255, 228, 228);
    border-radius: 20px;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
}

div.card {
    padding: 10px;
    flex: 1 1 300px;
    border: 2px solid purple;
    background-color: rgb(255, 188, 209);
    border-radius: 5px;
    margin: 10px 10px;
}

#card-1 {
    box-shadow: 5px 5px rgb(89, 0, 95);
}

#card-2 {
    box-shadow: -6px 9px 10px rgb(0, 70, 1);
}

#card-3 {
    box-shadow: inset 0px 0px 50px -10px;
}

body {
    box-shadow: inset 0px 0px 100px 1px rgb(0, 251, 255);
    animation: body-bs 2s infinite;
}

@keyframes body-bs {
    0% {
        box-shadow: inset 0px 0px 100px 1px rgb(0, 238, 255);
    }
    50% {
        box-shadow: inset 0px 0px 100px 1px rgba(255, 157, 0, 0);
    }
}

#text-shadow>.container {
    height: 400px;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    font-size: 4vw;
    font-family: cursive;
    font-weight: bolder;
    color: rgb(132, 0, 255);
}

#text-shadow-1 {
    text-shadow: rgb(152, 243, 255) 0 0 10px;
}

#text-shadow-2 {
    text-shadow: 5px 10px;
}

#text-shadow-3 {
    text-shadow: 1px 1px 0px rgb(212, 255, 0),
    0 -10px 0.1em rgba(0, 255, 55, 0.404),
    5px 5px 0.2em blue;
}