/*  Positioning .spots when display:relative  */

body{
    display:flex;
    justify-content: center;
    align-items: center;
    height:100vh;
    /* max-height: 100vh; */
    overflow-y: hidden;
    /* background-color: #78c2f3; */
    background-color: #78c2f3a5;
    font-family: 'Poppins', sans-serif;
}
#check{
    display:none;
}

/* time */
.time{
    font-size: 2rem;
    font-weight: 600;
}
.am{
    color:white;
    margin-right: 25px;
}
.pm{
    color:rgba(255, 255, 255, 0.4);
    margin-left: 25px;
}

/* Initial State: Daytime */
.toggleButton{
    height:100px;
    width:220px;
    border-radius: 100px;
    background-image: url("images/day.png");
    background-size: cover;
    box-shadow: -5px -5px 10px rgba(0,0,0,0.4), 5px 5px 10px rgba(0,0,0,0.4);
    transition: all 100ms ease-in 50ms;
}
.labelParent{
    width:fit-content;
}
label{
    position: relative;
    /* transition: all 200ms ease-in 100ms; */
}
.btn{
    height:90px;
    width:90px;
    border-radius: 100px;
    background: radial-gradient( #f5c235,rgb(245, 245, 60));
    margin:5px 0 5px 5px;
    /* position:relative; */
    /* transition: all 200ms ease-in 100ms; */
}
.cloud{
    width:70px;
    position:relative;
    top:5px;
    left:50px;
    /* display:none; */
}
.spot{
    border-radius: 50%;
    background: radial-gradient(grey,#333333);
    position:relative;
    /* By default, display property of spots is block */
    display:none;
}
.one{
    height:10px;
    width:10px;
    
    top:30px;
    left:15px;
}
.two{
    height:20px;
    width:20px;
   
    top:50px;
    left:35px;
}
.three{
    height:25px;
    width:25px;
    
    bottom:5px;
    left:53px;
}

/* label */
#check:checked ~ .toggleButton label{
    left:120px;
}
/* btn */
#check:checked ~ .toggleButton .btn{
    background: rgb(186, 181, 181);
    left:0px;
}

/* toggleButton */
#check:checked ~ .toggleButton{
    background: url("images/night.png");
    background-size: cover;  
}
/* spot */
#check:checked ~ .toggleButton .spot{
    display:block;
}
/* cloud */
#check:checked ~ .toggleButton .cloud{
    display:none;
}
/* time */
#check:checked ~ .am{
    color:rgba(255, 255, 255, 0.4);
}
#check:checked ~ .pm{
    color:white;
}