* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
:root{
--text-dark:#000;
--text-light: #7aa7a6;
--body-background:#ffff;
--body-foreground:#008080;
--shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
--dark-border:rgba(0,0,0,0.2);
   --soft-red: #c22a13;  
      --hover:#266b6a;
      --logo-font:"Cormorant Garamond", serif;
      --body-font: "Work Sans", sans-serif; 
      --heading-font: 'Playfair Display', serif;

}
h1,h2,h3,h4,h5,h6{
   font-family: var(--heading-font);
   letter-spacing:1px;
     
}
p,span,button,a,textarea{
   font-family: var(--body-font);
}
/* letter and img preview section starts here */

.preview{
    width: 100%;
    min-height: 100vh;
    padding-top: 7rem;
    margin-bottom: 4rem;
 
    display: flex;
flex-direction: column;
align-items: center;

}

.preview .heading h1{
        text-align: center;
    font-size: 3rem;
 font-weight: 400;
 padding: 2rem 0rem;
}

.preview .wrapper{
     box-shadow: var(--shadow);
   width: 90%;
   display: flex;
      flex-direction: column;
;
align-items: center;
gap: 10px;
margin: 2rem 0rem;
padding-bottom: 3rem;
border-radius: 10px;
}
.preview .wrapper .heading{
    display: flex;
 flex-direction: column;
align-items: start;
 flex-wrap: wrap;
gap: 15px;
width: 80%;
padding-bottom: 2rem;
padding: 2rem;
}

.preview .wrapper .heading h6{
 
   font-size: 2rem;
        font-weight: 500;
}
.preview .wrapper .heading .buttons{
   display: flex;
width: 100%;
gap: 15px;
align-items: center;
flex-wrap: wrap;

}
.preview .wrapper .heading .buttons button{
   
              height: 45px;
    width: 120px;
        cursor: pointer;
    border: none;
    border-radius: 10px;
    border: 2px solid var(--body-foreground);
     background-color: var(--body-foreground);
}
.preview .wrapper .heading .buttons button.back{
   background-color: var(--body-background);
       width: 120px;}
.preview .wrapper .heading .buttons button.back a{
   color: var(--body-foreground);
   font-weight: 500;
}
.preview .wrapper .heading .buttons button a{
font-size: 0.8rem;
text-decoration: none;
color: var(--body-background);
}
.preview .wrapper .heading .buttons button:hover{
   background-color: var(--hover);
   transition-duration: 0.5s;
}
.preview .wrapper .heading .buttons button.back:hover{
   background-color: rgba(0, 0, 0, 0.034);
}
.preview .wrapper .letter{

border: 1px solid rgba(0, 0, 0, 0.1);
   width: 80%;
   display: flex;
      flex-direction: column;
gap: 20px;
padding: 2rem ;
border-radius: 10px;

}
.preview .wrapper .letter .letter-pattern{

display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
flex-wrap: wrap;

}
.preview .wrapper .letter .letter-pattern h5{
    font-size: 3rem;
        font-weight: 500;
        text-align: center;
}
.preview .wrapper .letter .letter-pattern p{

   text-align: center;
padding-bottom:1rem;
}
.preview .wrapper .letter hr{
 border-color: var(--text-light);

}
.preview .wrapper .letter .content{
   padding-top: 1rem;
   display: flex;
   width: 100%;
   flex-wrap: wrap;
   justify-content: center;
}
.preview .wrapper .letter .content p{
   line-height: 2;
   text-align: center;
}
.preview .wrapper  .buttons-2{
      display: flex;
width: 100%;
gap: 15px;
justify-content: center;
align-self: center;
padding: 2rem;
flex-wrap: wrap;
}
.preview .wrapper .buttons-2 button{
     height: 45px;
    width: 150px;
        cursor: pointer;
    border: none;
    border-radius: 10px;
    border: 2px solid var(--body-foreground);
     background-color: var(--body-foreground);
}
.preview .wrapper .buttons-2 button.big-btn{
   width: 200px;
}
.preview .wrapper .buttons-2 button a{
   color: var(--body-background);
   text-decoration: none;
}
.preview .wrapper .buttons-2 button:hover{
   background-color: var(--hover);
   transition-duration: 0.5s;
}


.preview .wrapper .letter textarea{
  width: 100%;
    min-height: 100px;
    resize: none;
    border: none;
    outline: none;
    
    font-size: 1rem;
    line-height: 1.6;
overflow: hidden;
    padding: 1rem;
    background-color: transparent;
    font-family: var(--body-font);
    box-sizing: border-box;
    display: block;

}
/* letter and img preview section ends here */
@media (max-width:700px) {
   .preview .wrapper .letter .content p{
font-size: 0.9rem;
   text-align: start;
}
.preview .wrapper .letter{


   width:90%;
padding: 2rem 1.2rem;

}


}

@media (max-width:460px) {
   .preview .wrapper .heading .buttons{
  
justify-content: center;

}}