*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: #080710;
    max-width: 1400px;
    margin: auto;
    height: 100vh;
    z-index: 0;
}
.main-body{
    position: relative;
    height: 80%;
    z-index: 2;
    cursor: pointer;
}
.background{
    width: 30%;
    position: relative;
    height: 40px;
    transform: translate(-50%,-250%);
    left: 50%;
    top: 50%;
}
#b1{
    content: "";
    width: 140px;
    height: 140px;
    border-radius: 70%;
    position: absolute; 
    left: -30px ;
    bottom: 30px;
}
#b2{
    content: "";
    width: 120px;
    height: 120px;
    border-radius: 2px;
    position: absolute;
    right: -30px ;
    top: 30px;
}
#alarm-clock{
    position: absolute;
    padding: 11px;
    transform: translate(-50%,-120%);
    width: max-content;
    left: 50%;
    top: 50%;
    border-radius: 11px;
    backdrop-filter: blur(11px);
    background-color: rgba(255,255,255,0.17);
    z-index: 10;
}
#time{
    position: relative;
    background-color: rgba(255,255,255,0.13);
    border-radius: 7px;
    font-family: 'DS-Digital';
}
.time{
    font-size: 67px;
    padding: 20px 40px;
    color: rgb(38,239,216,0.2);
  }
/*shadow*/
.background-s{
    width: 30%;
    position: absolute;
    height: 40px;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
}
#b1-s{
    content: "";
    width: 140px;
    height: 140px;
    border-radius: 70%;
    position: absolute;
    background: linear-gradient(#1845ad,#23a2f6);
    left: -30px ;
    bottom: 30px; 
}
#b2-s{
    content: "";
    width: 120px;
    height: 120px;
    border-radius: 2px;
    position: absolute;
    background: linear-gradient(to right, #ff512f,#f09819);
    right: -30px ;
    top: 30px;
}
#alarm-clock-s{
    position: absolute;
    padding: 11px;
    transform: translate(-50%,-50%);
    width: max-content;
    left: 50%;
    top: 50%;
    border-radius: 11px;
    backdrop-filter: blur(11px);
    background-color: rgba(255,255,255,0.17);
    z-index: 10;
}
#time-s{
    position: relative;
    padding: 20px 40px;
    background-color: rgba(255,255,255,0.13);
    border-radius: 7px;
    font-family: 'DS-Digital';
}
.time-s{
    font-size: 60px;
    color: rgb(38,239,216);
}
#hours{
    content: "88";
}
.shadow{
    position: relative;
    left: 0;
    height: 50%;
    bottom: 0;
    opacity: 0.3;
    transform: rotatex(180deg) translateY(-100%); 
  mask-image: linear-gradient(transparent 28%, white 90%);
  z-index: 1;
}
.hidden{
    visibility: hidden;
}
.shown{
    display: inline-block;
    visibility: visible;
}
.extra_info{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: rgb(38,239,216,0.2);
}
#am-pm{
    font-size: 20px;
}
@media(max-width:549px) and (min-width:00px){
    .time{
        font-size: 25px;
        padding: 15px 25px ;
    }
    #b2{
        width: 70px;
        height: 70px;
        right: -90px ;
        top: 50px;}
    #b1{
        width: 80px;
        height: 80px;
        left: -90px ;
        bottom: 10px;
    }
    .time-s{
        font-size: 25px;
    }
    #b2-s{
        width: 70px;
        height: 70px;
        right: -90px ;
        top: 50px;}
    #b1-s{
        width: 80px;
        height: 80px;
        left: -90px ;
        bottom: 10px;
    };
}
@media(max-width:749px) and (min-width:500px){
    .time{
        font-size: 40px;
    }
    #b2{
        width: 100px;
        height: 100px;
        right: -100px ;
        top: 20px;}
    #b1{
        width: 120px;
        height: 120px;
        left: -120px ;
        bottom: 10px;
    }
    .time-s{
        font-size: 40px;
    }
    #b2-s{
        width: 100px;
        height: 100px;
        right: -100px ;
        top: 20px;}
    #b1-s{
        width: 120px;
        height: 120px;
        left: -120px ;
        bottom: 10px;
    }
}
@media(max-width:1000px) and (min-width:750px){
    #b2{

        right: -120px ;
        top: 20px;}
    #b1{
        left: -120px ;
        bottom: 30px;
    }
    .time-s{
        font-size: 40px;
    }
    #b2-s{

        right: -120px ;
        top: 20px;}
    #b1-s{
        left: -120px ;
        bottom: 30px;
    };
}
@media(max-width:1200px) and (min-width:1000px){
    #b2{
        right: -90px ;
        top: 20px;}
    #b1{
        left: -90px ;
        bottom: 30px;
    }
    #b2-s{
        right: -90px ;
        top: 20px;}
    #b1-s{
        left: -90px ;
        bottom: 30px;
    };
}
@media(max-width:1400px) and (min-width:1200px){
    #b2{
        right: -50px ;
        top: 20px;}
    #b1{
        left: -50px ;
        bottom: 30px;
    }
    #b2-s{
        right: -50px ;
        top: 20px;}
    #b1-s{
        left: -50px ;
        bottom: 30px;
    };
}
@media(min-width:1400px){
    #b2{
        right: -70px ;
        top: 20px;}
    #b1{
        left: -50px ;
        bottom: 30px;
    }
    #b2-s{
        right: -70px ;
        top: 20px;}
    #b1-s{
        left: -50px ;
        bottom: 30px;
    };
}
.blue{
    background: linear-gradient(#1845ad,#23a2f6);
}
.orange{
    background: linear-gradient(to right, #ff512f,#f09819);
}
.off{
    filter: grayscale(100%);
    transition: all 0.7s;
}
.digital_color{
    color: rgb(38,239,216);
}
.downs{
    content: "88";
}
.b1-trans{
    transform: translate(-7%,-5%);
}
.b2-trans{
    transform: translate(7%,5%);
}
.b1-s-trans{
    transform: translate(7%,5%);
}
.b2-s-trans{
    transform: translate(0%,-5%);
}
.alarm-trans{
    transform: translateY(50%);
}
#colon,#colon-s{
    animation: blink 2s infinite;
}
@keyframes blink{
    0%{
        opacity: 0;
    }
    25%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
    75%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}