*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: all linear .3s;
}

a{
    text-decoration: none;
}

@font-face {
    font-family: font2;
    src: url(./assets/LilitaOne-Regular.ttf);
}

::-webkit-scrollbar
{
  width: 0px;
  height: 80%;
	background-color: transparent;
}
::-webkit-scrollbar-track
{
  background:rgb(24, 24, 24);
}
p::-webkit-scrollbar-track
{
  background:transparent;
}
::-webkit-scrollbar-thumb
{
  background-color:#2a2a2a;
  width: 3px;
	border-radius: 20px;
}
::-webkit-scrollbar:hover ::-webkit-scrollbar-thumb{
  width: 3px;
}


#hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .4;
}
.hero_section
{
    flex-direction: row;
}
.hero_right_el
{
    flex-direction: column;
}
.hero_title
{
    font-size: 64px;
    text-align: left;
}
@media screen and (max-width:900px) {
    .hero_section
    {
        flex-direction: column;
    }
    .hero_right_el{
        flex-direction: row;
    }
    .hero_title
    {
        font-size: 45px;
    }
}
@media screen and (max-width:500px) {
    .hero_title
    {
        font-size: 35px;
        text-align: center;
    }
}


.slider_anime
{
    animation:slide;
    animation-duration: 20s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes slide
{
    0%{
        transform: translateX(0%);
    }
    100%
    {
        transform: translateX(calc(-100% + 100vw));
    }
}

.tool1 {
  position: fixed;
  top: 0px;
  left: 50%;
  width: 40px;
  height: 40px;
  background: url('./assets/house.png') no-repeat center/contain;
  animation: fall 25s linear infinite;
  z-index: 9999;
  pointer-events: none;
}

.tool2 {
  position: fixed;
  top: 0px;
  right: 30px;
  width: 20px;
  height: 20px;
  background: url('./assets/tool.png') no-repeat center/contain;
  animation: fall 12s linear infinite;
  z-index: 9999;
  pointer-events: none;
  animation-delay: 2s;
}

.tool3 {
  position: fixed;
  top: 0px;
  left: 30px;
  width: 30px;
  height: 30px;
  background: url('./assets/cat.png') no-repeat center/contain;
  animation: fall 15s linear infinite;
  z-index: 9999;
  pointer-events: none;
  animation-delay: 1s
}

@keyframes fall {
  0% { transform: translateY(0px) scale(1.8) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(100vh) scale(.8) rotate(180deg); opacity: 0; }
}