#bottom12,
#bottom19,
#bottom3,
#bottom6,
#bottom8,
#top3 {
background-color: #00c7ff;
}

#bottom13 {
background-color: #ffff00;
}

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

#bottom2,
#bottom5,
#bottom7,
#bottom9 {
background-color: #FFFF00;
}

#bottom4 {
}

#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;
}