/* GENERAL CODES
=================*/

@font-face {
    font-family: 'Neo';
    src: url('../fonts/Neo.ttf') format('truetype');
}
@font-face {
    font-family: 'Air';
    src: url('../fonts/Air.ttf') format('truetype');
}
@font-face {
    font-family: 'naskh';
    src: url('../fonts/naskh.ttf') format('truetype');
}
html{
    width: 100%;
    height: 100%;
    font-size: 1.85vw;
    direction: rtl;
    background: linear-gradient(to top, rgb(20,15,75),rgb(140,200,220)) fixed;
}
*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    color: rgb(200,210,220);
    margin: 0;
    padding: 0;
    transition: 0.1s
}
:focus::-webkit-input-placeholder{
    opacity: 0;
    -webkit-transition: Oopacity .4s ease-in-out;
    -moz-transition: Oopacity .4s ease-in-out;
    -o-transition: Oopacity .4s ease-in-out;
    transition: Oopacity .4s ease-in-out;
}
:focus::-moz-input-placeholder{
    opacity: 0;
    -webkit-transition: Oopacity .4s ease-in-out;
    -moz-transition: Oopacity .4s ease-in-out;
    -o-transition: Oopacity .4s ease-in-out;
    transition: Oopacity .4s ease-in-out;
}

/* === ROTAITING ELEMENTS === */

.rotateimg180 {
    -webkit-transform:rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    transition: 1s;
}
.rotateimg45 {
    -webkit-transform:rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    transition: 1s;
}

/* === HORIZONTAL MOVING === */

.horizontal-move {
     height: 50px;	
     overflow: hidden;
     position: relative;
}

/* Move it (define the animation) */
@-moz-keyframes horizontal-move {
    0%   { -moz-transform: translateX(-100%); }
    100% { -moz-transform: translateX(100%); }
}
@-webkit-keyframes horizontal-move {
    0%   { -webkit-transform: translateX(-100%); }
    100% { -webkit-transform: translateX(100%); }
}
@keyframes horizontal-move {
    0%   { 
        -moz-transform: translateX(-35%); /* Firefox bug fix */
        -webkit-transform: translateX(-35%); /* Firefox bug fix */
        transform: translateX(-35%); 		
 }
    100% {
        -moz-transform: translateX(100%); /* Firefox bug fix */
        -webkit-transform: translateX(100%); /* Firefox bug fix */
        transform: translateX(100%); 
    }
  }
.horizontal-move .move h6:hover {
    -moz-animation-play-state: paused;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
 }

/* === FONT SIZES === */

h1, h2, h3, h4, h5, h6{font-family: 'Neo'}
h1{font-size: 1.35rem}
h2{font-size: 1.25rem}
h3{font-size: 1.15rem}
h4{font-size: 1.10rem}
h5{font-size: 1.05rem}
h6{font-size: 1.025rem}

p, a, ol li, ul li{font-family: 'naskh'}
p{text-align: justify}
a{text-decoration: none}

/* === SCROLLBAR PROPERTIES === */
/*
::-webkit-scrollbar              { color: lightyellow }
::-webkit-scrollbar-button{
    background: orange;
}
::-webkit-scrollbar-track        { background: red }
::-webkit-scrollbar-track-piece  { background: lightyellow }
::-webkit-scrollbar-thumb{
    background: rgba(30,25,20,0.5);
}
::-webkit-scrollbar-corner       { background: black }
::-webkit-resizer                { background: black }
*/

::-webkit-scrollbar {
    width: 15px;
    background: gray;
    cursor: pointer;
}
 
::-webkit-scrollbar-button{
    background: rgba(0,0,0,0);
}

::-webkit-scrollbar-corner       { background: black }

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,1); 
    background: rgba(0,40,60,0)
}
 
::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,1);
    background: black
}