@import "reset.css";

@font-face {
    font-family: vazirNormal;
    src: url('../fonts/vazir.eot');
    src: url('../fonts/vazir.ttf') format('embedded-opentype'), url('../fonts/vazir.woff2') format('woff2'), url('../fonts/vazir.woff') format('woff'), url('../fonts/vazir.ttf') format('truetype');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: vazirBold;
    src: url('../fonts/vazir-bold.eot');
    src: url('../fonts/vazir-bold.ttf') format('embedded-opentype'), url('../fonts/vazir-bold.woff2') format('woff2'), url('../fonts/vazir-bold.woff') format('woff'), url('../fonts/vazir-bold.ttf') format('truetype');
    font-weight: normal;
    font-display: swap;
}

body {
    font-family: vazirNormal;
    direction: rtl;
    overflow: hidden;
}

.page-bisector {
    width: 100%;
    height: 5px;
    transform: rotate(90deg);
}

.navbar-brand img {
    height: 75px;
}

.item img {
    width: 120px;
    transform: rotate(270deg);
}

.item img:hover {
    cursor: no-drop;
}

.item-left img {
    transform: rotate(90deg);
}

.item-left img:hover {
    cursor: pointer;
}

.item-left {
    margin-top: -500px;
    float: left;
}

.item-select-right img {
    position: absolute;
    width: 210px;
    left: 500px;
    top: 300px;
}

.item-select-left img {
    position: absolute;
    width: 210px;
    right: 500px;
    top: 300px;
}

.the-counter {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.the-counter span {
    margin-left: 50px;
}