/*
Theme Name: Heirs Technology
Theme URI: http://localhost/heirs
Description: A custom theme for my WordPress site.
Version: 1.0
Author: Olipx
*/


.mulish-100 {
	font-family: "Mulish", sans-serif;
	font-optical-sizing: auto;
	font-weight: 100;
	font-style: normal;
}
.mulish-200 {
	font-family: "Mulish", sans-serif;
	font-optical-sizing: auto;
	font-weight: 200;
	font-style: normal;
}
.mulish-300 {
	font-family: "Mulish", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
}
.mulish-300-italic {
	font-family: "Mulish", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: italic;
}
.mulish-400 {
	font-family: "Mulish", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}
.mulish-500 {
	font-family: "Mulish", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
}
.mulish-600 {
	font-family: "Mulish", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
}
.mulish-700 {
	font-family: "Mulish", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
}
.mulish-800 {
	font-family: "Mulish", sans-serif;
	font-optical-sizing: auto;
	font-weight: 800;
	font-style: normal;
}
.mulish-900 {
	font-family: "Mulish", sans-serif;
	font-optical-sizing: auto;
	font-weight: 900;
	font-style: normal;
}
.mulish-1000 {
	font-family: "Mulish", sans-serif;
	font-optical-sizing: auto;
	font-weight: 1000;
	font-style: normal;
}



@keyframes scaling {
  from {
    opacity: 0;
    scale: 0.5;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes translating {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

@keyframes cliping {
  from {
    opacity: 0;
    clip-path: inset(100% 100% 0 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

.scale {
  animation: scaling linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}

.translating {
  animation: scaling linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}

.cliping {
  animation: scaling linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}