bucket.css

html {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.bucket {
    background-size: cover;
    background-position: center;
    margin: 8px;
    position: relative;

    
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    word-break: keep-all;
}

.flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.done::after {    
    content: "";
    width: 100%;
    height: 100%;
    background-image: url("goodjob.png");
    background-size: contain;
    background-position: center;
    position: absolute;
    top: 20%;
    opacity: 0.7;
}
.wrap {
    flex-wrap: wrap;
}
.msg {
    margin: -10px 0 30px;
    color: black;
}

.img1-t2 {
    background-image: url("https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/bucketList/bucket-blue.png");
    color: white;
}
.img2-t2 {
    background-image: url("https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/bucketList/bucket-lightblue.png");
    color: blue;
}
.hidden {
    visibility: hidden;
}