@import url("https://fonts.google.com/specimen/Rubik");

:root {

    /** Text */

    /* (sub-heading at the top of the app UI)*/
    --paleViolet: hsl(276, 100%, 81%);
    /*(chat on the left)*/
    --moderateViolet: hsl(276, 55%, 52%);
    --moderateVioletLight: hsla(276, 55%, 52%, .1);
    /* (chat on the right)*/
    --desaturatedDarkViolet: hsl(271, 15%, 43%);
    /*(placeholder text)*/
    --grayishBlue: hsl(206, 6%, 79%);
    /*(main heading) (submit button background)*/
    --veryDarkDesaturatedViolet: hsl(271, 36%, 24%);
    /*(paragraph)*/
    --darkGrayishViolet: hsl(270, 7%, 64%);

    /* Gradient */
    --magenta: hsl(293, 100%, 63%);
    --violet: hsl(264, 100%, 61%);
    --magentaLight: hsla(293, 100%, 63%, .025);
    --violetLight: hsla(264, 100%, 61%, .025);

    /* Primary */

    --white: hsl(0, 0%, 100%);
    /*(app background)*/
    --lightGrayishViolet: hsl(270, 20%, 96%);
    /**(radio button outline)*/
    --veryLightMagenta: hsl(289, 100%, 72%);
}


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Rubik', sans-serif;
}

body {
    font-size: 16px;
    background-color: var(--lightGrayishViolet);
    position: relative;
    overflow-x: hidden;
}


body::before {
    content: "";
    position: absolute;
    background: linear-gradient(var(--magenta), var(--violet));
    width: 500px;
    height: 85%;
    top: 0;
    right: 72%;
    border-bottom-left-radius: 999px;
    border-bottom-right-radius: 999px;
}

body::after {
    content: "";
    position: absolute;
    background: linear-gradient(var(--violetLight), var(--magentaLight));
    width: 500px;
    height: 85%;
    bottom: 0;
    left: 77%;
    border-top-left-radius: 999px;
    border-top-right-radius: 999px;
}

.main {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}


.main-container {
    margin-left: 120px;
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 150px;
    padding: 50px;
}

.mobile-container {
    width: 250px;
    position: relative;
    border: 10px solid var(--white);
    border-radius: 30px;
    z-index: 10;
    box-shadow: 5px 10px 40px 2px hsla(271, 36%, 24%, .2);

}

.mobile-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    background: linear-gradient(to left, var(--magenta), var(--violet));
    border-radius: 20px 20px 5px 5px;
    padding: 30px 20px 5px 10px;
    align-items: center;

}

.mobile-speaker {
    position: absolute;
    background-color: var(--white);
    height: 30px;
    width: 130px;
    top: -10px;
    right: 50%;
    transform: translateX(50%);
    z-index: 11;
    border-radius: 15px;
}

.send-avatar {
    width: 25px;
    border-radius: 9999px;
    border: 1px solid var(--white)
}

.profile-container {
    display: flex;
    gap: 5px;
    align-items: center;
}

.mobile-header-container {
    display: flex;
    align-items: center;
    gap: 5px
}

.arrow-icon {
    width: 10px;
}

.profile-detail {
    display: flex;
    flex-direction: column;
    gap: 3px
}

.profile-name {
    font-size: 10px;
    letter-spacing: .5px;
    font-weight: 700;
    color: var(--white)
}

.profile-description {
    font-weight: 400;
    font-size: 8px;
    color: var(--paleViolet);
}

/* Mobile Body */
.mobile-body-container {
    background-color: var(--lightGrayishViolet);
    padding: 10px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.right-chat {
    display: flex;
    margin: 10px 0px;
}

.receive-chat {
    font-size: 8px;
    color: var(--moderateViolet);
    background-color: var(--moderateVioletLight);
    width: 128px;
    border-radius: 10px 10px 10px 3px;
    padding: 8px;
}

.left-box {
    display: flex;
    justify-content: end;
    margin: 10px 0px;

}

.left-chat {
    width: 140px;
    display: flex;
    justify-content: end;
}

.send-chat {
    background-color: var(--white);

    font-size: 8px;
    color: var(--desaturatedDarkViolet);
    padding: 8px;
    display: inline-block;
    border-radius: 10px 10px 5px 10px;
}

.send-images {
    display: flex;
    gap: 10px;


}

.send-images img {
    width: 40px;
    border-radius: 10px;
}

.receive-donation {
    display: flex;
    background: linear-gradient(to right, var(--magenta), var(--violet));
    padding: 10px;
    align-items: center;
    width: 150px;
    margin: 10px 0px;
    border-radius: 10px 10px 10px 5px;
    justify-content: space-between;

}

.donation-container {
    display: flex;
    align-items: center;
    gap: 8px;

}

.donation-ring {
    width: 15px;
    height: 15px;
    border: 1px solid var(--veryLightMagenta);
    border-radius: 9999px;
}

.donation-info {
    font-size: 8px;
    color: var(--white);
}

.donation-price {
    color: var(--white);
    font-weight: 700;
    font-size: 14px;
}


.chat-input-container {
    background-color: var(--white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    border-radius: 99px;
}

.chat-input-container input {
    border: none;
    outline: none;
    font-size: 9px;
    padding: 5px 15px;
}

.chat-input-container input::placeholder {
    color: var(--grayishBlue)
}


.chat-input-container button {
    background-color: var(--veryDarkDesaturatedViolet);
    border: none;
    width: 25px;
    height: 25px;
    border-radius: 9999px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chat-input-container button img {
    width: 10px;
    transform: rotate(180deg);
}

/** Content */

.content-container {
    width: 430px;
    line-height: 30px;
}

.heading {
    font-weight: 700;
    font-size: 42px;
    color: var(--veryDarkDesaturatedViolet);
    margin-bottom: 30px;
}

.description {
    color: var(--darkGrayishViolet);
}

@media (max-width:980px) {
    .main-container {
        flex-direction: column !important;
        gap: 80px;
    }

    /** Content */

    .content-container {
       text-align: center;
    }

    
}

@media (max-width:375px) {
    .main-container {
        flex-direction: column !important;
        gap: 80px;
        margin-left: 0;
        /* padding: 10px; */
    }

    /** Content */

    .content-container {
       text-align: center;
       padding: 58px;
       /* width: 250px; */
    }
    body::before{
        right: 50%;
        height: 500px;
    }
    body::after{
        display: none;
    }
    
}