@import url("/css/fonts.css");
@import url("/css/fontiran.css");

:root {
    --pink: #f50057;
    --animation-curve: cubic-bezier(0.12, 0.7, 0.74, 0.71);
    --black: #1d1614;
}

* {
    box-sizing: border-box;
}
body{
    font-size: 0.8rem;
}
/******elements******/
.btn.join {

    background: #000000;
    border: 1px solid #DDD9CE;
    backdrop-filter: blur(12.5px);
    /* Note: backdrop-filter has minimal browser support */
    line-height: 20px;
    border-radius: 14px;
    font-family: "Doran FaNum";
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    /*line-height: 40px;*/
    /* identical to box height */

    text-align: justify;
    letter-spacing: 0.02em;

    color: #FF3333;
}

/****welcome*******/
.welcome {
    background-image: url("/images/back.png");
    background-repeat: no-repeat;

}

.welcome section {
    align-items: stretch;
    justify-content: space-between;
    align-content: space-between;
    height: 100%;
}

.welcome .side {
    width: 6vw;

    border: 1px solid #DDD9CE;
    backdrop-filter: blur(25px);
    /* Note: backdrop-filter has minimal browser support */

    border-radius: 0px 0px 0px 25px;
}

.welcome .body {
    width: 100%;
    /*height: 700px;*/
    /*border: 1px solid #DDD9CE;*/
    display: grid;
    position: relative;

    align-items: center;
    background-image: url("/images/back2.png");
    background-size: cover;
    background-repeat: no-repeat;
    justify-items: center;
    align-content: space-between;
}

.welcome .footer {
    border-radius: 0 0 25px 0;
    /*height: 700px;*/
    border: 1px solid #DDD9CE;
    display: grid;
    grid-template-columns: 40% 60%;
    justify-items: center;
    align-items: center;
    border-top: 0px
}

.welcome .footer .first {
    color: #FFC700;
    height: 100%;

    display: flex;
    align-items: center;

    text-align: center;
    width: 100%;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 40px;
    /* identical to box height */

    letter-spacing: 0.02em;

    font-family: "Doran FaNum";
    justify-content: flex-start;
}


.welcome .footer .third {
    color: #D8DBE0;
    height: 100%;
    display: flex;
    align-items: center;
    border-left: 1px solid #DDD9CE;
    justify-content: space-between;
    text-align: center;
    width: 100%;
    padding: 0 3rem;
    font-size: 1.3rem;
}

.welcome .right-side {
    width: 100%;

    display: grid;
    grid-template-rows: 93% 7%;
    /*border-radius: 0 0 25px 0;*/
    /*align-items: center;*/
    /*background-image: url("/images/back2.png");*/
    /*background-size: cover;*/
    /*background-repeat: no-repeat;*/
    /*justify-items: center;*/
    /*justify-content: center;*/
    /*align-content: center;*/
}

.welcome .content {
    background: rgba(217, 217, 217, 0.1);
    box-shadow: inset 4px 0px 10px rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12.5px);
    /* Note: backdrop-filter has minimal browser support */
    width: 100%;
    border-radius: 8px;
    font-family: 'Iransans';
    text-align: right;
    font-weight: 200;
    color: #FFFFFF;
    mix-blend-mode: normal;
    font-size: 0.8rem;
    align-items: center;
    line-height: 32px;
    display: flex;
    align-content: space-between;
    justify-content: space-between;
}
form{
    z-index: 999;
}
.welcome .body .title {
    bottom: 17%;
    right: 0;
    margin: auto;
    left: 0;
    font-family: 'Doran';
    font-style: normal;
    font-weight: 400;
    font-size: 2rem;
    line-height: 33px;
    text-align: justify;

    color: #D8DBE0;
    display: block;
}
.welcome .body .back-2 {
    display: none;
}
.mobile-footer{
    display: none;
}
@media screen and (max-width: 480px) {
    .welcome .side {
        display: none;
    }

    .welcome .footer {
        display: none;
    }

    .welcome .back-3 {
        display: none;
    }

    .welcome .body {
        width: 100%;
        /*border: 1px solid #DDD9CE;*/
        display: grid;
        position: relative;
        align-content: space-between;
        align-items: center;
        background-image: unset;
        background-size: contain;
    }
    .welcome .body :nth-child(1){
        z-index: 999;
    }

    .welcome .body .back-2 {
        border: 1px solid #DDD9CE;
        display: block;
        border-radius: 25px 0px 0px 0px;
    }

    .welcome .body .title {
        bottom: -20%;
        right: 0;
        margin: auto;
        position: absolute;
        width: 78%;
        left: 0;
        height: 134px;
        font-size: 0.9rem;
    }

    .welcome .body .content {
        border-radius: 0px;
        height: 50vh;
    }
    .welcome .stamp{
        display: none;
    }
    .mobile-footer{
        display:  flex;
        justify-content: space-between;
        align-items: center;
        font-family: 'Doran';
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 27px;
        /* identical to box height */

        text-align: justify;

        color: #D8DBE0;
    }
    .mobile-footer .genre{
        border: 1px solid #DDD9CE;
        padding: 0.6rem 1rem;
        width: 100%;
        padding: 0.79rem;
        display: flex;
        justify-content: space-between;
        font-family: 'Doran';
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 27px;
        /* identical to box height */

        text-align: justify;

        color: #D8DBE0;
        border-right: 0px;
    }
    .mobile-footer .buy{

        background: rgba(221, 217, 206, 0.1);
        border-left: 1px solid #DDD9CE;
        backdrop-filter: blur(12.5px);
        /* Note: backdrop-filter has minimal browser support */
        font-family: 'Doran';
        font-style: normal;
        font-weight: 700;
        font-size: 20px;
        line-height: 33px;
        text-align: justify;
        letter-spacing: 0.02em;
        border-radius:0px 0px 25px 0px ;
        border: 1px solid #DDD9CE;
        color: #FFC700;
        padding: 0.6rem;

    }
}