@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2&display=swap');
*{
    padding: 0;
    margin: 0;
}
body{
    box-sizing: border-box;
    height: 100vh;
    font-family: 'Baloo Bhai 2',cursive;
    transition: 0.5s;
    background: #D8EAFE;
    color:#64ABFC;
}
h1{
    text-align: center;
    padding: 0.5em 1em 0em 1em;

}
.container{
    position: relative;
    padding: 1em;
    display: flex;
   margin: auto;
    width: 200px;
    height: 200px;
}
img{
    width: 100%;
    border-radius: 50%;
    box-shadow: 0em 2em 10em 1em rgba(0,0,0,0.2);
}
.hour{
    position: absolute;
    height: 38px;
    top: 77px;
    border: 1px solid black;
    transform-origin: bottom;
    left: 115px;
}
.mintues{
    position: absolute;
    height: 48px;
    top: 67px;
    border: 1px solid rgb(210, 141, 152);
    left: 115px;  
    transform-origin: bottom;
}
.seconds{
    position: absolute;
    height: 60px;
    top: 55px;
    border: 1px solid rgb(90, 157, 179);
    left: 115px;
    transform-origin: bottom;
}
.header{
    display: flex;
    justify-content: end;
    padding: 1em 2em;
}
.toggle{
    position: relative;
    display: block;
    width: 4em;
    height: 2em;
    border-radius: 160px;
    background: #A9C9D4;
    transition: 0.5s;
    box-shadow: inset 0 8px 60px rgba(0,0,0,0.1),
    inset 0 8px 8px rgba(0,0,0,0.1),
    inset 0 -4px 4px rgba(0,0,0,0.1);
}
.toggle .indicator{
    position:absolute;
    top: 0;
    left: 0;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    transform: scale(0.9);
    box-shadow: inset 0 8px 40px rgba(255,255,255,0.1),
    inset 0 4px 4px rgba(255,255,255,0.2),
    inset 0 -4px 4px rgba(255,255,255,0.2);
    transition: 0.5s;
    background: linear-gradient(to bottom,#c3bebe, #A9C9D4);
}
.toggle.active{
    background: #2A1C50;;
    box-shadow: inset 0 2px 60px rgba(0,0,0,0.1),
                inset 0 2px 8px rgba(0,0,0,0.1),
                inset 0 -4px 8px rgba(0,0,0,0.05) ;
}
body.active{
    background: #453474;
    color: #f9f9f9;
}
.toggle.active .indicator{
 left :2em;
 background: linear-gradient(to bottom,#eaeaea, #2A1C50);
 box-shadow: inset 0 8px 20px rgba(0,0,0,0.1),
 inset 0 4px 4px rgba(255,255,255,1),
 inset 0 -4px 4px rgba(255,255,255,1);
}
#time-show{
    display: flex;
    justify-content: center;
    margin: auto;
    flex-wrap: wrap;
}
#time{
    padding: 1em 0.3em 0em 0.3em;
    font-size: 2em;
    font-weight: 500;
}
.Country{
    text-align: center;
    font-size: 1.2em;
    padding: 0em 0em 0.3em 0em;
}
#Alam-set{
    display: flex;
    margin: auto;
    justify-content:space-evenly;
    align-items: center;
    border: 1.7px solid #64ABFC;
    width: 20em;
    height: 10vh;
    border-radius: 10px;
}
#Alam-set.active{
    border: 1.7px solid #eaeaea ;
    color:white;
}
.Set-Alarm{
    background: transparent;
    height: 3em;
    border-radius: 5px;
    color: #64ABFC;
    border:2px solid #A9C9D4;
}
.btn.active:hover{
    background:#453474;
    border: 2px solid #2A1C50;
    color: #D8EAFE;
}
.btn.active{
    background: #D8EAFE;
    color: #2A1C50;
    cursor: pointer;
}
.btn{
    width: 4em;
    height: 3em;
    border-radius: 10px;
    border: none;
    background: #64ABFC;
    color: #D8EAFE;
    cursor: pointer;
}
.btn:hover{
    background: #D8EAFE ;
    color: #64ABFC ;
    border :2px solid #64ABFC;
}
#stop-alarm{
    display: flex;
    justify-content: center;
    margin-top: 1em;
}
#stop-alarm button{
    color: #64ABFC;
    width: 6em;
    height: 2.5em;
    background: transparent;
    border-radius: 50px;
    border: 2px solid #64ABFC;
    font-size: 1em;
    box-shadow:inset 0px 2px 2px #64ABFC,
      inset 0px -2px 2px #64ABFC;
      cursor: pointer;
}
#stop-btn.active{
   color:#eaeaea;
   border:2px solid #2A1C50;
   box-shadow:inset 0px 2px 2px rgba(0,0,0,0.3),
   inset 0px -2px 2px rgba(0,0,0,0.3);
}