#year {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 1s
}

#mouth {
    position: absolute;
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 1s
}

#mouth li {
    position: absolute;
    width: 80px;
    height: 20px
}

#mouth ul {
    position: relative;
    left: -40px;
    top: -10px
}

#mouth ul li:nth-child(1) {
    transform: rotate(0deg) translateX(100px)
}

#mouth ul li:nth-child(2) {
    transform: rotate(30deg) translateX(100px)
}

#mouth ul li:nth-child(3) {
    transform: rotate(60deg) translateX(100px)
}

#mouth ul li:nth-child(4) {
    transform: rotate(90deg) translateX(100px)
}

#mouth ul li:nth-child(5) {
    transform: rotate(120deg) translateX(100px)
}

#mouth ul li:nth-child(6) {
    transform: rotate(150deg) translateX(100px)
}

#mouth ul li:nth-child(7) {
    transform: rotate(180deg) translateX(100px)
}

#mouth ul li:nth-child(8) {
    transform: rotate(210deg) translateX(100px)
}

#mouth ul li:nth-child(9) {
    transform: rotate(240deg) translateX(100px)
}

#mouth ul li:nth-child(10) {
    transform: rotate(270deg) translateX(100px)
}

#mouth ul li:nth-child(11) {
    transform: rotate(300deg) translateX(100px)
}

#mouth ul li:nth-child(12) {
    transform: rotate(330deg) translateX(100px)
}

#solar {
    position: absolute;
    width: 300px;
    height: 300px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(0);
    transition: all 5s;
    z-index: 50
}

#solar li {
    position: absolute;
    width: 80px;
    height: 20px;
    cursor: pointer
}

#solar ul {
    position: relative;
    left: -40px;
    top: -10px
}

#solar ul li:nth-child(1) {
    transform: rotate(22.5deg) translateX(210px)
}

#solar ul li:nth-child(2) {
    transform: rotate(37.5deg) translateX(210px)
}

#solar ul li:nth-child(3) {
    transform: rotate(52.5deg) translateX(210px)
}

#solar ul li:nth-child(4) {
    transform: rotate(67.5deg) translateX(210px)
}

#solar ul li:nth-child(5) {
    transform: rotate(82.5deg) translateX(210px)
}

#solar ul li:nth-child(6) {
    transform: rotate(97.5deg) translateX(210px)
}

#solar ul li:nth-child(7) {
    transform: rotate(112.5deg) translateX(210px)
}

#solar ul li:nth-child(8) {
    transform: rotate(127.5deg) translateX(210px)
}

#solar ul li:nth-child(9) {
    transform: rotate(142.5deg) translateX(210px)
}

#solar ul li:nth-child(10) {
    transform: rotate(157.5deg) translateX(210px)
}

#solar ul li:nth-child(11) {
    transform: rotate(172.5deg) translateX(210px)
}

#solar ul li:nth-child(12) {
    transform: rotate(187.5deg) translateX(210px)
}

#solar ul li:nth-child(13) {
    transform: rotate(202.5deg) translateX(210px)
}

#solar ul li:nth-child(14) {
    transform: rotate(217.5deg) translateX(210px)
}

#solar ul li:nth-child(15) {
    transform: rotate(232.5deg) translateX(210px)
}

#solar ul li:nth-child(16) {
    transform: rotate(247.5deg) translateX(210px)
}

#solar ul li:nth-child(17) {
    transform: rotate(262.5deg) translateX(210px)
}

#solar ul li:nth-child(18) {
    transform: rotate(277.5deg) translateX(210px)
}

#solar ul li:nth-child(19) {
    transform: rotate(292.5deg) translateX(210px)
}

#solar ul li:nth-child(20) {
    transform: rotate(307.5deg) translateX(210px)
}

#solar ul li:nth-child(21) {
    transform: rotate(322.5deg) translateX(210px)
}

#solar ul li:nth-child(22) {
    transform: rotate(337.5deg) translateX(210px)
}

#solar ul li:nth-child(23) {
    transform: rotate(352.5deg) translateX(210px)
}

#solar ul li:nth-child(24) {
    transform: rotate(367.5deg) translateX(210px)
}

#data {
    position: absolute;
    width: 300px;
    height: 300px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 1s
}

#data li {
    position: absolute;
    width: 80px;
    height: 20px
}

#data ul {
    position: relative;
    left: -40px;
    top: -10px
}

#data ul li:nth-child(1) {
    transform: rotate(0) translateX(160px)
}

#data ul li:nth-child(2) {
    transform: rotate(11.25deg) translateX(160px)
}

#data ul li:nth-child(3) {
    transform: rotate(22.5deg) translateX(160px)
}

#data ul li:nth-child(4) {
    transform: rotate(33.75deg) translateX(160px)
}

#data ul li:nth-child(5) {
    transform: rotate(45deg) translateX(160px)
}

#data ul li:nth-child(6) {
    transform: rotate(56.25deg) translateX(160px)
}

#data ul li:nth-child(7) {
    transform: rotate(67.5deg) translateX(160px)
}

#data ul li:nth-child(8) {
    transform: rotate(78.75deg) translateX(160px)
}

#data ul li:nth-child(9) {
    transform: rotate(90deg) translateX(160px)
}

#data ul li:nth-child(10) {
    transform: rotate(101.25deg) translateX(160px)
}

#data ul li:nth-child(11) {
    transform: rotate(112.5deg) translateX(160px)
}

#data ul li:nth-child(12) {
    transform: rotate(123.75deg) translateX(160px)
}

#data ul li:nth-child(13) {
    transform: rotate(135deg) translateX(160px)
}

#data ul li:nth-child(14) {
    transform: rotate(146.25deg) translateX(160px)
}

#data ul li:nth-child(15) {
    transform: rotate(157.5deg) translateX(160px)
}

#data ul li:nth-child(16) {
    transform: rotate(168.75deg) translateX(160px)
}

#data ul li:nth-child(17) {
    transform: rotate(180deg) translateX(160px)
}

#data ul li:nth-child(18) {
    transform: rotate(191.25deg) translateX(160px)
}

#data ul li:nth-child(19) {
    transform: rotate(202.5deg) translateX(160px)
}

#data ul li:nth-child(20) {
    transform: rotate(213.75deg) translateX(160px)
}

#data ul li:nth-child(21) {
    transform: rotate(225deg) translateX(160px)
}

#data ul li:nth-child(22) {
    transform: rotate(236.25deg) translateX(160px)
}

#data ul li:nth-child(23) {
    transform: rotate(247.5deg) translateX(160px)
}

#data ul li:nth-child(24) {
    transform: rotate(258.75deg) translateX(160px)
}

#data ul li:nth-child(25) {
    transform: rotate(270deg) translateX(160px)
}

#data ul li:nth-child(26) {
    transform: rotate(281.25deg) translateX(160px)
}

#data ul li:nth-child(27) {
    transform: rotate(292.5deg) translateX(160px)
}

#data ul li:nth-child(28) {
    transform: rotate(303.75deg) translateX(160px)
}

#data ul li:nth-child(29) {
    transform: rotate(315deg) translateX(160px)
}

#data ul li:nth-child(30) {
    transform: rotate(326.25deg) translateX(160px)
}

#data ul li:nth-child(31) {
    transform: rotate(337.5deg) translateX(160px)
}

#AP {
    position: absolute;
    width: 400px;
    height: 400px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 1s
}

#AP li {
    position: absolute;
    width: 80px;
    height: 20px
}

#AP ul {
    position: relative;
    left: -40px;
    top: -10px
}

#AP ul li:nth-child(1) {
    transform: rotate(0deg) translateX(250px)
}

#AP ul li:nth-child(2) {
    transform: rotate(180deg) translateX(250px)
}