/*-------------------------*/
/*         typography      */
/*-------------------------*/
@font-face {
    font-family: 'yekan-reg';
    src: url("../fonts/YekanBakhFaNum-Regular.woff2");
}


.Toastify__toast-body {
    font-family: yekan-reg;
}


.yekan-regular {
    font-family: yekan-reg !important;
}


@page {
    size: A4 ;
    margin: 10mm;

}

/* Print background graphics */
@media print {
    body {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}


/*-------------------------*/
/*         general         */
/*-------------------------*/

.columns {
    margin: 0;
}

body {
    margin: 0;
}

.w100 {
    width: 100%;
}


.main-cantainer {
    width: 100%;
    min-height: 100vh;
}


.clrone {
    background-color: #4FE8E3 !important;
}

.clrtwo {
    background-color: #1B95A2;
}

.clrtwotext {
    color: #1B95A2;
}

.clrthree {
    background-color: #737375;
}

.clrfour {
    background-color: #E1C886;
}

.clrfourtext {
    color: #E1C886;
}

.clrfive {
    background-color: #AB9D7C;
}

.clrsixtext {
    color: #FF4941;
}

.clrseventext {
    color: #FFFFff;
}

.clreight {
    background-color: #f2f1ec;
}


/*-------------------------*/
/*         animations      */
/*-------------------------*/
.underline {
    &::after {
        content: "";
        border-bottom: solid 0.1618rem #1B95A2;

        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.4s;
    }

    &:hover {
        &::after {
            transform-origin: center;
            transform: scaleX(1);
        }
    }

    @keyframes underline {
        from {
            transform: scaleX(0);
        }
        to {
            transform: scaleX(1);
        }
    }
}


@keyframes blink {
    0% {
        color: black;
    }
    50% {
        color: hsl(123.04deg 46.2% 33.53%);
    }
    100% {
        color: black;
    }
}


/*-------------------------*/
/*   margins and padding   */
/*-------------------------*/

.margins {
    padding-right: 10rem;
    padding-left: 10rem;
}


/*-------------------------*/
/*  shadows   */
/*-------------------------*/
.shadowone {
    box-shadow: 0.3rem 0.3rem 0.6rem 0px rgba(0, 0, 0, 0.5) !important;

}

.shadowtwo {
    box-shadow: 0.3rem 0.3rem 0.6rem 0px rgba(255, 255, 255, 0.5) !important;

}


/*-------------------------*/
/*  login   */
/*-------------------------*/

.main-login {
    width: 400px;
    height: 500px;
    overflow: hidden;
    z-index: 10;

    box-shadow: 0px 0px 20px 1px rgba(14, 14, 14, 0.6);
    border-radius: 1.3rem;
}

.main-login #chk {
    display: none;
}


.main-login .signup {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    top: -30px;
    justify-content: center;
    align-items: center;
}

.main-login .signup h2 {
    color: #ffffff;
    font-size: 1.3em;
    font-weight: bold;
    text-align: center;
}

.main-login label {
    color: white;
    margin: 60px;
    display: flex;
    justify-content: center;
    font-weight: bold;
    cursor: pointer;
    font-size: 2.3em;
    transition: 0.5s ease-in-out;
}

.main-login input {
    width: 60%;
    height: 40px;
    background-color: #ffffff;
    display: flex;
    margin: 20px auto;
    padding: 20px 15px;
    justify-content: center;
    border: none;
    outline: none;
    border-radius: 5px;
    font-size: 1rem;
    font-family: yekan-reg;
}

.main-login button {
    width: 60%;
    height: 40px;
    margin: 10px auto;
    justify-content: center;
    display: block;
    background-color: #E1C886;
    margin-top: 20px;
    font-size: 1em;
    font-weight: bold;
    outline: none;
    border: none;
    border-radius: 5px;
    transition: 0.2s ease-in;
    cursor: pointer;
    font-family: 'yekan-reg';
    color: white;
}

.main-login button:hover {
    background-color: #e3bc5e;
}

.main-login .login {
    height: 460px;
    background-color: #1B95A2;

    border-radius: 60% / 10%;
    transform: translateY(-180px);
    transition: .6s ease-in-out;
}

.main-login .login label {
    color: #f9f9fa;
    transform: scale(.7);
    font-family: 'yekan-reg';
    font-weight: bold;
    font-size: 4em;
}

.main-login #chk:checked ~ .login {
    transform: translateY(-500px);
}

.main-login #chk:checked ~ .login label {
    transform: scale(1);
}

.main-login #chk:checked ~ .signup label {
    transform: scale(.6);
}


/*-------------------------*/
/*  spinner                */
/*-------------------------*/


.loader {
    content: "";

    width: 0.9rem !important;

    height: 0.9rem !important;
    border-radius: 50%;
    background: #E1C886;
    position: relative;
}

.loader:before,
.loader:after {
    content: "";
    position: absolute;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    inset: 0;
    background: #36B786;
    transform: rotate(0deg) translate(1.3rem);
    animation: rotate 1.5s ease infinite;
}

.loader:after {
    animation-delay: 0.5s
}

@keyframes rotate {
    100% {
        transform: rotate(360deg) translate(1.3rem)
    }
}


/*-------------------------*/
/*        responsive       */
/*-------------------------*/

/*mobile*/
@media screen and (max-width: 430px) {
    .margins {
        padding-right: 3rem;
        padding-left: 3rem;
    }

}

/*tablets*/
@media screen and (min-width: 431px) and (max-width: 1025px) {
    .margins {
        padding-right: 3rem;
        padding-left: 3rem;
    }

}


/*not found*/
.big {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    position: relative;
    height: 100dvh;
    width: 100dvw;
    background-color: #14161A;
}

.boxd {

    width: 20px;
    height: 20px;

    margin: 0;
    padding: 0;
    flex-grow: 1;
}

.boxd:hover {
    animation: shade 0.5s forwards;
}

.boxd:not(hover) {
    animation: shadeout 0.5s forwards;
}

@keyframes shade {
    from {
        background-color: #14161A;
    }
    to {
        background-color: #1B95A2;
    }
}

@keyframes shadeout {
    from {
        background-color: #1B95A2;
    }
    to {
        background-color: #14161A;
    }
}

.out-line {
    outline: 0.5px solid #00FF00;
}