@import url(../prism/prism-light.css);
@import url(../Alignment/style.css);

/* Display */
.container {
    background-color: bisque;
    border: 2px solid rgb(138, 116, 88);
    border-radius: 10px;
    padding: 15px;
    width: 85%;
    margin: 32px auto;
    overflow: hidden;
}

#container-1 {
    display: flex;
    flex-wrap: wrap;
    height: 800px;
    align-items:flex-end;
    justify-content: center;
}

.box {
    border: 2px solid rgb(119, 137, 0); 
    width: 150px;
    height: 150px;
    margin: 2px;
    background-color: rgba(255, 230, 0);
    border-radius: 20px;
    padding: 10px;
    text-align: center;
}

#box-1 {
    background-color: rgb(49, 17, 102);
    border-radius: 50%;
}

#box-2 {
    background-color: rgb(17, 102, 74);
    border-radius: 30%;
}

#box-3 {
    background-color: rgb(88, 102, 17);
    border-radius: 30% 5%;
}

#box-4 {
    background-color: rgb(102, 44, 17);
    border-radius: 20% 50%;
}

#box-5 {
    background-color: rgb(102, 17, 98);
    border-radius: 50% 19% 21% 12%/13% 14% 20% 12%;
}

#container-2 {
    display: flex;
    padding-left: 10%;
    padding-right: 10%;
    height: 600px;
    align-items:flex-start;
    justify-content: center;
}


#box-a {
    flex: 1 3 150px;
    align-self: center;
    background-color: rgb(49, 17, 102);
    border-radius: 50%;
}

#box-b {
    flex: 2 1 150px;
    align-self: flex-start;
    background-color: rgb(17, 102, 74);
    border-radius: 30%;
}

#box-c {
    flex: 1 2 150px;
    align-self: flex-end;
    background-color: rgb(88, 102, 17);
    border-radius: 30% 5%;
}