.atas{
    display: flex;
    gap: 32px;
    padding: 24px 24px;
}

.text{
    display: flex;
    flex-direction: column;
    width: 550px;
}

.frame-5{
    display: flex;
    padding: 24px 24px;
}

.section-left{
    display: flex;
    flex-direction: column ;
    gap:24px;

    textarea{
        min-width: 640px;
        min-height: 620px;
        border: 1px solid black;
        border-radius: 12px;
        resize: none;
    }

    button{
        background-color: red;
        border: 1px solid red;
        border-radius: 12px;
        width: 140px;
        height: 40px;
        display: flex;
        align-self: flex-end;
        align-items: center;   /* Vertically center the content */
        justify-content: center; /* Horizontally center the content */
        cursor: pointer;
    }
}

.section-right{
    display: flex;
    flex-direction: column ;
    gap:24px;
    padding: 0 20px ;

    .marah {
    width: 640px;
    height: 620px;
    background-color: black;
    border: 1px solid black;
    border-radius: 12px;
    color: red;
    display: flex;
    justify-content: center;
    align-items: center;
}

    button{
        background-color: greenyellow;
        border: 1px solid greenyellow;
        border-radius: 12px;
        width: 140px;
        height: 40px;
        display: flex;
        align-self: flex-end;
        align-items: center;   /* Vertically center the content */
        justify-content: center; /* Horizontally center the content */
        cursor: pointer;
    }
}


.dibawah{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;

    textarea{
        width: 400px;
        height: 30px;
        border: 1px solid black;
        border-radius: 12px;
        resize: none;
        display: flex;
        justify-content: center;
        justify-items: center;
        
        placeholder{
            display: flex;
            align-self: center;
            justify-self: center;
            padding: 20px;
        }
    }
}