styleclock.css

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    background-image:linear-gradient(109.6deg,rgba(5,84,94,1) 16%,#bbb 91.1%);
    width:100%;
    height:100vh;
    overflow:hidden;
    display:flex;
    justify-content: center;
    align-items: center;
    height:100vh;
}

.clock{
    width:300px;
    height:300px;
    min-width:300px;
    min-height:300px;
    display:flex;
    align-items:center;
    justify-content: center;
    background: #fff;
    border-radius:50%;
    border:20px solid #fff; 
    box-shadow:inset 0 0 30px #00000040,0 20px 20px rgba(0,0,0,.2),0 0 0 4px #fff;
    background: #fff url('img/clock.png');
    background-size: cover;
}

.clockcenter{
    position:absolute;
    width:15px;
    height:15px;
    background:#b879a2;
    border-radius:50%;
    border:2px solid #fff;
    z-index:100;
}

.hand{
    position:absolute;
    transform:translateY(-50%);
    transform-origin: bottom;
    box-shadow: 2px 0 3px #00000030;
}


.hr{
    width:8px;
    height:58px;
    background:#828181;
    border-top-left-radius:6px;
    border-top-right-radius:6px;
    z-index:10;
}

.mn{
    width:4px;
    height:75px;
    background:#aaaaaa;
    border-top-left-radius:6px;
    border-top-right-radius:6px;
    z-index:11;
}

.sc{
    width:2px;
    height:97px;
    background:#f59999;
    border-top-left-radius:6px;
    border-top-right-radius:6px;
    z-index:12;
}

.shake-horizontal {
	-webkit-animation: shake-horizontal 0.8s cubic-bezier(0.600, 0.040, 0.980, 0.335) infinite alternate both;
	        animation: shake-horizontal 0.8s cubic-bezier(0.600, 0.040, 0.980, 0.335) infinite alternate both;
}

/* ----------------------------------------------
 * Generated by Animista on 2020-10-2 15:13:28
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shake-horizontal
 * ----------------------------------------
 */
 @-webkit-keyframes shake-horizontal {
    0%,
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70% {
      -webkit-transform: translateX(-5px);
              transform: translateX(-5px);
    }
    20%,
    40%,
    60% {
      -webkit-transform: translateX(5px);
              transform: translateX(5px);
    }
    80% {
      -webkit-transform: translateX(4px);
              transform: translateX(4px);
    }
    90% {
      -webkit-transform: translateX(-4px);
              transform: translateX(-4px);
    }
  }
  @keyframes shake-horizontal {
    0%,
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70% {
      -webkit-transform: translateX(-5px);
              transform: translateX(-5px);
    }
    20%,
    40%,
    60% {
      -webkit-transform: translateX(5px);
              transform: translateX(5px);
    }
    80% {
      -webkit-transform: translateX(4px);
              transform: translateX(4px);
    }
    90% {
      -webkit-transform: translateX(-4px);
              transform: translateX(-4px);
    }
  }
  
  #set,#backtoclock{
    position:absolute;
    top:5%;
    left:3%;
    padding:5px 10px 5px 10px;
    border-radius:10px;
    background:#d8a6ff;
    border:1px solid #8a7799;
    border-top:2px solid #11111130;
    border-left:2px solid #11111130;
    font-size:115%;
    cursor:pointer;
    outline:none;
    box-shadow:4px 4px 6px #00000070;
  }

  .shake-vertical {
    -webkit-animation: shake-vertical 5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both infinite;
            animation: shake-vertical 5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both infinite;
  }

  /* ----------------------------------------------
 * Generated by Animista on 2020-10-4 13:56:42
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shake-vertical
 * ----------------------------------------
 */
@-webkit-keyframes shake-vertical {
  0%,
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }
  80% {
    -webkit-transform: translateY(6.4px);
            transform: translateY(6.4px);
  }
  90% {
    -webkit-transform: translateY(-6.4px);
            transform: translateY(-6.4px);
  }
}
@keyframes shake-vertical {
  0%,
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }
  80% {
    -webkit-transform: translateY(6.4px);
            transform: translateY(6.4px);
  }
  90% {
    -webkit-transform: translateY(-6.4px);
            transform: translateY(-6.4px);
  }
}

.vibrate-3 {
	-webkit-animation: vibrate-3 0.5s linear infinite both;
	        animation: vibrate-3 0.5s linear infinite both;
}

/* ----------------------------------------------
 * Generated by Animista on 2020-10-4 13:58:59
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation vibrate-3
 * ----------------------------------------
 */
 @-webkit-keyframes vibrate-3 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  10% {
    -webkit-transform: translate(-4, -4px)6
        7  transform: translate(-2px, -2px);
  }
  20% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  30% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px);
  }
  50% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  70% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  80% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  90% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes vibrate-3 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  10% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  20% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  30% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px);
  }
  50% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  70% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  80% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  90% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}

.jello-horizontal {
	-webkit-animation: jello-horizontal 0.9s both;
	        animation: jello-horizontal 0.9s both;
}

/* ----------------------------------------------
 * Generated by Animista on 2020-10-4 14:9:20
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation jello-horizontal
 * ----------------------------------------
 */
 @-webkit-keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

#setalarm{
  height:100vh;
  width:100%;
  background:linear-gradient(to right, #f2994a,#f2c94c);
  position:absolute;
  z-index:2000;
  top:-100vh;
  left:-100%; 

  transition:0.4s;
}

.setcontainer{
  position:absolute;
  top:35%;
  left:50%;
  transform:translate(-50%,-50%);
}

input{
  width:150px;
  height:35px;
  border:2px solid #111;
  padding-left:20px;
}
#alarmset{
  background:#fff;
  width:150px;
  border:2px solid #111;
  padding:5px 10px 5px 10px;
}

#setbtn,#stop,#snooze{
  padding:10px;
  padding-bottom:5px;
  padding-top:5px;
  font-size:115%;
  border-radius:8px;
  outline:none;
  border:none;
  background:#a43bd8;
  color:#fff;
  cursor:pointer;
  margin-top:10px;
}

#smallstop,#smallsnooze{
  border:0;
  background:#ef3434;
  visibility:hidden;
  border:1px solid white;
  border-radius:8px;
  padding:0.5rem;
  color:white;
  z-index:10000000;
}
#smallstop{
  position:absolute;
  bottom:30px;
  left:30px;
}
#smallsnooze{
  position:absolute;
  bottom:30px;
  right:30px;
}
#smallstop:hover , #smallsnooze:hover{
  background:rgb(255, 116, 116);
  box-shadow:4px 4px 7px #11111140;
}

#setbtn:active,#stop:active,#snooze:active{
  background:#8a77bb;
}

#stop,#snooze{
  display:none;
  margin:10px;
  position:absolute;
  z-index:100000;
  background:#ef3434;
}
#stop{
  top:52%;
  left:50px;
  transform:translate(-50%,-50%);
  padding:15px;
  padding-top:8px;
  padding-bottom:8px;
}
#snooze{
  top:52%;
  right:50px;
  transform:translate(-50%,-50%);
  padding:15px;
  padding-top:8px;
  padding-bottom:8px;
}

.pulsate-bck {
	-webkit-animation: pulsate-bck 1.2s ease-in-out infinite both;
	        animation: pulsate-bck 1.2s ease-in-out infinite both;
}

/* ----------------------------------------------
 * Generated by Animista on 2020-10-5 13:49:32
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation pulsate-bck
 * ----------------------------------------
 */
 @-webkit-keyframes pulsate-bck {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes pulsate-bck {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

.msg{
  position: absolute;
  top:20%;
  left:50%;
  transform:translate(-55%,-50%);
  z-index:1000000;
  color:#40963b;
  font-size:2vw;
  letter-spacing:3px;
  font-weight:bold;
  font-family:Helvetica, sans-serif;
  display:none;
}

.sounds{
  position:absolute;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  background:#ffbfbf;
  padding:20px;
  padding-top:10px;
  padding-bottom:10px;
  font-size:2vw;
  font-family:Helvetica, sans-serif;
  border-radius:8px;
  border:5px solid #fff;
  box-shadow:10px 10px 10px #00000050;
}

ul{
  list-style-type: none;
  display:flex;
  flex-direction:column;
}

p{
  text-align:center;
  color:#13531f;
  font-weight:bold;
}

li{
  margin:10% 0 10% 0;
  text-align: center;
  border:1px solid #000;
  transition:0.4s;
  cursor:pointer;
  background:#fff;
}

li:hover{
  box-shadow:4px 4px 6px #00000060;
}

@media (max-width:850px)
{
  li{
    margin:15% 0 15% 0;
  }
  .sounds{
    font-size:3vw;
    bottom:30px;
  }
  .msg{
    font-size:3vw;
  }
} 

@media (max-width:500px)
{
  li{
    margin:20% 0 20% 0;
  }
  .sounds{
    font-size:4vw;
    bottom:50px;
  }
  .msg{
    font-size:4vw;
  }
} 

@media (min-height:1020px)
{
  li{
    margin:15% 0 15% 0;
  }
  .sounds{
    font-size:5vw;
    bottom:20px;
  }
  .msg{
    font-size:5vw;
  }
  input,#alarmset{
    width:200px;
    height:50px;
    font-size:3vw;
  }
}
#back{
  position:absolute;
  right:20px;
  top:20px;
  border:2px solid #11111130;
  border-radius:10px;
  background:rgb(233, 29, 29);
  font-size:1.2rem;
  color:white;
  padding:0.2rem 0.5rem;
  transition:0.5s;
  cursor:pointer;
  outline:none;
}
#back:hover{
  background:rgb(255, 116, 116);
  box-shadow:4px 4px 7px #11111140;
}
#back:active{
  transform:translateY(8px);
}

/*

@media (max-width:680px)
{
  #stop{
    display:none;
  }
  #snooze{
    display:none;
  }
  #smallstop,#smallsnooze{
    display:block;
  }
}    */