*{
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	font-family: "myFont7", Tahoma, Arial, sans-serif;
}

body {
	background: #e7e3c8;
	color: #111;
}

/* -----------------------------------
   3D BACKGROUND
----------------------------------- */
#world {
    position: relative;
    width: 100%;
    height: 200px; /* یا هر ارتفاعی که می‌خواهید */
    overflow: hidden;
}

#world canvas {
    display: block;
    width: 100%;
    height: 100%;
}
/* -----------------------------------
   INTRO
----------------------------------- */
.intro {
	position: absolute;

	top: 55px;
	left: 50%;

	transform: translateX(-50%);

	text-align: center;

	z-index: 5;

	pointer-events: none;
}

.intro-title {
	font-size: 4rem;
	font-weight: normal;

	margin-bottom: 15px;
}

.intro-subtitle {
	font-size: 1.6rem;
	opacity: .8;
}

/* -----------------------------------
   DIVIDER
----------------------------------- */
.divider {
	position: fixed;
	left: 10%;
	right: 10%;
	bottom: 6.5rem;
	height: 1px;
	background: rgba(0,0,0,.7);
	z-index: 3;
}
/* -----------------------------------
   FOOTER
----------------------------------- */

.footer {
	position: fixed;
	right: 10%;
	bottom: 80px;
	z-index: 5;
	font-size: 2rem;
}

/* -----------------------------------
   MOBILE
----------------------------------- */

@media(max-width:700px) {

	.intro-title {
		font-size: 34px;
	}

	.intro-subtitle {
		font-size: 15px;
	}

	.divider {
		left: 5%;
		right: 5%;
	}

	.footer {
		right: 7%;
	}

}


/* -----------------------------------
   font
----------------------------------- */
@font-face {
	font-family: 'myFont7';
	src: url('/public/fonts/Mj_Sayeh-2_0.TTF') format('truetype');
	font-weight: normal;
}