* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
html {
    height: 100dvh;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #d1d1d1ff;
    transition: background-color 1s ease
}
.text{
    transition: color 2s;
}
h1 {
    position: absolute;
    top: 20px;
    font-family: Arial, Helvetica, sans-serif;
}


footer {
    position: absolute;
    bottom: 10px;
    font-family: Arial, Helvetica, sans-serif;
}

footer a {
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

/*__________________________________________*/

/*--------TODA ESTILIZAÇÃO DO DESIGN--------*/

/*__________________________________________*/
/* container principal */
div#main {
    width: 250px;
    height: 100px;
    border-radius: 70px;
    box-shadow: inset 0px 3px 4px 4px #2929293a;
    overflow: hidden;
    display: flex;
    border: 4px solid #f5f5f5;
    position: relative;
    /*Pode usar a regra CSS-scale:0.5; para implementar esse projeto no seu site sem precisar redimensionar nenhum elemento, */
    
}




/* posicionamento da lua e do sol */
div.right {
    position: absolute;
    right: 0;
}

div.left {
    position: absolute;
    left: 0;
}



/* sol e lua (mesmo tamanho, estilos diferentes) */
div.sol,
div.lua {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    margin: 5px;
    align-self: center;
}



/* ---sol--- */
div.sol {
    background: linear-gradient(to top, #f8e002, #e7d003, #e4da7e);
    box-shadow: inset 5px 0px 5px 4px #2b260150;
    z-index: 4;
}



/* ---lua--- */
div.lua {
    background: linear-gradient(to top, #b6b6b6, #a8a8a8, #e7e5e5);
    box-shadow: inset -5px 0px 5px 4px #4b4a4a50;
    position: relative;

}



/* crateras da lua */
div.lua span {
    position: absolute;
    background-color: #757575be;
    width: 25px;
    height: 25px;
    display: block;
    border-radius: 50%;
    margin: 1px;
}

div.lua span:nth-child(1) {
    right: 20px;
    bottom: 10px;
    height: 15px;
    width: 15px;
}

div.lua span:nth-child(2) {
    right: 20px;
    bottom: 45px;
    height: 10px;
    width: 10px;
}

div.lua span:nth-child(3) {
    right: 40px;
    bottom: 20px;
}




/* nuvens (6 bolinhas + base retangular) */
div.cloud {
    position: relative;
    width: 100%;
    opacity: 0;
}

div.clouds {
    z-index: 2;
}

.cl2 {
    position: absolute;
    bottom: 0;
    height: 80px;
    width: 75px;
    border-radius: 50%;
    background-color: white;
    margin-left: 75%;
}

.cl1 {
    position: absolute;
    bottom: 0;
    height: 35px;
    width: 40px;
    border-radius: 50%;
    background-color: white;
    margin-left: 63%;
}


.cl3 {
    position: absolute;
    bottom: 0;
    height: 40px;
    width: 45px;
    border-radius: 50%;
    background-color: white;
    margin-left: 40%;
}

.cl4 {
    position: absolute;
    bottom: 0;
    height: 30px;
    width: 35px;
    border-radius: 50%;
    background-color: white;
    margin-left: 55%;
}

.cl5 {
    position: absolute;
    bottom: 0;
    height: 25px;
    width: 35px;
    border-radius: 50%;
    background-color: white;
    margin-left: 30%;
}

.cl6 {
    position: absolute;
    bottom: -15px;
    height: 35px;
    width: 45px;
    border-radius: 50%;
    background-color: #ffffff;
    margin-left: 16%;
}

div.complet {
    position: absolute;
    bottom: 0;
    width: 70%;
    background-color: white;
    height: 17px;
    margin-left: 26%;
}



/* estrelas (12 pontinhos brancos no céu) */
.star {
    position: relative;
    right: 80px;
    height: 100%;
}

.stars {
    position: absolute;
    width: 3px;
    height: 3px;
    background-color: #ffffff;
    margin: 20px;
    right: 10px;
    border-radius: 50px;
}

.st1 {
    right: 30px;
    top: 50px;
}

.st2 {
    right: 20px;
    top: 10px;
}

.st3 {
    right: 90px;
    top: 60px;
}

.st4 {
    right: 20px;
    top: 30px;
}

.st5 {
    right: 60px;
}

.st6 {
    right: 40px;
    top: 20px;
}

.st7 {
    right: 70px;
    top: 50px;
}

.st8 {
    right: 90px;
    top: 20px;
}

.st9 {
    right: 70px;
    top: 30px;
}

.st10 {
    right: 60px;
    top: 60px;
}

.st11 {
    right: 100px;
    top: 0px;
}

.st12 {
    right: 105px;
    top: 40px;
}



/* animação suave para todos os elementos */
#sun,
#moon,
#cloud,
#stars {
    transition: all 1.5s ease;
}



/* estados iniciais */
#sun {
    transform: translateX(-120px) rotate(0deg);
    opacity: 1;
}

#moon {
    transform: translateX(120px) rotate(0deg);
    opacity: 0;
}

#cloud {
    opacity: 0;
    transform: translateY(50px);
}

#stars {
    opacity: 0;
}



/* ---quando for DIA--- */
.day #sun {
    transform: translateX(0) rotate(360deg);
    opacity: 1;
}

.day #moon {
    transform: translateX(120px) rotate(180deg);
    opacity: 0;
}

.day #cloud {
    opacity: 1;
    transform: translateY(0);
}

.day #stars {
    opacity: 0;
}



/* ---quando for NOITE--- */
.night #sun {
    transform: translateX(-120px) rotate(-180deg);
    opacity: 0;
}

.night #moon {
    transform: translateX(0) rotate(360deg);
    opacity: 1;
}

.night #cloud {
    opacity: 0;
    transform: translateY(50px);
}

.night #stars {
    opacity: 1;
}

/*__________________________________________*/

/*--------TODA ESTILIZAÇÃO DO DESIGN--------*/

/*__________________________________________*/