@font-face {
  font-family: "OpenSans";
  src: url(font/OpenSans.ttf);
}

@font-face {
  font-family: "Azonix";
  src: url(font/Azonix.otf);
}

@font-face {
  font-family: "TrenchThin";
  src: url(font/TrenchThin.ttf);
}

@font-face {
  font-family: "Digital7Mono";
  src: url(font/Digital7Mono.ttf);
}

@font-face {
  font-family: "OrdinaryLove";
  src: url(font/OrdinaryLove.ttf);
}

@font-face {
  font-family: "PegHoles";
  src: url(font/PegHoles.ttf);
}

@font-face {
  font-family: "chintzy";
  src: url(font/chintzy.ttf);
}

@font-face {
  font-family: "chintzys";
  src: url(font/chintzys.ttf);
}

@font-face {
  font-family: "DOTMATRI";
  src: url(font/DOTMATRI.TTF);
}

@font-face {
  font-family: "DOTMBold";
  src: url(font/DOTMBold.TTF);
}

@font-face {
  font-family: "DS-DIGIB";
  src: url(font/DS-DIGIB.TTF);
}

@font-face {
  font-family: "DS-DIGI";
  src: url(font/DS-DIGI.TTF);
}

@font-face {
  font-family: "MINECRAFTPE";
  src: url(font/MINECRAFT\ PE.ttf);
}

@font-face {
  font-family: "Sparks";
  src: url(font/Sparks.ttf);
}

@font-face {
  font-family: "Okesip";
  src: url(font/Okesip.otf);
}

@font-face {
  font-family: "Roller";
  src: url(font/Roller.ttf);
}

@font-face {
  font-family: "Sextape";
  src: url(font/Sextape.ttf);
}

@font-face {
  font-family: "RitaOfCascia";
  src: url(font/RitaOfCascia.ttf);
}

@font-face {
  font-family: "Mockery";
  src: url(font/Mockery.ttf);
}

@font-face {
  font-family: "HocusPocusFilled";
  src: url(font/HocusPocusFilled.ttf);
}

@font-face {
  font-family: "HocusPocusHollow";
  src: url(font/HocusPocusHollow.ttf);
}

@font-face {
  font-family: "HocusPocus";
  src: url(font/HocusPocus.ttf);
}

@font-face {
  font-family: "Storycan";
  src: url(font/Storycan.otf);
}

@font-face {
  font-family: "Showthat";
  src: url(font/Showthat.otf);
}

@font-face {
  font-family: "BroshkLime";
  src: url(font/BroshkLime.ttf);
}

@font-face {
  font-family: "Pasti";
  src: url(font/Pasti.otf);
}

@font-face {
  font-family: "Library3am";
  src: url(font/Library3am.otf);
}

@font-face {
  font-family: "DigitaltsLime";
  src: url(font/DigitaltsLime.ttf);
}

@font-face {
  font-family: "Digitaltech";
  src: url(font/Digitaltech.otf);
}

@font-face {
  font-family: "InflammableAge";
  src: url(font/InflammableAge.otf);
}

@font-face {
  font-family: "DignityofLabour";
  src: url(font/DignityofLabour.otf);
}

@font-face {
  font-family: "Minisystem";
  src: url(font/Minisystem.otf);
}

@font-face {
  font-family: "HokjesgeestCubeLeft";
  src: url(font/HokjesgeestCubeLeft.otf);
}

@font-face {
  font-family: "HokjesgeestCubeRight";
  src: url(font/HokjesgeestCubeRight.otf);
}

@font-face {
  font-family: "McGareyRegular";
  src: url(font/McGareyRegular.ttf);
}

@font-face {
  font-family: "Oslo";
  src: url(font/Oslo.ttf);
}

@font-face {
  font-family: "Oslo_Bold";
  src: url(font/Oslo_Bold.ttf);
}

@font-face {
  font-family: "Segment14";
  src: url(font/Segment14.otf);
}

@font-face {
  font-family: "ninepin";
  src: url(font/ninepin.ttf);
}

@font-face {
  font-family: "HartingPlain";
  src: url(font/HartingPlain.ttf);
}

@font-face {
  font-family: "LCD14";
  src: url(font/LCD14.otf);
}

@font-face {
  font-family: "Taurus-Mono-Outline";
  src: url(font/Taurus-Mono-Outline.otf);
}

@font-face {
  font-family: "AmericanStencil";
  src: url(font/AmericanStencil.otf);
}

@font-face {
  font-family: "software_tester_7";
  src: url(font/software_tester_7.ttf);
}

@font-face {
  font-family: "Dotrice";
  src: url(font/Dotrice.otf);
}

@font-face {
  font-family: "repet";
  src: url(font/repet.ttf);
}

@font-face {
  font-family: "UbuntuMono-R";
  src: url(font/UbuntuMono-R.ttf);
}

@font-face {
  font-family: "gabriele-d";
  src: url(font/gabriele-d.ttf);
}

@font-face {
  font-family: "zig";
  src: url(font/zig.ttf);
}

@font-face {
  font-family: "origa";
  src: url(font/origa.ttf);
}

@font-face {
  font-family: "origap";
  src: url(font/origap.ttf);
}

@font-face {
  font-family: "micrenc";
  src: url(font/micrenc.ttf);
}

@font-face {
  font-family: "saxmono";
  src: url(font/saxmono.ttf);
}

@font-face {
  font-family: "Hack";
  src: url(font/Hack.ttf);
}

@font-face {
  font-family: "FiraMono";
  src: url(font/FiraMono.otf);
}

body {
  background: rgb(0, 0, 0);
  text-align: center;
  overflow-y: scroll;
  /* bg cover image */
  font-family: Opensans, sans-serif;
  font-size: 16px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  transition: background-image 0.3s ease-in-out;
}

body::-webkit-scrollbar {
  display: none;
}

/* toggle about */
.toggleAbout {
  display: none;
}

.toggleAbout.active {
  display: grid;
  place-items: center;
}

/* about heading */
h1 {
  color: #ffffff;
  font-size: 24px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: block;
  margin-top: 100%;
  max-width: 70vw;
  margin-inline: auto;
  padding: 2rem;
  border-radius: 1em;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.116);
  background: rgba(92, 92, 92, 0.26);
  backdrop-filter: blur(30px);
}

/* about paragraph */
p {
  color: #ffffff;
  font-size: 16px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: block;
  padding: 2rem;
  max-width: 70vw;
  margin-inline: auto;
  border-radius: 1em;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.116);
  background: rgba(92, 92, 92, 0.26);
  backdrop-filter: blur(30px);
}

/* clock */
#clock {
  color: #CDDC39;
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
  font-size: 12rem;
  z-index: -1;
  text-shadow: #0051ff;
  transition: font-family 0.5s ease;
}

/* blinking seconds effect */
.blinking {
  animation: blink 1s step-end infinite;
}

@keyframes blink {

  from,
  to {
    visibility: visible;
  }

  50% {
    visibility: hidden;
  }
}

/* swipe clock to chnage its font hint */
.swipe-hint {
  position: fixed;
  font-family: PegHoles, sans-serif;
  top: 30vh;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.247);
  color: rgba(255, 255, 255, 0.829);
  padding: 10px 10px;
  font-size: 16px;
  opacity: 1;
  z-index: 999;
  animation: fadeOut 5s ease 3s forwards;
  /* wait 2s, fade out over 3s */
}

/* setting hint */
.swipe-hint2 {
  position: fixed;
  font-family: PegHoles, sans-serif;
  top: 1vh;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.247);
  color: rgba(255, 255, 255, 0.829);
  padding: 10px 10px;
  font-size: 16px;
  opacity: 1;
  z-index: 999;
  animation: fadeOut 5s ease 3s forwards;
  /* wait 2s, fade out over 3s */
}

@keyframes fadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* -----------------------------------------------------input trays starts ------------- */
/* font input */
.fontInput {
  width: 150px;
  height: 30px;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  background-color: #ff000000;
}


/* size slider */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  margin-top: 9px;
  width: 150px;
  border-radius: 100px;
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animation: 0.2s;
  background: #1b62fd;
  border-radius: 25px;
}

input[type="range"]::-webkit-slider-thumb {
  height: 20px;
  width: 40px;
  border-radius: 7px;
  background: #ffffff96;
  backdrop-filter: blur(1px);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3.6px;
}

input[type="range"]:hover::-webkit-slider-runnable-track {
  background: hsl(143, 45%, 55%);
}

/*font color picker tray */
#colorPicker {
  display: none;
  width: 150px;
  height: 30px;
  font-size: 1rem;
  cursor: pointer;
  background-color: #ffffff00;
}

/*background color input tray*/
#colorInput {
  display: none;
  width: 150px;
  height: 30px;
  font-size: 1rem;
  cursor: pointer;
  background-color: #ffffff00;
}

/* bg cover image picker tray  */
#filePicker {
  font-family: PegHoles, sans-serif;
  color: #ffffff;
  position: absolute;
  width: 150px;
  height: 30px;
  font-size: 1rem;
  left: 19px;
  cursor: pointer;
  background-color: #3f3f3f00;
}

/* bg img picker tray */
#file-upload-button {
  font-family: PegHoles, sans-serif;
  cursor: pointer;
  background-color: #ffffff00;
}

/* bg img reset tray  */
#resetButton {
  color: #ffffff;
  position: absolute;
  width: 150px;
  height: 30px;
  font-size: 1rem;
  font-family: PegHoles, sans-serif;
  left: 19px;
  cursor: pointer;
  background-color: #6b6b6b00;
}

/* audio player*/
#audio {
  width: 150px;
  height: 30px;
  font-size: 1rem;
  background-color: #ffffff00;
  padding: 1px;
}


#colorPicker:hover,
#colorInput:hover,
.fontInput:hover,
#filePicker:hover,
#resetButton:hover,
#audio:hover {
  width: 150px;
  height: 30px;
  font-size: 1rem;
  cursor: pointer;
  background-color: hsla(147, 100%, 50%, 0.275);
}

/* ----------------------------------------------------------------tray input ends -------------- */

/* buyMeACoffee-btn */
.bmc-btn-container {
  transform: translate(28px);
  margin-top: 5rem;
}

/* link about button */
.linkAbout {
  color: rgb(255, 255, 255);
  font-family: PegHoles, sans-serif;
  text-decoration: none;
  position: fixed;
  left: 15px;
  padding-bottom: 2.2rem;
  padding-top: 1.2rem;
  width: 10rem;
  height: 0.1rem;
  cursor: pointer;
  border-radius: 10px;
  background-color: #ffffff23;
}

.linkAbout:hover {
  color: rgb(255, 255, 255);
  font-weight: 800;
  background-color: hsl(143, 45%, 55%);
}

.linkAbout:active {
  background-color: rgba(255, 255, 255, 0.116);
}

/* -------------------------------------------------------------------tray titles starts ---------------*/

.titleName {
  color: rgb(255, 255, 255);
  font-size: 16px;
  text-decoration: none;
  position: fixed;
  left: 15px;
  padding-top: .6rem;
  width: 10rem;
  height: 0.4rem;
  font-family: PegHoles, sans-serif;
  cursor:default;
  border-radius: 10px;
}

/* --------------------------------------------------------------------tray titles ends ---------------*/

/* --------------------------------------------------------------------links style starts --------------*/

/* settings svg icon */
#settings-icon {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.rotate {
  transform: rotate(120deg);
}

.rotated {
  transform: rotate(120deg);
}

/* toggle button  */
.toggle-button {
  position: fixed;
  top: .75rem;
  left: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 20px;
  height: 15px;
}

/* navbar ?*/
.navbar {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* navbar links */
.navbar-links {
  display: flex;
  padding: 1rem;
  transform: translateX(-150%);
  /* Hidden by default */
  margin: 2em;
  width: 90px;
  height: 660px;
  background: rgba(211, 211, 211, 0.26);
  padding-left: 3em;
  padding-right: 3em;
  padding-bottom: 6em;
  border-radius: 1em;
  position: fixed;
  z-index: 1;
  backdrop-filter: blur(20px);
  border: solid 2px transparent;
  background-clip: padding-box;
  box-shadow: 10px 10px 10px rgba(46, 54, 68, 0.1);
  top: 0;
  left: 0;
  color: white;
  flex-direction: column;
  transition: transform 0.8s ease;
  overflow-x: hidden;
}

.navbar-links ul {
  margin: 0;
  padding: 0;
  flex-direction: column;
}

.navbar-links li {
  list-style: none;
  text-align: center;
  /* it is padding given to li above */
}

#padding {
  padding: 3rem;
}

.navbar-links div,
input,
audio {
  text-decoration: none;
  position: absolute;
  right: 1rem;
}

.navbar-links.active {
  transform: translateX(0);
  /* Slide in */
}

@media (max-height: 400px) {
  .navbar-links {
    height: 200px
  }
}

@media (min-height: 400px) {
  .navbar-links {
    height: 250px
  }
}
@media (min-height: 600px) {
  .navbar-links {
    height: 660px
  }
}
/* no scrollbar */
::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari */
}

/* -------------------------------------------------------------------------------------------------------- */

/* title bar of the browser immersive mode */
.titleBar {
  position: fixed;
  left: env(titlebar-area-x, 0);
  top: env(titlebar-area-y, 0);
  width: env(titlebar-area-width, 100%);
  height: env(titlebar-area-height, 40px);
  -webkit-app-region: drag;
}


/* clock responsive media */
@media screen and (max-width: 550px) {
  #clock {
    font-size: 7rem;
  }
}


/* ------------------------------------------------------------------------------------------------------------ */
/* Watermark styles */
.my-watermark {
  padding-top: 1.5rem;
  text-align: center;
  font-size: 0.875rem; /* Equivalent to Tailwind's text-sm */
  color: #727272; /* Tailwind's gray-500 */
}

.my-watermark a {
  background-color: #ffffff;
  padding: 0.25rem 0.5rem;
  border-radius: 0.75rem; /* Equivalent to rounded-xl */
  margin: 0 0.25rem;
  text-decoration: none;
  transition: all 0.3s ease;
  color: inherit;
}

.my-watermark a:hover {
  text-decoration: none;
  background-color: #d4d4d4; /* Light hover effect */
}
/* ------------------------------------------------------------------------------------------------------------- */
/* our other app links */
.other-apps {
  font-size: 0.875rem; 
  color: #9e9e9e;/* Tailwind's text-sm */
  text-align: center;
  padding-top: 1.5rem; /* Tailwind's pt-6 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem; /* Tailwind's gap-2 */

  /* Responsive layout */
  flex-wrap: wrap;
}

@media (min-width: 640px) {
  .other-apps {
    flex-direction: row;
    justify-content: center;
    gap: 1.5rem; /* Tailwind's gap-6 */
  }
}

.app-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
}

.app-link:hover {
  transform: scale(1.05);
}

.icon {
  height: 1.25rem; /* Tailwind's h-5 */
}