:root {
--pink-color:#F73A83;
--gray-light:#393939;




  --white: #ffffff;
  --pink-light: #ffd5e5;
  --pink-light-trans: #ffd5e500;
  --peach: #ffedd4;
  --peach-trans: #ffedd400;
  --blue-light: #cbf0ff;
  --blue-light-trans: #cbf0ff00;
  --blue-dark: #5d5fd0;
  --pink-dark: #f44c8d;
  --orange: #fdaf40;
  --green-light: #84bd62;
  --blue-bright: #15b8f8;
  --lavender: #abadf4;
  --green-bright: #65c929;
  --pink-bright: #f73a83;
  --black-trans-1: #0000000d;
  --black-trans-2: #00000029;
  
  --gray-dark-2: #232323;
  --green-mid: #75c843;
  --gray-dark-3: #141414;
  --gray-mid: #595959;
  --gray-dark-4: #121212;
  --purple-bright: #ca64ff;
  --blue-bright-2: #00b7ff;
  
  
  --gray-dark-5: #393939;
  --blue-soft: #8284e8;
  
  --pink-trans: #f44c8d80;
  --orange-trans: #fdaf4080;
  --blue-trans: #15b8f880;
  --purple-trans: #de73eb80;
  --black: #000000;
  --gray-light-1: #d6d6d6;
  --cyan-bright: #00ccff;
  --blue-soft-2: #b5c5ff;
  --gray-dark-6: #707070;
  --silver: #c0c0c0;
  --gray-mid-2: #aeaeae;
  --black-trans-3: #0000002e;

}














.text-white {
  color: var(--white);
}

.text-pink-light {
  color: var(--pink-light);
}

.text-peach {
  color: var(--peach);
}

.text-blue-light {
  color: var(--blue-light);
}

.text-blue-dark {
  color: var(--blue-dark);
}

.text-pink-dark {
  color: var(--pink-dark);
}

.text-orange {
  color: var(--orange);
}

.text-green-light {
  color: var(--green-light);
}

.text-blue-bright {
  color: var(--blue-bright);
}

.text-lavender {
  color: var(--lavender);
}

.text-green-bright {
  color: var(--green-bright);
}

.text-pink-bright {
  color: var(--pink-bright);
}

.text-gray-dark-1 {
  color: var(--gray-dark-1);
}

.text-gray-dark-2 {
  color: var(--gray-dark-2);
}

.text-green-mid {
  color: var(--green-mid);
}

.text-gray-dark-3 {
  color: var(--gray-dark-3);
}

.text-gray-mid {
  color: var(--gray-mid);
}

.text-purple-bright {
  color: var(--purple-bright);
}

.text-blue-bright-2 {
  color: var(--blue-bright-2);
}

.text-pink-mid {
  color: var(--pink-mid);
}

.text-orange-bright {
  color: var(--orange-bright);
}

.text-gray-dark-5 {
  color: var(--gray-dark-5);
}

.text-blue-soft {
  color: var(--blue-soft);
}

.text-black {
  color: var(--black);
}

.text-gray-light-1 {
  color: var(--gray-light-1);
}

.text-cyan-bright {
  color: var(--cyan-bright);
}

.text-blue-soft-2 {
  color: var(--blue-soft-2);
}

.text-gray-dark-6 {
  color: var(--gray-dark-6);
}

.text-silver {
  color: var(--silver);
}

.text-gray-mid-2 {
  color: var(--gray-mid-2);
}

.white {
  background-color: var(--white);
}

.pink-light {
  background-color: var(--pink-light);
}

.pink-light-trans {
  background-color: var(--pink-light-trans);
}

.peach {
  background-color: var(--peach);
}

.peach-trans {
  background-color: var(--peach-trans);
}

.blue-light {
  background-color: var(--blue-light);
}

.blue-light-trans {
  background-color: var(--blue-light-trans);
}

.blue-dark {
  background-color: var(--blue-dark);
}

.pink-dark {
  background-color: var(--pink-dark);
}

.orange {
  background-color: var(--orange);
}

.green-light {
  background-color: var(--green-light);
}

.blue-bright {
  background-color: var(--blue-bright);
}

.lavender {
  background-color: var(--lavender);
}

.green-bright {
  background-color: var(--green-bright);
}

.pink-bright {
  background-color: var(--pink-bright);
}

.black-trans-1 {
  background-color: var(--black-trans-1);
}

.black-trans-2 {
  background-color: var(--black-trans-2);
}

.gray-dark-1 {
  background-color: var(--gray-dark-1);
}

.gray-dark-2 {
  background-color: var(--gray-dark-2);
}

.green-mid {
  background-color: var(--green-mid);
}

.gray-dark-3 {
  background-color: var(--gray-dark-3);
}

.gray-mid {
  background-color: var(--gray-mid);
}

.gray-dark-4 {
  background-color: var(--gray-dark-4);
}

.purple-bright {
  background-color: var(--purple-bright);
}

.blue-bright-2 {
  background-color: var(--blue-bright-2);
}

.pink-mid {
  background-color: var(--pink-mid);
}

.orange-bright {
  background-color: var(--orange-bright);
}

.gray-dark-5 {
  background-color: var(--gray-dark-5);
}

.blue-soft {
  background-color: var(--blue-soft);
}

.green-trans {
  background-color: var(--green-trans);
}

.pink-trans {
  background-color: var(--pink-trans);
}

.orange-trans {
  background-color: var(--orange-trans);
}

.blue-trans {
  background-color: var(--blue-trans);
}

.purple-trans {
  background-color: var(--purple-trans);
}

.black {
  background-color: var(--black);
}

.gray-light-1 {
  background-color: var(--gray-light-1);
}

.cyan-bright {
  background-color: var(--cyan-bright);
}

.blue-soft-2 {
  background-color: var(--blue-soft-2);
}

.gray-dark-6 {
  background-color: var(--gray-dark-6);
}

.silver {
  background-color: var(--silver);
}

.gray-mid-2 {
  background-color: var(--gray-mid-2);
}

.black-trans-3 {
  background-color: var(--black-trans-3);
}



@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Regular.woff2") format("woff2"),
    url("../fonts/Poppins-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Bold.woff2") format("woff2"),
    url("../font/Poppins-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Medium.woff2") format("woff2"),
    url("../fonts/Poppins-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Regular.woff2") format("woff2"),
    url("../fonts/Montserrat-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Medium.woff2") format("woff2"),
    url("../fonts/Montserrat-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Bold.woff2") format("woff2"),
    url("../fonts/Montserrat-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

 
@font-face {
  font-family: "Ink Free";
  src: url("../fonts/InkFree.woff2") format("woff2"),
    url("../fonts/InkFree.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'Fredoka';
  src: url('../fonts/Fredoka-Light.woff2') format('woff2'),
      url('../fonts/Fredoka-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fredoka';
  src: url('../fonts/Fredoka-SemiBold.woff2') format('woff2'),
      url('../fonts/Fredoka-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fredoka';
  src: url('../fonts/Fredoka-Medium.woff2') format('woff2'),
      url('../fonts/Fredoka-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fredoka';
  src: url('../fonts/Fredoka-Bold.woff2') format('woff2'),
      url('../fonts/Fredoka-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fredoka';
  src: url('../fonts/Fredoka-Regular.woff2') format('woff2'),
      url('../fonts/Fredoka-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}