body{
    background-color: rgb(250,240,230);
    margin: 0;
    padding: 0;
    transition: background-color 0.5s ease;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
body.night{
    background-color: rgb(79, 79, 79)
}
#button1{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: rgb(102, 140, 254);
    width: 300px;
    height: 100px;
    border-radius: 600px;
    box-shadow: inset 0 5px 10px rgba(0,0,0,0.5);
    overflow: hidden;
    transition: background-color 0.5s ease;
}
#button1.night{
    background-color: rgb(35, 35, 35);
}
#button1.night #sunMoon{
    left: 84%;
    background-color: rgb(186, 186, 186);
    border-top: 1px solid rgb(110,110,110);
    border-left: 1px solid rgb(110,110,110);
}
#button1.night #blue1{
    background-color: rgb(79, 79, 79,0.4);
    left: 50%;
}
#button1.night #blue2{
    background-color: rgb(100,100,100,0.4);
    left: 65%;
    width: 210px;
}
#button1.night #blue3{
    background-color: rgb(130,130,130,0.4);
    left: 80%;
}
#button1.night #white1{
    top: 150%;
}
#button1.night #white2{
    top: 150%;
}
#button1.night #white3{
    top: 150%;
}
#button1.night #white4{
    top: 150%;
}
#button1.night #white5{
    top: 150%;
}
#button1.night #white6{
    top: 150%;
}
#button1.night #white7{
    top: 150%;
}
#button1.night #white8{
    top: 150%;
}
#button1.night #white9{
    top: 150%;
}
#button1.night #white10{
    top: 150%;
}
#button1.night #white11{
    top: 150%;
}
#button1.night #white12{
    top: 150%;
}
#button1.night #white13{
    top: 150%;
}
#button1.night #white14{
    top: 150%;
}
#button1.night #white15{
    top: 150%;
}
#button1.night #circle1{
    opacity: 1;
}
#button1.night #circle2{
    opacity: 1;
}
#button1.night #circle3{
    opacity: 1;
}
#button1.night .star{
    opacity: 1;
}
#sunMoon{
    position: fixed;
    top: 50%;
    left: 16%;
    transform: translate(-50%,-50%);
    background-color: rgb(255, 205, 53);
    border-top: 1px solid rgb(255,233,93);
    border-left: 1px solid rgb(255, 233, 93);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    box-shadow: inset -2px -1px 10px rgb(240, 240, 240);
    z-index: 5;
    cursor: pointer;
    transition: left 0.5s ease,
    background-color 0.5s ease,
    border-top 0.5s ease,
    border-left 0.5s ease,
    box-shadow 0.5s ease;
    -webkit-tap-highlight-color: transparent;
}
#blue1{
    position: fixed;
    top: 50%;
    left: 45%;
    transform: translate(-50%,-50%);
    background-color: rgb(110, 163, 255,0.4);
    width: 200px;
    height: 200px;
    z-index: 1;
    border-radius: 50%;
    transition: background-color 0.5s ease,
    left 0.5s ease;
}
#blue2{
    position: fixed;
    top: 50%;
    left: 30%;
    transform: translate(-50%,-50%);
    background-color: rgb(144, 184, 255,0.4);
    width: 200px;
    height: 200px;
    z-index: 2;
    border-radius: 50%;
    transition: background-color 0.5s ease,
    left 0.5s ease,
    width 0.5s ease;
}
#blue3{
    position: fixed;
    top: 50%;
    left: 15%;
    transform: translate(-50%,-50%);
    background-color: rgb(159, 194, 255,0.4);
    width: 200px;
    height: 200px;
    z-index: 3;
    border-radius: 50%;
    transition: background-color 0.5s ease,
    left 0.5s ease;
}
#white1{
    position: fixed;
    top: 50%;
    left: 95%;
    transform: translate(-50%,-50%);
    background-color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    z-index: 4;
    transition: top 0.5s ease;
}
#white2{
    position: fixed;
    top: 80%;
    left: 90%;
    transform: translate(-50%,-50%);
    background-color: white;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    z-index: 4;
    transition: top 0.5s ease;
}
#white3{
    position: fixed;
    top: 100%;
    left: 73%;
    transform: translate(-50%,-50%);
    background-color: white;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    z-index: 4;
    transition: top 0.5s ease;
}
#white4{
    position: fixed;
    top: 105%;
    left: 60%;
    transform: translate(-50%,-50%);
    background-color: white;
    width: 50px;
    height: 50px;
    z-index: 4;
    border-radius: 50%;
    transition: top 0.5s ease;
}
#white5{
    position: fixed;
    top: 110%;
    left: 45%;
    transform: translate(-50%,-50%);
    width: 70px;
    height: 70px;
    background-color: white;
    z-index: 4;
    border-radius: 50%;
    transition: top 0.5s ease;
}
#white6{
    position: fixed;
    top: 110%;
    left: 20%;
    transform: translate(-50%,-50%);
    background-color: white;
    width: 90px;
    height: 70px;
    z-index: 4;
    border-radius: 50%;
    transition: top 0.5s ease;
}
#white7{
    position: fixed;
    top: 100%;
    left: 35%;
    transform: translate(-50%,-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: white;
    z-index: 4;
    transition: top 0.5s ease;
}
#white8{
    position: fixed;
    top: 20%;
    left: 95%;
    transform: translate(-50%,-50%);
    width: 60px;
    height: 60px;
    background-color: rgb(160, 196, 230);
    border-radius: 50%;
    z-index: 0;
    transition: top 0.5s ease;
}
#white9{
    position: fixed;
    top: 40%;
    left: 85%;
    transform: translate(-50%,-50%);
    width: 50px;
    height: 50px;
    z-index: 0;
    background-color: rgb(160, 196, 230);
    border-radius: 50%;
    transition: top 0.5s ease;
}
#white10{
    position: fixed;
    top: 60%;
    left: 80%;
    transform: translate(-50%,-50%);
    z-index: 0;
    border-radius: 50%;
    background-color: rgb(160,196,230);
    width: 40px;
    height: 40px;
    transition: top 0.5s ease;
}
#white11{
    position: fixed;
    top: 80%;
    left: 70%;
    transform: translate(-50%,-50%);
    z-index: 0;
    border-radius: 50%;
    background-color: rgb(160,196,230);
    width: 60px;
    height: 60px;
    transition: top 0.5s ease;
}
#white12{
    position: fixed;
    top: 90%;
    left: 55%;
    transform: translate(-50%,-50%);
    background-color: rgb(160,196,230);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    z-index: 0;
    transition: top 0.5s ease;
}
#white13{
    position: fixed;
    top: 95%;
    left: 60%;
    transform: translate(-50%,-50%);
    z-index: 0;
    width: 70px;
    height: 70px;
    background-color: rgb(160,196,230);
    border-radius: 50%;
    transition: top 0.5s ease;
}
#white14{
    position: fixed;
    top: 90%;
    left: 40%;
    transform: translate(-50%,-50%);
    z-index: 0;
    width: 70px;
    height: 70px;
    background-color: rgb(160,196,230);
    border-radius: 50%;
    transition: top 0.5s ease;
}
#white15{
    position: fixed;
    top: 90%;
    left: 20%;
    transform: translate(-50%,-50%);
    z-index: 0;
    background-color: rgb(160, 196, 230);
    width: 90px;
    height: 80px;
    border-radius: 50%;
    transition: top 0.5s ease;
}
.star{
    position: fixed;
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    z-index: 4;
    transition: opacity 0.5s ease;
}
#star1{
    top: 5%;
    left: 20%;
    height: 30%;
}
#star2{
    top: 30%;
    left: 7%;
    height: 10%;
}
#star3{
    top: 40%;
    left: 23%;
    height: 13%;
}
#star4{
    top: 60%;
    left: 7%;
    height: 10%;
}
#star5{
    top: 70%;
    left: 10%;
    height: 12%;
}
#star6{
    top: 80%;
    left: 23%;
    height: 15%;
}
#star7{
    top: 50%;
    left: 50%;
    height: 13%;
}
#star8{
    top: 20%;
    left: 55%;
    height: 15%;
}
#star9{
    top: 70%;
    left: 57%;
    height: 25%;
}
#star10{
    top: 10%;
    left: 60%;
    height: 15%;
}
#star11{
    top: 50%;
    left: 40%;
    height: 17%;
}
#circle1{
    position: fixed;
    top: 60%;
    left: 30%;
    transform: translate(-50%,-50%);
    background-color: rgb(150,150,150);
    width: 40%;
    height: 40%;
    opacity: 0;
    border-radius: 50%;
    box-shadow: inset 0 5px 2px rgb(0,0,0,0.3);
    transition: opacity 0.5s ease;
}
#circle2{
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: rgb(150,150,150);
    width: 20%;
    height: 20%;
    opacity: 0;
    border-radius: 50%;
    box-shadow: inset 0 5px 2px rgb(0,0,0,0.3);
    transition: opacity 0.5s ease;
}
#circle3{
    position: fixed;
    top: 70%;
    left: 75%;
    transform: translate(-50%,-50%);
    background-color: rgb(150,150,150);
    width: 25%;
    height: 25%;
    border-radius: 50%;
    opacity: 0;
    box-shadow: inset 0 5px 2px rgb(0,0,0,0.3);
    transition: opacity 0.5s ease;
}