* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Playfair Display", sans-serif;
}
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #9baacf;
    background-color: #dae1eb;
    padding: 40px 0;
    overflow: auto;
}
.wrap{
    display: flex;
}
.screen{
    width: 400px;
    height: 720px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 5px;
    box-shadow: 0 4px 18px 0 rgba(0,0,0,0.5);
    margin: 50px 30px;
    padding: 30px 20px;
}
.btn {
    width: 40px;
    height: 40px;
    outline: none;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 5px 5px 10px #b6a9a9, -5px -5px 10px #ffffff;
    border-radius: 50%;
    font-size: 18px;
}
.fas {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.fa-arrow-left:before {
    content: "\f060";
}
.fa-navicon:before, .fa-reorder:before, .fa-bars:before {
    content: "\f0c9";
}
.bar {
    position: relative;
    left: 270px;
}
.time-bar{
    display: flex;
    margin: 30px 20px 50px 20px;
    justify-content: space-around;
    /* box-shadow: 0.3rem 0.3rem 0.5rem rgb(195 193 198 / 90%), -0.2rem -0.2rem 0.4rem #fff;
    border-radius: 20px; */
}
.shadow__inset{
    position: relative;
    left: -11px;
    padding: 7px 13px;
    color: rgba(0,0,0,0.4);
    box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px #fff;
    border-radius: 15px;
}
.time.shadow__outset1{
    position: relative;
    left: -11px;
    padding: 7px 14px;
    border-radius: 20px;
    box-shadow: 0.3rem 0.3rem 0.5rem rgb(195 193 198 / 90%), -0.2rem -0.2rem 0.4rem #fff;
}
.alarm.shadow__outset{
    position: relative;
    left: 0px;
    padding: 7px 13px;
    border-radius: 20px;
    box-shadow: 0.3rem 0.3rem 0.5rem rgb(195 193 198 / 90%), -0.2rem -0.2rem 0.4rem #fff;
}
.alarm.shadow__inset{
    position: relative;
    left: 0px;
    padding: 7px 13px;
    color: rgba(0,0,0,0.4);
    box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px #fff;
    border-radius: 15px;
}
.timer.shadow__outset{
    position: relative;
    left: 13px;
    padding: 7px 30px;
    border-radius: 20px;
    box-shadow: 0.3rem 0.3rem 0.5rem rgb(195 193 198 / 90%), -0.2rem -0.2rem 0.4rem #fff;
}
  
.clock{
    flex-shrink: 0;
    position: relative;
    height: clamp(220px, 60vw, 320px);
    width: clamp(220px, 60vw,320px);
    border-radius: 50%;
    box-shadow: 1rem 1rem 2rem rgba(0, 0, 0, .1),
        -1rem -1rem 2rem rgba(255, 255, 255, .5);
    margin: 0 auto;
}
  
  .clock__strokes,
  .clock__strokes-hours,
  .clock__strokes-minutes,
  .clock__pointers{
    position: absolute;
    height: 100%;
    width: 100%;
  }
  
  .clock__strokes-hours{
    z-index: 200;
  }
  
  .clock__strokes-hours span,
  .clock__strokes-minutes span{
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
  }
  
  .clock__strokes-hours span::before{
    content: "";
    background-color: #b6bbc5;
    background-color: #848484;
    height: 24px;
    height: clamp(14px, 4.23vw, 24px);
    width: 5px;
    border-radius: 10px;
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .clock__strokes-minutes span::before{
    content: "";
    background-color: #b6bbc5;
    height: 12px;
    height: clamp(7.76px, 2.11vw, 12px);
    width: 2px;
    border-radius: 10px;
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .clock__pointers-hours,
  .clock__pointers-minutes,
  .clock__pointers-seconds,
  .clock__pointers-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .clock__pointers-dot{
    height: clamp(13px, 3.53vw, 20px);
    width: clamp(13px, 3.53vw, 20px);
    border-radius: 50%;
    background-color: #848484;
    border: 2px solid #dae1eb;
    z-index: 600;
  }
  .clock__pointers-hours{
    z-index: 300;
  }
  
  .clock__pointers-minutes{
    z-index: 400;
  }
  
  .clock__pointers-seconds{
    z-index: 500;
  }
  
  .clock__pointers-hours::before{
    content: "";
    background-color: #848484;
    height: clamp(64px, 17.47vw, 99px);
    width: 8px;
    border-radius: 10px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .clock__pointers-hours::after{
    content: "";
    background-color: #848484;
    height: clamp(13px, 3.53vw, 20px);
    width: 8px;
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .clock__pointers-minutes::before{
    content: "";
    background-color: #b6bbc5;
    height: clamp(88px, 24vw, 136px);
    width: 5px;
    border-radius: 10px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .clock__pointers-minutes::after{
    content: "";
    background-color: #b6bbc5;
    height: clamp(15px, 4.41vw, 25px);
    width: 5px;
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .clock__pointers-seconds::before{
    content: "";
    background-color: #e57373;
    height: clamp(88px, 24vw, 136px);
    width: 3px;
    border-radius: 10px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .clock__pointers-seconds::after{
    content: "";
    background-color: #e57373;
    height: clamp(19px, 5.29vw, 30px);
    width: 3px;
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .date{
    text-align: center;
    margin: 30px 100px;
    padding: 10px 20px;
    border-radius: 20px;
    box-shadow: inset 0.2rem 0.2rem 0.5rem rgba(195, 193, 198, 0.9), 
    inset -0.2rem -0.2rem 0.5rem #fff, 0.3rem 0.3rem 0.5rem rgba(195, 193, 198, 0.9), -0.2rem -0.2rem 0.4rem #fff;
  }
  .town-time-bar{
    display: flex;
    justify-content: space-around;
    margin: 50px 0;
    padding: 6px 0px;
    border-radius: 20px;
    box-shadow: -0.3rem -0.3rem 0.5rem rgb(195 193 198 / 90%), 0.2rem 0.2rem 0.4rem #fff;
  }
  .shadow__inset__sofia{
    padding: 10px 30px;
    border-radius: 20px;
    box-shadow: inset 0.2rem 0.2rem 0.5rem rgb(195 193 198 / 90%), inset -0.2rem -0.2rem 0.5rem #fff;
  }
  .shadow__sunken{
    padding: 10px 20px;
  }

  .alarm-wrap{
      display: flex;
      justify-content: space-around;
      padding: 20px;
      border-radius: 20px;
      box-shadow: 0.3rem 0.3rem 0.5rem rgb(195 193 198 / 90%), -0.2rem -0.2rem 0.4rem #fff;
  }
  .alarm-time{
    font-size: 28px;
    margin: 0 0 10px 0;
  }
  .week-days span{
      color: rgba(0,0,0,0.3);
      margin-left: 5px;
  }
  .switch {
    position: relative;
    display: inline-flex;
    width: 4rem;
    height: 2.2rem;
    top: 5px;
}
.sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}
.switch__input {
    opacity: 0;
    width: 0;
    height: 0;
}
[type=checkbox], [type=radio] {
    box-sizing: border-box;
    padding: 0;
}
.switch__input:checked + .switch__slider {
    background: #ff7025;
    box-shadow: inset 0.2rem 0.2rem 0.5rem #f8b639, inset -0.2rem -0.2rem 0.5rem #ff4c00, 0.3rem 0.3rem 0.5rem rgb(195 193 198 / 90%), -0.2rem -0.2rem 0.4rem #fff;
}
.switch__slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e0e5ec;
    box-shadow: inset 0.2rem 0.2rem 0.5rem #fff, inset -0.2rem -0.2rem 0.5rem rgb(195 193 198 / 90%), 0.3rem 0.3rem 0.5rem rgb(195 193 198 / 90%), -0.2rem -0.2rem 0.4rem #fff;
    transition: 0.4s;
    border-radius: 1.2rem;
}
.switch__input:checked + .switch__slider::before {
    transform: translate(calc(100% - 0.25rem), -50%);
}
.switch__slider::before {
    position: absolute;
    content: "";
    height: 1.8rem;
    width: 1.8rem;
    left: 0.25rem;
    top: 50%;
    transform: translatey(-50%);
    background: #e0e5ec;
    box-shadow: inset 0.2rem 0.2rem 0.5rem rgb(195 193 198 / 90%), inset -0.2rem -0.2rem 0.5rem #fff;
    transition: 0.4s;
    border-radius: 50%;
}
.button--pin {
    border-radius: 50%;
    min-height: 2rem;
    min-width: 2rem;
    max-height: 2rem;
    max-width: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.button--raised {
    box-shadow: inset 0.2rem 0.2rem 0.5rem #fff, inset -0.2rem -0.2rem 0.5rem rgb(195 193 198 / 90%), 0.3rem 0.3rem 0.5rem rgb(195 193 198 / 90%), -0.2rem -0.2rem 0.4rem #fff;
}
.button {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: none;
    border-radius: 20px;
    padding: 9px 0 14px 0;    
    transition: all 260ms ease;
    text-decoration: none;
    font-size: 28px;
    font-family: inherit;
    max-width: 100%;
    color: #9baacf;
    background: #e0e5ec;
    box-shadow: 0.3rem 0.3rem 0.5rem rgb(195 193 198 / 90%), -0.2rem -0.2rem 0.4rem #fff;
    transform: translate(165px, 20px);
}
.sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}
@media screen and (max-width: 800px){
  .wrap{
    display: block;
  }
}