.grid-item div{margin:2px;padding:2px 10px}input,textarea,select{width:95%;padding:4px 10px}select{width:101%!important}select :first-child{color:gray}.btn{width:100%;max-width:180px;min-width:40px;padding:1rem;color:#fff;background-color:#256d85;border-style:none;justify-content:center;border-radius:6px}.add{border-radius:6px 6px 0 0!important;transition:text-decoration .3s,text-underline-offset .3s,color .3s}.add:hover{color:#06283d;background-color:#fff;box-shadow:0 -8px 6px #d4d4d4;text-decoration:underline;font-weight:700;text-underline-offset:.4rem;text-decoration-thickness:2px;animation:.5s offset-line;transition:font-weight .3s}@keyframes offset-line{0%{opacity:.2;text-underline-offset:.8rem}to{opacity:1;text-underline-offset:.4rem}}.delete{width:100%;max-width:150px;min-width:40px;padding:5px 0;color:#fff;border-style:none;background-color:#3a9cdd;border-radius:3px}.delete:hover{background-color:#eb3232}#preview{position:fixed;left:50%;bottom:0;transform:translate(-50%,-50%)}#preview .btn{background-color:#06283d;width:120px;padding:1.5rem 0rem;margin:3px}#preview .btn:hover{background-color:#fff;color:#06283d;border:1px solid #06283d;font-weight:700;padding:1.3rem 0rem}.header{width:100%;display:grid;grid-template-columns:1fr 1fr;align-items:center;justify-content:center}.header div:last-child{display:grid;padding-right:3rem;justify-items:end}#personal-info{display:grid;grid-template-columns:1fr .5fr;grid-template-rows:.4fr .4fr .4fr .4fr .4fr .4fr .4fr;grid-template-areas:"input2 input1 " "input3 input1" "input4 input1" "input5 input1" "input6 input6" "input7 input7" "input8 input8";margin-bottom:1.5rem}#personal-info input[type=file]{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}#personal-info input[type=file]+label{letter-spacing:2px;text-align:center;width:150px;max-height:53.99px;min-width:40px;padding:20px;color:#fff;background-color:#06283d;border-radius:6px}#personal-info input[type=file]+label:hover{background-color:#063c5e}#personal-info .picture{display:flex;flex-direction:column-reverse;align-items:center;justify-content:center}.picture img{width:150px;border-radius:50%;margin:5px;box-shadow:0 2px 10px #d4d4d4}#personal-info .grid-item{display:grid;grid-template-columns:150px 1fr;align-items:center}.pgrid-1{grid-area:input1}.pgrid-2{grid-area:input2}.pgrid-3{grid-area:input3}.pgrid-4{grid-area:input4}.pgrid-5{grid-area:input5}.pgrid-6{grid-area:input6}.pgrid-7{grid-area:input7}.pgrid-8{grid-area:input8}.education,.experience,.training{display:grid;grid-template-columns:1fr;padding:1rem;margin-bottom:1.5rem}.education .grid-item,.experience .grid-item,.training .grid-item{display:grid;grid-template-columns:150px 1fr;align-items:center}.shadow{box-shadow:0 2px 10px #d4d4d4}#skills{padding:1rem;margin-bottom:1rem}#skills #skill-list{display:grid;grid-template-columns:.8fr .2fr;padding:10px}#buttons{z-index:2000}@media only screen and (max-width: 650px){#personal-info{justify-items:center;grid-template-columns:1fr;grid-template-rows:1fr .4fr .4fr .4fr .4fr .4fr .4fr .4fr;grid-template-areas:"input1" "input2" "input3" "input4" "input5" "input6" "input7" "input8"}#personal-info .grid-item{grid-template-columns:1fr;width:95%;align-content:center;text-align:center}#personal-info .grid-item div{padding:4px 0}.education .grid-item,.experience .grid-item,.training .grid-item{grid-template-columns:1fr;text-align:center}.header div:last-child{padding-right:0}}@keyframes show{0%{transition:transform .3s ease-in-out,opacity .4s ease;opacity:0}to{opacity:1}}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}body{background-color:#dff6ff;height:100vw;padding:1rem;font-family:Arial,Helvetica,sans-serif}#root{width:100%;display:flex;justify-content:center}#main{padding:1rem;background-color:#fff;width:100%;max-width:800px;min-width:200px}.padd{padding:30px 4px}.center{display:flex;justify-content:center;align-items:center;padding:.5rem}#title{color:#fff;font-size:25px;padding:1rem 0;margin-bottom:1rem;text-align:center;background-color:#06283d}h1{text-align:left;color:#256d85;width:100%;font-size:18px;padding:.5rem;font-weight:bolder;letter-spacing:4px}#buttons{position:fixed;left:50%;bottom:0;transform:translate(-50%,-50%);z-index:3000}#buttons button{background-color:#06283d;width:120px;padding:1.5rem 0rem;border-radius:5px;color:#fff;margin:3px}#buttons button:hover{background-color:#df1b1b;font-weight:700;padding:1.3rem 0rem}#overlay{position:fixed;height:100%;top:0;left:0;right:0;bottom:0;background-color:#000000b3;z-index:1000}#page{font-size:16px!important;line-height:22px;letter-spacing:2px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;overflow-y:scroll;height:100vh;padding:1.5rem;width:210mm;border:1px #d3d3d3 solid;border-radius:5px;box-shadow:0 0 5px #0000001a;z-index:2000;animation:.5s show alternate;transition:transform .3s ease-in-out,opacity .4s ease}#page h1{font-size:16px!important}#subpage{padding:.5cm 1cm;width:210mm;height:100vh}.upper-side ul{display:flex;flex-direction:row;justify-content:space-evenly;padding:20px 1rem}.upper-side ul div:first-child{padding-top:30px;width:50%}.name{font-size:18px!important;font-weight:700}.upper-side ul div:last-child{text-align:right;width:50%}#prev{display:grid;grid-template-columns:1fr 1fr;justify-items:center}.specify{color:red;font-weight:700}#note{display:none;grid-area:note;background-color:#f1b33e;padding:1rem;letter-spacing:2px}.indentation{padding:1.85rem}.personal-section li{display:grid;grid-template-columns:175px 1fr}.skills-section ul{display:flex;flex-direction:column}.skills-section li{list-style-type:disc}.education-section ul ul li:first-child,.exp-section ul ul li:first-child{font-weight:700}.space-bottom{margin-bottom:1rem}@media only screen and (max-width: 850px){#prev{grid-template-rows:1fr 1fr;grid-template-areas:"left-b right-b" "note note"}#note{display:block}}