*{
    box-sizing: border-box;
}



 
    
    

.yellowbox
{
    
   
    
    background: rgb(255, 255, 192);
    height: 450px;
    width: 700px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   align-content: center;
   gap: 10px;
 
}

.arrowwrapper { 
    display: flex;
    justify-content: space-between;
    width: 100%;
}


.arrow
{

    
    height: 80px;
    width: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: aliceblue;

}


p 

{
  text-align: center;
  color: white;
}
.left

{
 background: orange;
}
 

.right

{
background-color: purple;
}


.back-wrapper {

    justify-content: flex-end;

}

.back {
    background: gray;
  
}

    .dialoguecontainer
    {

        background:   rgb(255, 255, 192);
        height: 150px;
        width: 700px;
    
    
    }


.text

{
 color: rgb(0, 0, 0);
 margin: 20px;
 text-align: left;

}