defaults.css

@import url('https://fonts.googleapis.com/css2?family=Iceberg&family=Iceland&family=Oxanium:wght@200;300;400;500;600;700;800&family=Sirin+Stencil&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/* This file contains all the default css I uses in my web projects */

/* webkit */
.no-scrollbar::-webkit-scrollbar {
  width: 5px;
}

.no-scrollbar::-webkit-scrollbar-thumb {
  width: 5px;
}

/* fonts */
.en-iceberg{
    font-family: 'Iceberg', sans-serif;
}

.en-iceland{
    font-family: 'Iceland', sans-serif;
}

.en-Oxanium{
    font-family: 'Oxanium', sans-serif;
}

.en-sirin{
    font-family: 'Sirin Stencil', sans-serif;
}

.en-mulearn{
  font-family: 'Exo 2', sans-serif; 
  font-style: italic;
}

.openweb :nth-child(1){
  color: red;
}

.openweb :nth-child(2){
  color: green;
}


/* icons */
.infoIcon{
  background: url(https://raw.githubusercontent.com/christo-zero-john/defaults/main/info.png);
  background-size: cover;
  background-position: center;
  min-width: 30px;
  min-height: 30px;
}

/* widths */
.wd-100{
    width: 100vw;
  }
  
  .wd-75{
    width: 75vw;
  }
  
  .wd-50{
    width: 50vw;
  }
  
  .wd-25{
    width: 25vw;
  }
  
  .wd-10{
    width: 10vw;
  }
  
  
  .wd-20{
    width:20vw;
  }
  
  .wd-30{
    width: 30vw;
  }
  
  .wd-40{
    width: 40vw;
  }
  
  .wd-50{
    width: 50vw;
  }
  
  .wd-60{
    width: 60vw;
  }
  
  .wd-70{
    width: 70vw;
  }
  
  .wd-80{
    width: 80vw;
  }
  
  .wd-90{
    width: 90vw;
  }
  
  .w-fit{
    width: fit-content !important;
  }


/* min-width */
.mwd-100{
  min-width: 100vw;
}

.mwd-75{
  min-width: 75vw;
}

.mwd-50{
  min-width: 50vw;
}

.mwd-25{
  min-width: 25vw;
}

.mwd-10{
  min-width: 10vw;
}


.mwd-20{
  min-width:20vw;
}

.mwd-30{
  min-width: 30vw;
}

.mwd-40{
  min-width: 40vw;
}

.mwd-50{
  min-width: 50vw;
}

.mwd-60{
  min-width: 60vw;
}

.mwd-70{
  min-width: 70vw;
}

.mwd-80{
  min-width: 80vw;
}

.mwd-90{
  min-width: 90vw;
}


.mw-fit{
  min-width: fit-content !important;
}


  /* heights */
  .hd-100{
    height: 100vh;
  }
  
  .hd-75{
    height: 75vh;
  }
  
  .hd-50{
    height: 50vh;
  }
  
  .hd-25{
    height: 25vh;
  }
  
  .hd-10{
    height: 10vh;
  }
  
  .hd-20{
    height:20vh;
  }
  
  .hd-30{
    height: 30vh;
  }
  
  .hd-40{
    height: 40vh;
  }
  
  .hd-50{
    height: 50vh;
  }
  
  .hd-60{
    height: 60vh;
  }
  
  .hd-70{
    height: 70vh;
  }
  
  .hd-80{
    height: 80vh;
  }
  
  .hd-90{
    height: 90vh;
  }
  
  .h-fit{
    height: fit-content;
  }
  


/* min-height */
.mhd-100{
  min-height: 100vh;
}

.mhd-75{
  min-height: 75vh;
}

.mhd-50{
  min-height: 50vh;
}

.mhd-25{
  min-height: 25vh;
}

.mhd-10{
  min-height: 10vh;
}

.mhd-20{
  min-height:20vh;
}

.mhd-30{
  min-height: 30vh;
}

.mhd-40{
  min-height: 40vh;
}

.mhd-50{
  min-height: 50vh;
}

.mhd-60{
  min-height: 60vh;
}

.mhd-70{
  min-height: 70vh;
}

.mhd-80{
  min-height: 80vh;
}

.mhd-90{
  min-height: 90vh;
}

.mh-fit{
  min-height: fit-content;
}

  
/* font-weights */
.fw-100{
    font-weight: 100 !important;
}
.fw-200{
    font-weight: 200 !important;
}
.fw-300{
    font-weight: 300 !important;
}
.fw-400{
    font-weight: 400 !important;
}
.fw-500{
    font-weight: 500 !important;
}
.fw-600{
    font-weight: 600 !important;
}
.fw-700{
    font-weight: 700 !important;
}
.fw-800{
    font-weight: 800 !important;
}
.fw-900{
    font-weight: 900 !important;
}
.fw-1000{
    font-weight: 1000 !important;
}




/* opacity */
.op-1{
  opacity: 1;
}

.op-09{
  opacity: 0.9;
}

.op-08{
  opacity: 0.8;
}

.op-07{
  opacity: 0.7;
}

.op-06{
  opacity: 0.6;
}

.op-05{
  opacity: 0.5;
}

.op-04{
  opacity: 0.4;
}

.op-03{
  opacity: 0.3;
}

.op-02{
  opacity: 0.2;
}

.op-01{
  opacity: 0.1;
}



/* letter spacing */
.ls-1{
  letter-spacing: 1;
}

.ls-09{
  letter-spacing: 0.9;
}

.ls-08{
  letter-spacing: 0.8;
}

.ls-07{
  letter-spacing: 0.7;
}

.ls-06{
  letter-spacing: 0.6;
}

.ls-05{
  letter-spacing: 0.5;
}

.ls-04{
  letter-spacing: 0.4;
}

.ls-03{
  letter-spacing: 0.3;
}

.ls-02{
  letter-spacing: 0.2;
}

.ls-01{
  letter-spacing: 0.1;
}


/* text colors */
.text-wheat{
  color: wheat;
}

.text-orange{
  color: orange;
}

.text-darkorange{
  color: darkorange;
}

.text-aqua{
  color: aqua;
}

.text-aquamarine{
  color: aquamarine;
}

.text-greenyellow{
  color: greenyellow;
}

.text-violet{
  color: #a047fa;
}


/* link colors */
.link-wheat{
  color: wheat;
}

.link-orange{
  color: orange;
}

.link-darkorange{
  color: darkorange;
}

.link-aqua{
  color: aqua;
}

.link-aquamarine{
  color: aquamarine;
}

.link-greenyellow{
  color: greenyellow;
}

.link-violet{
  color: #a047fa;
}

.link-wheat:hover{
  color: #f5deb3bd
}

.link-orange:hover{
  color: #ffa5003c;
}

.link-darkorange:hover{
  color: #ac6003aa;
}

.link-aqua:hover{
  color: #00ffffbd;
}

.link-aquamarine:hover{
  color: #7fffd4bd;
}

.link-greenyellow:hover{
  color: #adff2fbd;
}

.link-violet:hover{
  color: #a047fabd;
}


/* bg colors */
.bg-wheat{
  background-color: wheat;
}

.bg-orange{
  background-color: orange;
}

.bg-darkorange{
  background-color: darkorange;
}

.bg-aqua{
  background-color: aqua;
}

.bg-aquamarine{
  background-color: aquamarine;
}

.bg-greenyellow{
  background-color: greenyellow;
}

.bg-violet{
  background-color: #a047fa;
}

/* alert colors */
.alert-wheat{
  background-color: #f5deb350;
}

.alert-orange{
  background-color: #ffa50050;
}

.alert-darkorange{
  background-color: #ff8c0050;
}

.alert-aqua{
  background-color: #00ffff50;
}

.alert-aquamarine{
  background-color: #7fffd450;
}

.alert-greenyellow{
  background-color: #adff2f50;
}

.alert-violet{
  background-color: #a047fa50;
}

/* text shadow */
.ts-normal-black{
  text-shadow: 0 0 2px #000;
}
.ts-normal-white{
  text-shadow: 0 0 2px #fff;
}




/* stretch */
.stretchX-01{
  transform: scaleX(0.1rem);
}

/* hover scale */
.hover-scale-01:hover{
  scale: 0.1;
}
.hover-scale-02:hover{
  scale: 0.2;
}
.hover-scale-03:hover{
  scale: 0.3;
}
.hover-scale-04:hover{
  scale: 0.4;
}
.hover-scale-05:hover{
  scale: 0.5;
}
.hover-scale-06:hover{
  scale: 0.6;
}
.hover-scale-07:hover{
  scale: 0.7;
}
.hover-scale-08:hover{
  scale: 0.8;
}
.hover-scale-09:hover{
  scale: 0.9;
}
.hover-scale-11:hover{
  scale: 1.1;
}
.hover-scale-12:hover{
  scale: 1.2;
}
.hover-scale-13:hover{
  scale: 1.3;
}
.hover-scale-14:hover{
  scale: 1.4;
}
.hover-scale-15:hover{
  scale: 1.5;
}
.hover-scale-16:hover{
  scale: 1.6;
}
.hover-scale-17:hover{
  scale: 1.7;
}
.hover-scale-18:hover{
  scale: 1.8;
}
.hover-scale-19:hover{
  scale: 1.9;
}
.hover-scale-2:hover{
  scale: 2;
}


/* transitions all */
.transition-01{
  transition: all 0.1s;
}
.transition-02{
  transition: all 0.2s;
}
.transition-03{
  transition: all 0.3s;
}
.transition-04{
  transition: all 0.4s;
}
.transition-05{
  transition: all 0.5s;
}
.transition-06{
  transition: all 0.6s;
}
.transition-07{
  transition: all 0.7s;
}
.transition-08{
  transition: all 0.8s;
}
.transition-09{
  transition: all 0.9s;
}
.transition-1{
  transition: all 1s;
}
.transition-11{
  transition: all 1.1s;
}
.transition-12{
  transition: all 1.2s;
}
.transition-13{
  transition: all 1.3s;
}
.transition-14{
  transition: all 1.4s;
}
.transition-15{
  transition: all 1.5s;
}
.transition-16{
  transition: all 1.6s;
}
.transition-17{
  transition: all 1.7s;
}
.transition-18{
  transition: all 1.8s;
}
.transition-19{
  transition: all 1.9s;
}
.transition-2{
  transition: all 2s;
}