@font-face{

    font-family:'SutonnyMJ';

    src:url('../fonts/SutonnyMJ.ttf');
}

@font-face{

    font-family:'NikoshBAN';

    src:url('../fonts/NikoshBAN.ttf');
}

@font-face{

    font-family:'SolaimanLipi';

    src:url('../fonts/SolaimanLipi.ttf');
}

/*
|--------------------------------------------------------------------------
| BODY
|--------------------------------------------------------------------------
*/

body{

    background:#021B2D;

    margin:0;

    padding:0;
}

/*
|--------------------------------------------------------------------------
| MAIN WRAPPER
|--------------------------------------------------------------------------
*/

.maxemy-wrapper{

    width:95%;

    max-width:1600px;

    margin:40px auto;

    background:#03253B;

    border-radius:30px;

    padding:40px;

    box-sizing:border-box;
}

/*
|--------------------------------------------------------------------------
| TITLE
|--------------------------------------------------------------------------
*/

.maxemy-title{

    color:#009CEF;

    font-size:72px;

    font-weight:800;

    margin-bottom:40px;

    line-height:1.1;
}

/*
|--------------------------------------------------------------------------
| SELECT
|--------------------------------------------------------------------------
*/

#converter_type{

    width:100%;

    height:80px;

    border:none;

    border-radius:20px;

    padding:0 25px;

    font-size:34px;

    margin-bottom:40px;

    box-sizing:border-box;
}

/*
|--------------------------------------------------------------------------
| GRID
|--------------------------------------------------------------------------
*/

.maxemy-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:35px;
}

/*
|--------------------------------------------------------------------------
| TEXTAREA
|--------------------------------------------------------------------------
*/

.maxemy-grid textarea{

    width:100%;

    height:420px;

    background:#082D46;

    border:3px solid #00A2FF;

    border-radius:25px;

    color:#ffffff;

    padding:30px;

    resize:none;

    outline:none;

    box-sizing:border-box;

    font-size:30px;

    line-height:1.9;

    overflow:auto;
}

/*
|--------------------------------------------------------------------------
| INPUT
|--------------------------------------------------------------------------
*/

#input_text{

    font-family:
    'SutonnyMJ',
    sans-serif;
}

/*
|--------------------------------------------------------------------------
| OUTPUT
|--------------------------------------------------------------------------
*/

#output_text{

    font-family:
    'NikoshBAN',
    'SolaimanLipi',
    sans-serif;
}

/*
|--------------------------------------------------------------------------
| BUTTON AREA
|--------------------------------------------------------------------------
*/

.maxemy-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-top:35px;
}

/*
|--------------------------------------------------------------------------
| BUTTON
|--------------------------------------------------------------------------
*/

.maxemy-buttons button,
.upload-btn{

    min-width:200px;

    height:70px;

    border:none;

    border-radius:18px;

    background:#009CEF;

    color:#ffffff;

    font-size:26px;

    font-weight:700;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.3s;
}

.maxemy-buttons button:hover,
.upload-btn:hover{

    transform:translateY(-3px);

    background:#14AAFF;
}

/*
|--------------------------------------------------------------------------
| UPLOAD
|--------------------------------------------------------------------------
*/

.upload-btn{

    position:relative;

    overflow:hidden;
}

.upload-btn input{

    position:absolute;

    inset:0;

    opacity:0;

    cursor:pointer;
}

/*
|--------------------------------------------------------------------------
| DROP ZONE
|--------------------------------------------------------------------------
*/

.drop-zone{

    width:100%;

    height:140px;

    border:3px dashed #009CEF;

    border-radius:25px;

    margin-top:35px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#ffffff;

    font-size:30px;

    transition:.3s;

    cursor:pointer;
}

/*
|--------------------------------------------------------------------------
| COUNTER
|--------------------------------------------------------------------------
*/

.counter{

    margin-top:25px;

    display:flex;

    gap:30px;

    color:#ffffff;

    font-size:24px;
}

/*
|--------------------------------------------------------------------------
| SCROLLBAR
|--------------------------------------------------------------------------
*/

textarea::-webkit-scrollbar{

    width:10px;
}

textarea::-webkit-scrollbar-thumb{

    background:#009CEF;

    border-radius:20px;
}

/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media(max-width:991px){

    .maxemy-grid{

        grid-template-columns:1fr;
    }

    .maxemy-title{

        font-size:50px;
    }

    .maxemy-grid textarea{

        height:320px;

        font-size:24px;
    }

    #converter_type{

        font-size:24px;
    }

    .maxemy-buttons button,
    .upload-btn{

        width:100%;
    }
}