#bottom10,
#bottom15,
#bottom2,
#bottom5,
#bottom8 {
background-color: #FFFF00;
}

#bottom11 {
background-color: #00c7ff;
margin-top: 0px;
margin-bottom: 8px;
}

#bottom12,
#bottom13,
#bottom4 {
}

#bottom14,
#bottom19,
#bottom3,
#bottom6,
#bottom7,
#bottom9,
#top3 {
background-color: #00c7ff;
}

#bottom1 {
background-color: #00c7ff;
margin-bottom: 80px;
}

#main {
text-align: center;
}

.hamburger-button {
position: relative;
cursor: pointer;
width: 25px;
height: 30px;
border: none;
padding: 0;
background: transparent;
}

.hamburger-line::after {
content: "";
display: block;
width: 100%;
height: 4px;
background-color: #17428c;
position: absolute;
transition: all 0.3s ease-in-out;
bottom: -13px;
}

.hamburger-line::before {
content: "";
display: block;
width: 100%;
height: 4px;
background-color: #17428c;
position: absolute;
transition: all 0.3s ease-in-out;
top: -13px;
}

.hamburger-line {
content: "";
display: block;
width: 100%;
height: 4px;
background-color: #17428c;
border-radius: 4px;
position: absolute;
transition: all 0.3s ease-in-out;
}

.is-active .hamburger-line::after {
transform: translateY(-10px) rotate(-45deg);
}

.is-active .hamburger-line::before {
transform: translateY(10px) rotate(45deg);
}

.is-active .hamburger-line {
background: transparent;
}