/* font awesome cdn link  */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css');

/* google fonts cdn link  */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root{
   --black:#333;
   --white:#fff;
   --light-color:#666;
   --bg-color:#eee;
   --border:.1rem solid rgba(0,0,0,.2);
   --box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
}

*{
   box-sizing: border-box;
   outline: none; border: none;
   text-decoration: none;
   margin: 0; padding: 0;
   transition: all .2s linear;
   font-family: "Montserrat", sans-serif;
}

html{
   font-size: 62.5%;
}

body{
   background-color: var(--bg-color);
}

.container{
   display: flex;
   justify-content: center;
   gap: 3rem;
   padding: 3rem 2rem;
}

.form{
   width: 40rem;
}

.form h3{
   font-size: 3rem;
   color: var(--black);
   margin-bottom: 1rem;
   text-transform: capitalize;
}

.form .box{
   margin-bottom: 2rem;
}

.form .box p{
   padding-bottom: .5rem;
   font-size: 1.6rem;
   color: var(--light-color);
   text-transform: capitalize;
}

.form input,
.form textarea{
   width: 100%;
   padding: 1.4rem;
   font-size: 1.8rem;
   color: var(--black);
   border-radius: .5rem;
   border: var(--border);
   background: var(--white);
}

.form textarea{
   resize: none;
}

.form .btn{
   cursor: pointer;
   padding: .8rem 2.5rem;
   font-size: 1.8rem;
   color: var(--white);
   background-color: var(--black);
   border-radius: .5rem;
   margin-top: 1rem;
   text-transform: capitalize;
}

.form .btn:hover{
   background-color: crimson;
}

.form ul li{
   list-style: none;
   padding: .5rem 1.5rem;
   font-size: 1.8rem;
   color: var(--light-color);
   border-radius: .5rem;
   background: var(--white);
   border: var(--border);
   margin-top: 1rem;
   line-height: 1.6;
   display: flex;
   align-items: center;
}

.form ul li span{
   margin-right: auto;
}

.form ul li button{
   background: none;
   color: var(--light-color);
   font-size: 1.8rem;
   margin-left: 1rem;
   cursor: pointer;
}

.form ul li button:hover{
   color: var(--black);
}

.form ul li input{
   padding: .5rem 1rem;
   border: none;
   background-color: var(--bg-color);
}

#downloadPdf{
   width: 100%;
}

.preview{
   width: 794px;
   padding: 2rem;
   border: var(--border);
   background: var(--white);
   border-radius: .5rem;
}

.preview .resume-header{
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-bottom: 2rem;  
}

.preview .resume-header .photo{
   height: 15rem;
   width: 15rem;
   border-radius: 50%;
   background: var(--bg-color);
   position: relative;
   z-index: 0;
   flex-shrink: 0;
}

.preview .resume-header .photo::before{
   content: var(--content, 'your profile');
   position: absolute;
   top: 50%; left: 50%;
   transform: translate(-50%, -50%);
   font-size: 2rem;
   text-wrap: nowrap;
   z-index: -1;
   color: var(--light-color);
   text-transform: capitalize;
}

.preview .resume-header h3{
   font-size: 2.5rem;
   color: var(--black);
   padding-bottom: 1rem;
}

.preview .resume-header p{
   margin-top: 1rem;
   font-size: 1.8rem;
}

.preview .resume-header p i{
   margin-right: 1rem;
   color: var(--black);
}

.preview .resume-header p span{
   color: var(--light-color);
}

.preview .box{
   padding: 1rem 1.5rem;  
   border-top: var(--border);
   page-break-inside: avoid;
   page-break-after: auto;
   page-break-after: auto;
   break-inside: avoid;
   overflow: hidden;
}

.preview .box h3{
   color: var(--black);
   text-transform: capitalize;
   font-size: 2rem;
   margin-bottom: 1rem;
   padding-top: .5rem;
   page-break-inside: avoid;
   break-inside: avoid;
   page-break-after: avoid;
   break-after: avoid;
}

.preview .box ul,
.preview .box p{
   color: var(--light-color);
   font-size: 1.6rem;
   line-height: 1.6;
   page-break-inside: avoid;
   break-inside: avoid;
   overflow-wrap: break-word;
   word-break: break-word;
}

.preview .box ul{
   list-style: none;
}