*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
@font-face {
    font-family: normal;
    src: url(../Graphik\ Arabic\ Medium.ttf);
}
@font-face {
    font-family: iran;
    src: url(../IRANSansWeb.ttf);
}
body{
    background-image: url(https://cdn-www.bluestacks.com/bs-images/Frame1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 100vh;
    animation: myAnim1 1s linear 0s 1 normal forwards;
}
.matn h2{
    display: inline-block;
}
.logo{
    float: left;
    margin-top: 0px;
    margin-left: 50px;
    color: white;
    width: 100px;
    height: 100px;
}
.logo img{
    width: 100%;
}
.txt{
    float: left;
    direction: ltr;
    margin-top: 240px;
    width: fit-content;
    margin-left: 20px;
}
.es , .st{
    font-size: 100px;
    font-family: normal;
    padding-bottom: 20px;
    font-family: game;
}
.es{
    color: white;
}
.st{
    color: blue;
    margin-right: 10px;
}
.txt p{
    font-family: gamee;
    color: white;
    width: 70%;
    padding: 0;
}
.ins , .yt{
    width: 50px;
    height: 50px;
    border: 2px solid white;
    border-radius: 50%;
    display: inline-block;
}
.ins{
}
.socialmedia{
    float: left;
    margin-top: 600px;
    margin-left: -1181px;
}
.ins{
    margin-right: 10px;
}
.yt img{
    width: 60%;
    margin-top: 9px;
}
.ins img {
    width: 55%;
    margin-top: 10.5px;
    margin-left: 0px;
} 

.yt:hover{
    border: 2px solid red;
    transition: 0.5s;
}
.ins:hover{
    border: 2px solid blue;
    transition: 0.5s;
}
.ia{
    float: right;
    margin-top: 0px;
    animation: myAnim 19s ease 0s infinite normal forwards;
}
@keyframes myAnim {
	0%,
	100% {
		transform: translateY(0);
	}

	10%,
	30%,
	50%,
	70% {
		transform: translateY(-8px);
	}

	20%,
	40%,
	60% {
		transform: translateY(8px);
	}

	80% {
		transform: translateY(6.4px);
	}

	90% {
		transform: translateY(-6.4px);
	}
}
@keyframes myAnim1 {
	0% {
		animation-timing-function: ease-in;
		opacity: 1;
		transform: translateX(-48px);
	}

	24% {
		opacity: 1;
	}

	40% {
		animation-timing-function: ease-in;
		transform: translateX(-26px);
	}

	65% {
		animation-timing-function: ease-in;
		transform: translateX(-13px);
	}

	82% {
		animation-timing-function: ease-in;
		transform: translateX(-6.5px);
	}

	93% {
		animation-timing-function: ease-in;
		transform: translateX(-4px);
	}

	25%,
	55%,
	75%,
	87%,
	98% {
		animation-timing-function: ease-out;
		transform: translateX(0px);
	}

	100% {
		animation-timing-function: ease-out;
		opacity: 1;
		transform: translateX(0px);
	}
}
@font-face {
    font-family: game;
    src: url(../TechnoRaceItalic-eZRWe.otf);
}
@font-face {
    font-family: gamee;
    src: url(Blomberg-8MKKZ.otf);
}
@media (max-width: 777px) {
    .matn{
        margin-top: 0;
    }
    .es{
        font-size: 70px;
    }
    .st{
        font-size: 70px;
    }
    .ia{
        margin-top: 100px;
        margin-left: 0;
        margin-right: 0;
        width: 90%;
    }
    .txt{
        margin-top: 10px;
    }
    .body{
        background-position: center center;
        background-size: auto;
    }
    .socialmedia{
        margin-top: 30px;
        margin-left: 25px;
    }
    .logo img{
        margin-top: -10px;
        margin-left: -10px;
        width: 70px;
        height: 80px;
    }
}