*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style-type: none;
    text-decoration: none;
}

:root {
    --primary: #ec994b;
    --white: #ffffff;
    --bg: #131313;
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #f97187;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
}

body {
    font-family: 'Noto+Sans+Armenian';
    min-height: 100vh;
    background-color: #d1d1d177;
}

nav{
    padding: 10px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 70px;
    box-shadow: 0px 2px 10px var(--bs-gray-500);
    background-color: var(--bs-gray-100);
}

nav .user_info{
    display: flex;
    gap: 5px;
    justify-content: center;
    font-size: 25px;
    font-weight: 600;
}

nav .logout{
    background-color: var(--bs-pink);
    padding: 10px 20px;
    border-radius: 15px;
    border: none;
    align-self: center;
    color: var(--bs-gray-200);
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
}

nav .logout a{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: var(--bs-gray-200);
}

.messages{
    max-width: 500px;
    text-align: center;
    font-size: 20px;
}

.messages #message{
    margin-top: 5px;
    font-weight: 600;
}

.messages .error{
    color: var(--bs-red);
}

.messages .info{
    color: var(--bs-yellow);
}

.messages .success{
    color: var(--bs-green);
}

.body_container{
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}

.body_container .up, .body_container .down{
    display: flex;
    gap: 50px;
    width: 100%;
    justify-content: center;
}

.body_container .barcode, .body_container .referral_system,
.body_container .bonus_system{
    width: 35%;
    background-color: var(--bs-gray-100);
    padding: 30px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 5px 5px 10px var(--bs-gray-500);
    min-height: 330px;
}

.body_container .barcode{
    display: flex;
    flex-direction: column;
    gap: 30px;
    background-color: var(--bs-yellow);
    color: var(--bs-gray-100);
    transform: perspective(2500px) rotateY(-90deg);
    transition: all 0.5s ease-in-out;
    transition-delay: 0.3s;
}

.body_container.show .barcode{
    transform: perspective(2500px) rotateY(0);
}

.body_container .barcode img{
    width: 60%;
    border-radius: 30px;
}

.body_container .barcode p,
.body_container .referral_system .referral_link .title,
.body_container .bonus_system .title{
    font-size: 28px;
    font-weight: 900;
    border-bottom: 1px var(--bs-gray-300) solid;
    width: 100%;
    text-align: center;
    padding-bottom: 10px;
}

.body_container .referral_system{
    background-color: rgb(13 226 74);
    color: var(--bs-gray-100);
    transform: perspective(2500px) rotateY(90deg);
    transition: all 0.5s ease-in-out;
    transition-delay: 0.3s;
}

.body_container.show .referral_system{
    transform: perspective(2500px) rotateY(0);
}

.body_container .referral_system .referral_link{
    font-size: 40px;
    font-weight: 600;
    width: 100%;
}

.body_container .referral_system .referral_link .part{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 50px;
}

.body_container .referral_system .referral_link .part .part_name{
    font-size: 22px;
}

.body_container .referral_system .referral_link .part .ref_code{
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
}

.body_container .referral_system .referral_link .part .copy{
    border: none;
    background-color: var(--bs-gray-200);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 20px;
    color: var(--bs-teal);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.body_container .referral_system .referral_link .part .copy:hover{
    transform: scale(1.1);
}

.body_container .referral_system .referral_link .part2{
    margin-top: 35px;
    font-size: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.body_container .referral_system .referral_link .text-container{
    margin-top: 10px;
    font-size: 18px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
}

.body_container .referral_system .referral_link .text-content{
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


.body_container .referral_system .referral_link .text-container .toggle-btn {
    background: none;
    border: none;
    color: blue;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    margin-top: 5px;
    font-size: 18px;
    align-self: end;
}
  
.body_container .referral_system .referral_link .text-container .toggle-btn:hover {
    color: darkblue;
}

.body_container .referral_system .referral_link .part2 form,
.body_container.show .bonus_system form{
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 10px;
}

.body_container .referral_system .referral_link .part2 input,
.body_container.show .bonus_system input{
    appearance: textfield;
    -moz-appearance: textfield;
    background-color: var(--bs-gray-300);
    color: var(--bg);
    font-size: 16px;
    font-weight: 500;
    padding: 10px 15px;
    border-radius: 10px;
    border: 1.5px var(--bs-pink) solid;
}

.body_container.show .bonus_system input{
    border: 1.5px rgb(13, 226, 124) solid;
}

.body_container .referral_system .referral_link .part2 input::placeholder,
.body_container.show .bonus_system input::placeholder{
    color: var(--bs-gray-500);
}

.body_container .referral_system .referral_link .part2 input:focus{
    outline: 1px var(--bs-pink) solid;
}

.body_container.show .bonus_system input:focus{
    outline: 1px rgb(13, 226, 124) solid;
}

.body_container .referral_system .referral_link .part2 input::-webkit-outer-spin-button,
.body_container .referral_system .referral_link .part2 input::-webkit-inner-spin-button,
.body_container.show .bonus_system input::-webkit-outer-spin-button,
.body_container.show .bonus_system input::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
}



.body_container .referral_system .referral_link .part2 button,
.body_container.show .bonus_system button{
    background-color: var(--bs-pink);
    padding: 10px 20px;
    border-radius: 15px;
    border: none;
    align-self: center;
    color: var(--bs-gray-200);
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
}

.body_container.show .bonus_system button{
    background-color: rgb(13, 226, 124);
}


.body_container .bonus_system{
    display: flex;
    flex-direction: column;
    gap: 5px;
    background-color: #eb375c;
    color: var(--bs-gray-100);
    transform: perspective(2500px) rotateX(-90deg);
    transition: all 0.5s ease-in-out;
    transition-delay: 0.6s;
    justify-self: center;
}

.body_container .bonus_system .cashed_out_sum{
    font-size: 17px;
    font-style: italic;
}

.body_container.show .bonus_system{
    transform: perspective(2500px) rotateX(0);
}

.body_container.show .bonus_system .bonus{
    font-size: 55px;
    text-align: center;
}

.body_container.show .bonus_system .bonus small{
    font-size: 25px;
}

.body_container.show .bonus_system .bonus_info{
    background-color: var(--primary);
    font-size: 20px;
    font-weight: 600;
    padding: 15px;
    border-radius: 15px;
    text-align: center;
}

.body_container.show .bonus_system .bonus_info small{
    font-size: 40px;
    font-weight: 600;
}

.body_container.show .bonus_system .withdrawal_request{
    font-size: 20px;
    max-width: 70%;
    text-align: center;
}

.body_container.show .bonus_system .withdrawal_request small{
    font-size: 28px;
    font-weight: 600;
}

.purchases{
    display: flex;
    flex-direction: column;
    gap: 50px;
    justify-content: center;
    align-items: center;
    margin: 100px 0;
}

.purchases .my_purchase, .purchases .referral_purchase{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 50%;
    justify-content: center;
    align-items: center;
}

.purchases .referral_purchase #all_ref{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.purchases .title{
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    color: var(--bg);
}

.purchases .table{
    padding: 25px;
    border-radius: 20px;
    background-color: var(--bs-gray-400);
    width: 100%;
}

.purchases .table .table_titles{
    display: flex;
    padding: 15px 0;
    border-bottom: 1px var(--bs-gray-600) solid;
    align-items: center;
}

.purchases .table .table_row{
    display: flex;
    padding: 15px 0;
}

.purchases .table .table_total{
    display: flex;
    padding: 15px 0;
    border-top: 0.5px var(--bs-gray-500) solid;
}

.purchases .table .table_titles p, .purchases .table .table_row p, .purchases .table .table_total p{
    width: calc(100%/3);
    color: var(--bg);
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

.purchases .table .table_row p{
    font-size: 17px;
    font-weight: 500;
}

.purchases .table .table_empty{
    width: 100%;
    height: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--bs-red);
    text-align: center;
}

.purchases .month_selection{
    display: flex;
    gap: 25px;
    justify-content: flex-end;
    align-items: center;
    width: 80%;
    margin: auto;
}

.purchases .month_selection p{
    font-size: 17px;
    font-weight: 600;
}

.purchases .month_selection select{
    background-color: var(--bs-gray-300);
    color: var(--bg);
    font-size: 16px;
    font-weight: 500;
    padding: 10px 25px;
    border-radius: 10px;
    border: 1.5px var(--bs-pink) solid;
    cursor: pointer;
    appearance: none;
}

.purchases .month_selection select:focus{
    outline: 1.5px var(--bs-pink) solid;
}

.purchases .referral_purchase{
    margin-top: 60px;
}

.purchases .referral_purchase .ref_title{
    font-size: 18px;
}

footer{
    padding: 30px 150px;
    display: flex;
    justify-content: space-between;
    min-height: 70px;
    box-shadow: 0px 2px 10px var(--bs-gray-500);
    background-color: var(--bs-gray-100);
}

footer .footer_part{
    width: calc(100%/3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

footer .footer_part .foo_ti{
    color: var(--bs-gray-800);
    font-size: 16px;
    font-weight: 500;
}

footer .footer_part img{
    width: 25%;
}

footer .footer_part .desc{
    font-size: 14px;
    color: var(--bs-gray-800);
}

footer .footer_part a{
    color: var(--bs-blue);
    transition: all 0.3s ease-in-out;
}

footer .footer_part a:hover{
    color: #043c8e;
}

@media (min-width: 2560px) {
    body {
        max-width: 1250px;
        margin: auto;
    }

    nav {
        transform: scale(1.25);
    }

    .body_container {
        transform: scale(1.25);
        margin-top: 150px;
    }

    .body_container .barcode img{
        width: 95%;
    }

    .body_container .referral_system .referral_link .part{
        flex-wrap: wrap;
    }

    .body_container .referral_system .referral_link .part .part_name {
        font-size: 30px;
    }

    .purchases{
        transform: scale(1.5);
        margin-top: 430px;
    }

    footer{
        transform: scale(1.25);
        margin-top: 300px;
    }
}

@media (max-width: 768px){
    nav .user_info{
        font-size: 35px;
    }

    nav .logout{
        font-size: 25px;
    }

    .body_container .up, .body_container .down{
        flex-direction: column;
        align-items: center;
    }

    .body_container .barcode, .body_container .referral_system, .body_container .bonus_system{
        width: 60%;
    }

    .body_container .barcode p,
    .body_container .referral_system .referral_link .title,
    .body_container .bonus_system .title {
        font-size: 30px;
    }

    .body_container .barcode img{
        width: 80%;
    }

    .body_container .referral_system .referral_link .part .part_name {
        font-size: 20px;
        margin-right: 10px;
    }

    .body_container .referral_system .referral_link {
        font-size: 45px;
    }

    .body_container .referral_system .referral_link .part2 {
        font-size: 30px;
        text-align: center;
    }

    .body_container.show .bonus_system .bonus small {
        font-size: 30px;
    }

    .body_container.show .bonus_system .withdrawal_request {
        font-size: 25px;
        max-width: 90%;
    }

    .purchases .my_purchase, .purchases .referral_purchase{
        width: 95%;
    }

    .purchases .title {
        font-size: 27px;
    }

    .purchases .month_selection p {
        font-size: 23px;
    }

    .purchases .month_selection select{
        font-size: 28px;
    }

    .purchases .table .table_titles p, .purchases .table .table_row p, .purchases .table .table_total p {
        font-size: 28px;
    }

    .purchases .table .table_row p {
        font-size: 25px;
    }

    footer{
        font-size: 22px;
        padding: 30px;
    }

    footer .footer_part .foo_ti{
        font-size: 20px;
    }

    footer .footer_part a{
        font-size: 18px;
        width: 80%;
        text-align: center;
    }
}

@media (max-width: 466px){
    nav{
        padding: 10px 20px;
    }

    nav .user_info {
        flex-direction: column;
        align-items: center;
        font-size: 25px;
    }

    .body_container .barcode, .body_container .referral_system, .body_container .bonus_system {
        width: 95%;
        padding: 10px;
        min-height: 370px;
    }

    .body_container .barcode img {
        width: 100%;
    }

    .body_container .barcode p, .body_container .referral_system .referral_link .title, .body_container .bonus_system .title {
        font-size: 25px;
        padding-bottom: 25px;
    }

    .body_container .referral_system .referral_link .part{
        flex-wrap: wrap;
    }

    .body_container .referral_system .referral_link .part .part_name {
        font-size: 23px;
        margin-right: 0;
    }

    .body_container .referral_system .referral_link .part2{
        margin-top: 20px;
    }

    .body_container.show .bonus_system .bonus {
        font-size: 45px;
        text-align: center;
    }

    .body_container.show .bonus_system .bonus small {
        font-size: 20px;
    }

    .body_container.show .bonus_system .withdrawal_request {
        font-size: 22px;
        max-width: 950%;
    }

    .purchases .my_purchase, .purchases .referral_purchase {
        width: 98%;
    }

    .purchases .title {
        font-size: 22px;
        text-align: center;
    }

    .purchases .month_selection p {
        font-size: 20px;
    }

    .purchases .month_selection select {
        font-size: 20px;
    }

    .purchases .table{
        padding: 15px 5px;
    }

    .purchases .table .table_titles p, .purchases .table .table_row p, .purchases .table .table_total p {
        font-size: 19px;
    }

    .purchases .table .table_row p {
        font-size: 19px;
    }

    .purchases .referral_purchase .ref_title {
        margin-left: 15px;
    }

    .body_container .referral_system .referral_link .part2 form, .body_container.show .bonus_system form{
        flex-direction: column;
        width: 100%;
    }

    .body_container .referral_system .referral_link .part2 input, .body_container.show .bonus_system input{
        width: 80%;
        font-size: 20px;
    }

    footer {
        flex-direction: column;
        gap: 40px;
        font-size: 14px;
        width: 95%;
        text-align: center;
    }

    footer .footer_part{
        width: 100%;
    }
}