:root{
  --fnumber: 'Dosis', sans-serif;
  --ftext: 'Nunito', sans-serif;
  --bg: #131415;
  --fadebg: hsla(210, 5%, 10%, 0.7);
  --overlaybg: hsla(210, 5%, 10%, 0.3);
  --lightbg: #303336;
  --text: #d9d9d9;
  --fadetext1: rgba(217, 217, 217, 0.7);
  --fadetext2: rgba(217, 217, 217, 0.3);
  --fadetext3: rgba(217, 217, 217, 0.15);
  --accent1: #33998F;
  --accent2: #E5A01A;
  --error: #e84646;
  --pri: var(--accent1);
  --sec: #555;
  --sec2: #777;
  --cardbg: #222425;
  --shd: #0003;
  --lgshd: #fff7;
  --dkshd: #000;
  --bgswitch: url(../images/switchbg1.png);
  --rootbg: url(../images/stars.png);
  --blendmode: screen;
  --alertbg: rgba(30,30,30,0.9);
  --alertbg: linear-gradient(60deg,#4445,#1115);
}

*{
  font-family: var(--ftext);
  letter-spacing: 2px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
  transition: 0.15s ease-in-out;
  scrollbar-width: none;
}

/* universal tweaks*/
::-webkit-scrollbar{
  width: 0;
}
::selection{
  text-shadow: 0 0 5px #fff;
  background: #000;
  color: #fff;
}
/* universal submissive classes*/

.flex-row{display: flex;}
.flex-col{display: flex; flex-direction: column;}
.jcc{justify-content: center;}
.jcsa{justify-content: space-around;}
.jcsb{justify-content: space-between;}
.aic{align-items: center;}
.h100{min-height: 100vh;}
.w100{width: 100%;}
.pop{animation: pop 3s ease-in-out 1 forwards;}
.popfast{animation: pop 3s ease-in-out 1 forwards;}
.pri{background: var(--pri);}
.sec{background: var(--sec);}
.nums{transition-duration: 0s !important;}

/* variable classes */

.btn i{filter: drop-shadow(0 0 2px #fff9);}

body{
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
}

/* CURSOR BOX*/
#cursorbox{
  /* opacity: 0; */
  height: 70px;
  width: 70px;
  background: var(--fadetext3);
  opacity: 0;
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  transition: 0.7s cubic-bezier(0, 0.71, 0, 1.37);
  z-index: 1000;
  pointer-events: none;
}

/* ERROR BOX*/

#errorbox{
  position: fixed;
  bottom: 0;
  background: #111;
  text-align: left;
  font-size: 0.7em;
  color: var(--error);
  z-index: 200;
}

/* ALERT BOX*/
#alertbox{
  position: fixed;
  bottom: 0;
  background: #111;
  text-align: left;
  font-size: 0.7em;
  color: var(--error);
  z-index: 200;
}


/* ROOT */

#root{position: relative;}
#root::after{
  content: '';
  position: absolute;
  inset: 0;
  background: var(--rootbg) repeat center center/cover;
  background-size: 200%;
  mix-blend-mode: var(--blendmode);
  animation: grad 360s linear infinite forwards;
  z-index: -1;
}

/* IST and LONDON clocks*/

.clock{
  gap: 150px;
  max-width: 1000px;
  position: relative;
}
.clockface{
  position: relative;
  height: 250px;
  width: 250px;
  border-radius: 50%;
  transform: scale(0.85);
}
.clockface::before{
  content: '';
  position: absolute;
  inset: 0;
  background: url(../images/dial.png) no-repeat center center/cover;
  animation: grad2 360s linear infinite forwards;
}
.region{
  position: absolute;
  bottom: 2.5em;
  text-align: center;
  letter-spacing: 5px;
  color: var(--fadetext2);
  font-size: 1.2em;
  text-transform: capitalize;
}

/* Digial clock tweaks */

.clockfacedg{align-items: flex-start; gap: 10px;}
.clockfacedg>.region{position: relative; bottom: unset; color: var(--fadetext2);}
.clockfacedg .num{
  font-family: var(--fnumber);
  font-size: 3em;
  letter-spacing: 10px;
  color: var(--text);
}
.clockfacedg .hh{font-weight: 500; position: relative;}
.clockfacedg .mm{opacity: 0.7;}
.clockfacedg .hh::after{
  content: ":";
  font-weight: 400;
  color: var(--text);
}
#istdg .hh{color: var(--accent1);}
#lndg .hh{color: var(--accent2);}

/* HANDS */

/*
position of hand top: ((dial_length/2)-hand_length)+(hand_width/2).
transform-rigin: (50%) for x-axis (hand_length-(hand_width/2)) for y-axis.
*/

.hand{
  position: absolute;
  border-radius: 50px;
  transform: rotate(0deg);
  transition-duration: 0s;
}
.hourhand{
  top: 71px;
  height: 60px;
  width: 12px;
  transform-origin: 50% 54px;
  z-index: 3;
}
.minutehand{
  top: 49px;
  height: 80px;
  width: 8px;
  background: var(--text);
  transform-origin: 50% 76px;
  z-index: 2;
}
.secondhand{
  top: 37px;
  height: 90px;
  width: 4px;
  background: var(--text);
  opacity: 0.1;
  transform-origin: 50% 88px;
  z-index: 1;
}
#ist .hourhand{background: var(--accent1);}
#ln .hourhand{background: var(--accent2);}
.dial{
  position: absolute;
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background: hsla(210, 5%, 10%, 0.5);
  z-index: 100;
}


/* NAVBAR */

#navbar{
  position: fixed;
  top: 0;
  margin: 20px 0;
  padding: 20px 0;
  transition: 0.5s cubic-bezier(1, -0.7, 0, 1.23);
  z-index: 100;
}
#navmenu{
  max-width: 250px;
  gap: 30px;
}
#menubtn{display: none;}

/* OPTIONS */

#navmenu>.option{
  position: relative;
}
#navmenu>.option>.icon{
  cursor: pointer;
  color: var(--fadetext1);
  font-size: 1.4em;
  transition: 0.4s ease-in-out;
}
#navmenu>.option>.opt-txt{
  position: absolute;
  font-size: 0.8em;
  font-weight: 600;
  bottom: -50px;
  left: 0;
  color: var(--fadetext1);
  background: var(--fadetext2);
  padding: 7px 15px;
  border-radius: 2px;
  pointer-events: none;
  transition-duration: 0.3s;
  opacity: 0;
}

#navmenu>.option:hover>.opt-txt{opacity: 1;}
#navmenu>.option:hover>.icon{
  color: #eee;
  filter: drop-shadow(0 0 5px var(--lgshd));
}


/* EXTRAS */

.popup{
  position: fixed;
  inset: 0;
  transition: 0.4s cubic-bezier(0.81, 0.02, 0.01, 1.45);
  z-index: 100;
}
.overlay{
  width: 100%;
  background: var(--overlaybg);
  backdrop-filter: blur(3px);
  position: absolute;
  inset: 0;
  z-index: -1;
}
.main{
  padding: 20px;
  background: var(--cardbg);
  border-radius: 7px;
  border-top: 7px solid var(--accent1);
  gap: 15px;
  box-shadow: 0 0 10px var(--shd);
  position: relative;
}
.mintitle{
  font-size: 0.85em;
  color: var(--fadetext1);
  margin-bottom: 10px;
}
.minopt{
  cursor: pointer;
  font-size: 0.85em;
  margin-bottom: 10px;
  color: var(--accent1);
  position: relative;
}
.minopt::after{
  content: 'Minimize';
}

.finishpopup{
  position: fixed;
  top: 0;
  z-index: 101;
  background: var(--alertbg);
  backdrop-filter: blur(5px);
  padding: 1em 3vw;
  /* border-radius: 0 0 10px 10px; */
  font-size: 1.1em;
  color: var(--fadetext1);
  border-top: 3px solid var(--accent1);
  transform: translateY(-110%);
}
.finishpopup i{
  display: flex;
  align-items: center;
  font-size: 1.3em;
  padding: 10px;
  cursor: pointer;
  margin-left: auto;
  text-shadow: none;
  color: var(--error);
  position: relative;
}
.finishpopup i::after{
  content: 'Dismiss';
  position: absolute;
  font-size: 0.7em;
  color: var(--fadetext1);
  font-weight: 400;
  opacity: 0;
  transform: translateX(-50%);
  font-family: var(--ftext);
  transition: 0.3s ease-in-out;
}
.finishpopup i:hover::after{
  opacity: 1;
  transform: translateX(-120%);
}
.finishpopup .nums{
  font-family: var(--fnumber) !important;
  color: var(--text);
  margin-left: 1.3em;
  letter-spacing: 5px;
  text-shadow: 0 0 5px var(--lgshd);
  font-weight: 600;
}

/* Alarm */

#alarmmain{min-width: 280px;}
#alarmmain .nums{font-family: var(--fnumber);}
#ctime{letter-spacing: 5px; cursor: pointer;}
#chh,#cmm{font-size: 1.2em; letter-spacing: 5px;}
#chh{color: var(--accent1); font-weight: 600;}
.alarmspan{margin: 10px 0; display: none;}
.alarmspan .nums{letter-spacing: 7px; margin-left: 15px;}
.altoggle{
  cursor: pointer;
  position: relative;
  width: 32px;
  height: 18px;
  border-radius: 50px;
  margin-right: 15px;
  padding: 4px 6px;
  background: var(--fadetext3);
  box-shadow: inset 0 0 2px var(--dkshd);
}
/* blob transform value: (width of toggle)-(width of blob)-(paddingX*2) */
.altoggle .blob{
  --bw: 8px;
  --tx: 12px;
  background: var(--sec);
  height: var(--bw);
  width: var(--bw);
  border-radius: 50%;
  /* transform: translateX(12px); */
}
.altime{font-size: 1.3em}
.deleteal{color: var(--error); margin-left: auto; cursor: pointer; padding: 5px;}
.setalarm{margin-bottom: 40px;}
.changers{
  gap: 50px;
  font-size: 1.3em;
  transform: translateX(-2px);
}
.changers i{cursor: pointer;}
.changers i:hover{transform: scale(1.4);}
.plus{margin-bottom: 5px;}
.minus{margin-top: 5px;}
.setter{font-size: 2em; letter-spacing: 8px;}
#sethh, #setmm{letter-spacing: inherit;}
#alarmmain .buttons{
  gap: 25px;
  position: absolute;
  bottom: -20px;
}
.btn{
  cursor: pointer;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  z-index: 1;
}
#setbtn{background: var(--pri);}
#setbtn>i{transform: translateX(1px) translateY(1px); color: #fff;}
#cancelbtn>i{transform: translateX(1px) translateY(0px); color: #fff;}
#limitbox{
  font-size: 0.6em;
  padding: 7px 10px;
  background: var(--lightbg);
  border-radius: 2px;
  max-width: 25ch;
  text-align: center;
  position: absolute;
  top: 10px;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}
#noAlarm{display: none;}

/* Stopwatch */

#stopwatchmain{min-width: 320px; max-width: 320px;}
#swbody{gap:20px; margin-top: 10px;}
#stopwatchNum{font-size: 2.5em;}
#stopwatchNum .nums{font-family: var(--fnumber); letter-spacing: 7px;}
#stopwatchmain .buttons{gap: 20px; margin: 10px 0 10px 0;}
#playsw i{transform: translateX(2px); color: #fff;}
#cancelsw i{transform: translateX(1px); color: #fff;}
#pausesw i{transform: translateX(1px); color: #fff;}
#lapsw i{transform: translateX(1.2px); color: #fff;}
#resetsw i{transform: translateX(1.5px); color: #fff;}
#swhh::after{content: ":"}
#swmm::after{content: ":"}
#swms{
  font-size:0.4em;
  transform: translateY(0.6em);
  letter-spacing: 3px !important;
}
#lapspar{position: relative;}
#laps{
  flex-direction: column-reverse;
  max-height: 150px;
  overflow-y: scroll;
  position: relative;
}
#laps p{font-size: 0.7em; color: var(--fadetext1); font-weight: 200;}
#laps p:last-child{color: var(--text); margin-top: 1em; font-weight: 500;}
.scrollovr{
  height: 10px;
  width: 100%;
  position: absolute;
  z-index: 10;
}
#o1{
  top: 0;
  background: linear-gradient(var(--cardbg), transparent);
}
#o2{
  bottom: 0;
  background: linear-gradient(transparent, var(--cardbg));
}
#minlapswarn{
  font-size: 0.75em;
  padding: 7px 10px;
  background: var(--lightbg);
  border-radius: 2px;
  max-width: 20ch;
  text-align: center;
  position: absolute;
  top: -45px;
  left: 10px;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}
.switch{
  user-select: none;
  display: none;
  cursor: pointer;
  content: 'Stopwatch';
  position: absolute;
  top: -33px;
  right: 10px;
  height: 35px;
  width: 120px;
  font-size: 0.85em;
  background: var(--bgswitch) no-repeat center center/contain;
  filter: drop-shadow(0 0 5px var(--shd));
  transition-duration: 0.1s;
  z-index: 99;
}
.switch:active{filter: brightness(3);}
.minimized{
  position: fixed;
  inset: unset;
  bottom: 20px;
  right: 20px;
  height: 105px;
  width: unset;
  font-size: 0.8em;
  transform-origin: bottom right;
}
.minimized .main{border: none; gap: 0;}
.minimized #stopwatchmain{width: 400px; max-width: unset;}
.minimized #stopwatchNum{width: 20em;}
.minimized .overlay{display: none;}
.minimized #stopwatchswitch{display: flex;}
.minimized .minopt::after{content: "Maximize"}
.minimized #swh{display: none;}
.minimized #minsw{margin: 0 0 5px 0; font-size: 1em;}
.minimized #swbody{flex-direction: row; margin: 0;}
.minimized #laps{display: none;}
.minimized #lapspar{display: none;}
.minimized .scrollovr{display: none;}
.minimized .buttons{
  margin: 0 !important;
  width: 100%;
  gap: 10px !important;
  justify-content: flex-end;
}

/* Timer */

#timermain{min-width: 320px;}
#timermain .setter{transform: translateX(0.4em);}
#timermain .minopt{display: none;}
#timermain .plus, #timermain .minus{gap: 54px;}
#timermain .nums{
  font-family: var(--fnumber);
  letter-spacing: 7px;
  font-size: 1.2em;
}
#sethhtm::after{content: ':'}
#timermain .buttons{gap: 20px; margin: 30px 0 10px 0;}
#setsstm{
  font-size: 0.5em !important;
  letter-spacing: 3px !important;
  right: 0;
  transform: translateY(0.5em);
}
#playtm i{transform: translateX(1.7px); color: #fff;}
#pausetm i{transform: translateX(1px); color: #fff;}
#canceltm i{transform: translateX(1px); color: #fff;}
#plustm p, #minustm p{
  font-family: var(--fnumber);
  font-weight: 600;
  transform: translateY(-1.2px);
  text-shadow: 0 0 2px #fff9;
}
#resettm i{transform: translateX(1.3px); color: #fff;}
#warntimer{
  font-size: 0.6em;
  padding: 7px 10px;
  background: var(--lightbg);
  border-radius: 2px;
  max-width: 25ch;
  text-align: center;
  position: absolute;
  top: 10px;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}
.minimized #timermain{width: 400px;}
.minimized #tmbody{flex-direction: row; justify-content: space-between;}
.minimized #tmh{display: none;}
.minimized #mintm{margin: 0 0 5px 0; font-size: 1em;}
.minimized #timerswitch{
  display: flex;
  right: 130px;
}

/* Settings */

#settingsmain{min-width: 320px;}
#settingsmain .cval{
  color: var(--fadetext2);
  border-radius: 100px;
  margin-bottom: 0.5em;
  border: 2px solid transparent;
  padding: 0.4em 0.5em;
}
#settingsmain input{
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 1em;
  text-transform: uppercase;
  margin-left: 0.2em;
  position: relative;
}
#ctv{
  text-transform: uppercase;
  cursor: pointer;
  font-size: 0.85em;
  font-weight: 600;
  margin-bottom: 1.2em;
}
#settingsmain .buttons{
  border-top: 2px solid var(--fadetext3);
  color: var(--accent1);
  font-weight: 600;
  padding-top: 1em;
  font-size: 0.85em;
  gap: 0.2em;
}
#settingsmain .buttons i{
  margin-right: 1em;
  font-size: 0.8em;
}
#savesg{
  cursor: pointer;
  var(--pri);
  padding: 0.3em 0;
}
#closesg{
  cursor: pointer;
  color: var(--error);
  padding: 0.3em 0;
}
#resetsg{
  cursor: pointer;
  color: var(--sec2);
  padding: 0.3em 0;
}
#warnsetclr{
  font-size: 0.6em;
  padding: 7px 10px;
  background: var(--lightbg);
  border-radius: 2px;
  max-width: 25ch;
  text-align: center;
  position: absolute;
  top: 10px;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}

/* About */

#aboutmain{min-width: 330px; max-width: 330px;}
#aboutmain #abttext{
  font-size: 0.85em;
}
#aboutmain #abttext span{color: var(--fadetext1)}
#aboutmain #social{
  gap: 0.3em;
  border-top: 1px solid var(--fadetext3);
  padding-top: 1em;
  margin: 2em 0 -0.5em -0.3em;
}
#aboutmain #social a{
  color: var(--fadetext2);
  padding: 0.3em;
  font-size: 1.7em;
  transition: 0.15s ease-in-out;
}
#github:hover{color: #fff !important; text-shadow: 0 0 7px #fff7;}
#mail:hover{color: #f66c6c !important; text-shadow: 0 0 7px #e82e2e}
#closeab{
  font-size: 0.85em;
  cursor: pointer;
  color: var(--error);
  padding: 0.2em 0.5em 0.2em 0;
}
#closeab i{margin-right: 0.5em;}

/* Options animations */

.icon{height: 1.1em; width: 1.1em;}
@media screen and (min-width:600px){
  #alarm:hover #alarm-ico{animation: al 0.45s ease-in-out 1 forwards;}
  #stopwatch:hover #stopwatch-ico{animation: st 0.6s ease-in-out 1 forwards;}
  #timer:hover #timer-ico{animation: tm 0.8s ease-in-out 1 forwards;}
  #settings:hover #settings-ico{animation: sn 0.9s ease-in-out 1 forwards;}
  #about:hover #about-ico{animation: ab 0.75s ease-in-out 1 forwards;}
}

/* MOBILE LAYOUTS */

@media screen and (max-width:800px) {
  #root::after{background-size: 400%;}
  .clock{
    flex-direction: column;
    gap: 50px;
  }
  .clockface{transform: scale(0.75);}
  .clockfacedg{transform: scale(0.9);}
  #clock_digital{
    gap: 100px;
    font-size: 0.9em;
  }
}
@media screen and (max-width:500px){
  .pop{animation: pop2 3s ease-in-out 1 forwards;}
  body{font-size: 14px;}
  .region{font-size: 1.4em;}
  /* NAVBAR MENU */
  #navbar{
    left: 0;
    top: 0;
    padding: 35px 0 0 0;
    width: 250px;
    min-height: 100vh;
    margin: 0;
    align-items: flex-start;
    justify-content: flex-start;
    background: var(--fadebg);
    backdrop-filter: blur(2.5px);
    box-shadow: 0 0 20px #0004;
    transform-origin: left;
    z-index: 150;
  }
  #navmenu{
    max-width: unset;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
  }
  #navmenu>.option{
    padding: 20px 0 20px 20px;
    cursor: pointer;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 30px;
    opacity: 0;
  }
  #navmenu>.option>.opt-txt{
    color: var(--fadetext1);
    font-size: 1em;
    padding: 0;
    text-align: left;
    position: relative;
    bottom: unset;
    background: transparent;
    opacity: 1;
  }
  #navmenu>.option>.icon{color: var(--fadetext1);}
  #menubtn{
    display: flex;
    cursor: pointer;
    height: 35px;
    width: 35px;
    border-radius: 0 50px 50px 0;
    background: var(--lightbg);
    position: absolute;
    top: 20px;
    right: -35px;
  }
  #menubtn>i{
    font-size: 1.1em;
    transform: translateX(-2.5px);
  }
  #navmenu>.option:hover{background: var(--fadetext3);}
  #navmenu>.option:hover>.opt-txt{color: var(--text);}
  #navmenu>.option:hover>.icon{filter: drop-shadow(0 0 3px transparent);}
  .closed{
    transform: translateX(-100%);
    transition: 0.5s cubic-bezier(1, 0.2, 0, 1) !important;
    box-shadow: 0 0 15px transparent !important;
  }
  .optvis{
    opacity: 1 !important;
  }

  /* EXTRAS */
  .finishpopup{z-index: 151;}
  .switch{font-size: 0.9em;}
  .minimized{z-index:99; height: unset; transform-origin: bottom left;}
  .overlay{display: none;}
  .main{
    gap: 30px;
    font-size: 1.5em;
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: none;
    overflow: scroll;
  }
  .mintitle, .minopt{margin-bottom: 20px;}
  .minopt{padding: 10px;}
  .minopt::after{
    content: "\f107";
    font-family: "Font Awesome 6 Free";
    font-weight: 600;
    color: var(--fadetext1);
  }
  .theader{justify-content: center; gap: 20px;}
  .minimized{
    width: 100%;
    height: 110px;
    bottom: 0;
    right: 0;
  }
  .minimized .main{padding: 10px 20px 20px 10px; overflow: hidden;}
  .minimized .minopt{font-size: 1.2em; transform: translateY(-5px); padding: 5px 10px 0px 10px;}
  .minimized .minopt::after{content: "\f106"}
  .minimized .btn{transform: scale(0.85);}
  .minimized .btn i{font-size: 0.9em;}

  /* ALARMS */
  .altoggle{
    height: 24px;
    width: 40px;
    padding: 4px 8px;
  }
  .altoggle .blob{
    --bw: 12px;
    --tx: 12px;
  }
  .changers{gap: 68px; overflow: hidden;}
  .changers i:hover{transform: scale(1);}
  #alarmmain .buttons{
    position: relative;
    bottom: unset;
  }
  .btn{
    height: 45px;
    width: 45px;
  }
  .btn i{font-size: 0.8em;}
  #cancelbtn>i{transform: translateX(1px) translateY(1px);}
  #limitbox{
    position: fixed;
    top: unset;
    bottom: 10px;
  }

  /* STOPWATCH */
  #stopwatchmain{max-width: unset;}
  .minimized #stopwatchmain{width: 100%; max-width: unset;}
  .minimized #stopwatchNum{font-size: 1.8em;}
  .minimized #stopwatchmain .buttons{width: unset; gap:3vw;}
  .minimized #swbody{
    gap: 5vw;
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 0 20px;
  }
  #laps{max-height: 35vh;}
  #playsw i{font-size: 0.85em; transform: translateX(2px);}
  #cancelsw i{transform: translateX(1px);}

  /* TIMER */
  #timermain .buttons{margin: 60px 0 0 0;}
  .minimized #timermain{width: 100%;}
  .minimized #timermain .buttons{width: unset; gap:3vw;}
  .minimized #timermain .setter{font-size: 1.5em !important;}
  .minimized #tmbody{
    transform: translateY(5px);
    gap: 5vw;
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 0 20px;
  }
  #warntimer{
    position: fixed;
    top: unset;
    bottom: 10px;
  }

  /* SETTINGS */
  #warnsetclr{
    position: fixed;
    top: unset;
    bottom: 10px;
  }

  /* ABOUT */
  #aboutmain{max-width: unset;}
}
@media screen and (max-width:400px) {
  .clock{gap: 0px;}
  .clockface{transform: scale(0.6);}
  .clockfacedg{transform: scale(1);}
  .minimized .nums{font-size: 0.8em;}
}
@media (min-aspect-ratio:8/6) and (max-width: 900px){
  .pop{animation: pop2 3s ease-in-out 1 forwards;}
  #navbar{margin: 0;}
  .clock{
    flex-direction: row;
    gap:20px;
  }
  .clockface{transform: scale(0.65);}
  .clockfacedg{transform: scale(0.8);}

  /* EXTRAS */
  .switch{font-size: 0.9em;}
  .overlay{display: none;}
  .main{
    gap: 20px;
    font-size: 1.4em;
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: none;
    overflow: scroll;
  }
  .mintitle{margin-bottom: 10px;}
  .minopt::after{
    content: '\f107';
    font-weight: 600;
    font-family: 'Font Awesome 6 Free';
    color: var(--fadetext1);
  }
  .minimized .theader{justify-content: flex-start; margin-bottom: 5px;}
  .minimized .minopt::after{
    content: "Maximize";
    font-family: var(--ftext);
    font-weight: 600;
    color: var(--accent1);
  }
  .theader{justify-content: center; gap: 20px;}
  .minimized .main{border-radius: 7px; font-size: 1.2em; padding: 10px 20px;}
  .minimized #stopwatchNum{font-size: 2em;}
  .minimized #timermain .nums{font-size: 1em;}
  .minimized .minopt{margin: 0;}
  .minimized .btn{
    width: 40px;
    height: 40px;
  }

  /* ALARMS */
  .altoggle{
    height: 24px;
    width: 40px;
    padding: 4px 8px;
  }
  .altoggle .blob{
    --bw: 12px;
  }
  .changers{gap: 68px;}
  .changers i:hover{transform: scale(1);}
  .buttons{
    position: relative;
    bottom: unset;
  }
  .btn{
    height: 50px;
    width: 50px;
  }
  #alarmmain .buttons{
    position: unset;
    bottom: unset;
  }
  #cancelbtn>i{transform: translateX(1px) translateY(0px);}
  #limitbox{
    position: fixed;
    top: unset;
    bottom: 10px;
  }

  /* STOPWATCH */
  #stopwatchmain{max-width: unset;}
  #laps{max-height: 25vh;}
  #playsw{font-size: 0.85em; transform: translateX(1px);}

  /* TIMER */
  #timermain .buttons{margin: 60px 0 0 0;}

  /* ABOUT */
  #aboutmain{max-width: unset;}
}
@media (min-aspect-ratio:12/6) and (min-width: 900px) and (max-height: 600px){
  .popup{justify-content: flex-start; padding: 20px 0; overflow: scroll;}
  .overlay{position: absolute; display: none;}
  .minimized{padding: 0; overflow: unset;}
}

/* ANIMATIONS */

@keyframes grad{
  0%{background-position: bottom left; opacity: 0;}
  10%{opacity: .4;}
  90%{opacity: .4;}
  100%{background-position: top right; opacity: 0;}
}

@keyframes grad2{
  0%{opacity: .2;}
  10%{opacity: .5;}
  90%{opacity: .5;}
  100%{opacity: .2;}
}

@keyframes al {
  0% {transform: rotate(0deg);}
  33% {transform: rotate(25deg);}
  66% {transform: rotate(-25deg);}
  100% {transform: rotate(0deg);}
}

@keyframes st{
  0%{transform: translateY(0);}
  20%{transform: translateY(-5px) rotate(-15deg);}
  30%{transform: translateY(-5px) rotate(10deg);}
  40%{transform: translateY(-5px) rotate(0deg);}
  50%{transform: translateY(0px);}
  70%{transform: translateY(-3px);}
  80%{transform: translateY(0px);}
  90%{transform: translateY(-1px);}
  100%{transform: translateY(0px);}
}

@keyframes tm{
  0%{transform: rotateX(0deg);}
  50%{transform: rotateX(180deg);}
  100%{transform: rotateX(0deg);}
}

@keyframes sn{
  0%{transform: rotate(0deg);}
  20%{transform: rotate(20deg) translateX(-0.8px);}
  40%{transform: rotate(0deg);}
  60%{transform: rotate(40deg) translateX(-0.8px) translateY(0.7px);}
  100%{transform: rotate(0deg);}
}

@keyframes ab{
  0%{transform: scale(1);}
  20%{transform: scale(0.8);}
  50%{transform: scale(1.2);}
  80%{transform: scale(1);}
  100%{transform: scale(1);}
}

@keyframes pop{
  0%{transform: translateY(-100%); opacity: 0;}
  10%{transform: translateY(0%); opacity: 1;}
  95%{transform: translateY(0%); opacity: 1;}
  100%{transform: translateY(-100%); opacity: 0;}
}

@keyframes pop2{
  0%{transform: translateY(+100%); opacity: 0;}
  10%{transform: translateY(0%); opacity: 1;}
  95%{transform: translateY(0%); opacity: 1;}
  100%{transform: translateY(+100%); opacity: 0;}
}

@keyframes rot{
  from{transform: rotate(0deg);}
  to{transform: rotate(-360deg);}
}

@keyframes blink{
  0%{opacity: 1;}
  50%{opacity: 0;}
  100%{opacity: 1;}
}

/* universal dominant classes */

.hidden{
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: scale(0.2);
  transition: 0.2s cubic-bezier(1, -0.43, 0, 0.87);
}
.hidden2{
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: 0.2s cubic-bezier(1, -0.43, 0, 0.87);
}
.toggle-on{
  background: var(--pri) !important;
  transform: translateX(var(--tx));
}