.sunset {
    position: relative;
    background-color: #F7F4F1;
}

.sunset .circle {
    width: 120px;
    height: 120px;
    border-radius: 150px;
    margin-left: 10%;
    position: absolute;
    /* bottom: 0%; */
    bottom: -100%;
    z-index: -1;
}

.sunset .lines div:nth-child(1) {
    border-width: 6px;
    border-style: solid;
    margin-top:0;
}

.sunset .lines div:nth-child(2) {
    border-width: 9px;
    border-style: solid;
    margin-top:15px;
}

.sunset .lines div:nth-child(3) {
    border-width: 6px;
    border-style: solid;
    margin-top:15px;
    margin-bottom:15px;
}

.sunset-primary {
    background-color: #F7F4F1;
}

.sunset-primary .circle {
    background-color: #CFB8B0;
}

.sunset-primary .lines div:nth-child(1),
.sunset-primary .lines div:nth-child(2),
.sunset-primary .lines div:nth-child(3) {
    border-color:#CFB8B0;
}

.sunset-secondary {
    background-color: #DEDBD9;
}

.sunset-secondary .circle {
    background-color: #908773;
}

.sunset-secondary .lines div:nth-child(1),
.sunset-secondary .lines div:nth-child(2),
.sunset-secondary .lines div:nth-child(3) {
    border-color:#908773;
}

.sunset-dark {
    background-color: #DFE8E8;
}

.sunset-dark .circle {
    background-color: #283038;
}

.sunset-dark .lines div:nth-child(1),
.sunset-dark .lines div:nth-child(2),
.sunset-dark .lines div:nth-child(3) {
    border-color:#283038;
}

.sunset-animate .circle {
    animation: sunset 1s;
    animation-fill-mode: forwards;
}

.sunset-animate .lines div:nth-child(1) {
    animation: sunsetLine 1s;
    animation-fill-mode: forwards;
}

.sunset-animate .lines div:nth-child(2) {
    animation: sunsetLine2 1s;
    animation-fill-mode: forwards;
}

@keyframes sunset {
    /* 0% {
        bottom: -50%;
    } */
    100% {
        bottom: 0;
    }
}

@keyframes sunsetLine {
    /* 0% {
        border-width: 6px;
    } */
    100% {
        border-width: 1px;
    }
}

@keyframes sunsetLine2 {
    /* 0% {
        border-width: 9px;
    } */
    100% {
        border-width: 3px;
    }
}