style.css

@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: Arial, sans-serif;
  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;
}

.toggleH1{
  display: none;
}

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

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);
}

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 {
  color: hsl(0, 0%, 100%);
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
  font-size: 12rem;
  z-index: -1;
}

.blinking {
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  from, to {
      visibility: visible;
  }
  50% {
      visibility: hidden;
  }
}


.fontInput{
  width: 150px;
  height: 30px;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  background-color: #ffffff00;
}

#colorInput{
  width: 150px;
  height: 30px;
  font-size: 1rem;
  cursor: pointer;
  background-color: #ffffff00;
}

#audio{
  width: 150px;
  height: 20px;
  font-size: 1rem;
}

#colorPicker {
  width: 150px;
  height: 30px;
  font-size: 1rem;
  cursor: pointer;
  background-color: #ffffff00;
}

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

/* bg cover image  */
#filePicker {
  color: #ffffff;
  position: absolute;
  width: 150px;
  height: 30px;
  font-size: 1rem;
  left: 19px;
  cursor: pointer;
  background-color: #3f3f3f83;
}

#file-upload-button{
  cursor: pointer;
  background-color: #ffffff00;
}

#resetButton{
  color: #cecece;
  position: absolute;
  width: 150px;
  height: 30px;
  font-size: 1rem;
  left: 19px;
  cursor: pointer;
  background-color: #3f3f3f83;
}
#bgImg{
  color: rgb(194, 194, 194);
  font-weight: 500;
  text-decoration: none;
  position: fixed;
  left: 14px;
  padding-bottom: 4.4rem;
  padding-top: .6rem;
  width: 10rem;
  height: 2.5rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  cursor: pointer;
  border-radius: 10px;
  background-color: #b7b7b723;

}

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

.linkAbout{
 color: rgb(194, 194, 194);
  font-weight: 800;
  text-decoration: none;
  position: fixed;
  left: 15px;
  padding-bottom: 2.2rem;
  padding-top: 1rem;
  width: 10rem;
  height: 0.1rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  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);
}

.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;
}

#settings-icon {
  cursor: pointer;
  transition: transform 0.3s ease;
}
.rotate {
  transform: rotate(120deg);
}

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


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

.toggle-button .bar{
  height: 1px;
  width: 100%;
  background-color: white;
  border-radius: 10px;
}

.navbar-links{
  padding: 1rem;
  display: none;
}

.navbar{
  display: flex;
  flex-direction: column;
}

.navbar-links.active{
  display: flex;
  margin:1.2em;
  width: 90px;
  height: 585px;
  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);
}


/* 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;
}


/* 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%);
}

/* clock responsive media */

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


 .titleName{
 color: rgb(255, 255, 255);
  font-weight: 500;
  text-decoration: none;
  position: fixed;
  left: 15px;
  padding-bottom: 4.4rem;
  padding-top: .6rem;
  width: 10rem;
  height: 0.4rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  cursor: pointer;
  border-radius: 10px;
  background-color: #b7b7b723;
}

.titleName:hover{
  color: rgb(255, 255, 255);
  background-color: hsla(0, 0%, 100%, 0.275);
}