:root{--primary:#fff;--secondary:#dadada;--button:#37d5d6;--input:#333}*{margin:0;padding:0;transition:all .5s}.container{width:60%;height:450px;background-color:var(--primary);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:20px;padding:20px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr}.left img{width:95%;height:200px;margin-top:125px}input{height:30px}textarea{height:150px;resize:none}input,textarea{width:95%;background-color:var(--secondary);outline:none;margin-bottom:20px;padding:10px}button,input,textarea{border-radius:10px;border:none}button{width:100%;height:40px;background-color:var(--button);color:var(--primary);cursor:pointer;font-weight:400;font-size:17px}button:hover{background-color:#20bf55;background-image:linear-gradient(315deg,#20bf55,#01baef 74%);transition:all .5 ease-in}.preview-data__input{border-radius:10px;background-color:var(--input);color:var(--primary)}.preview-container{display:block;font-weight:700;margin-top:20px}.preview-container button{width:70%;height:40px;border-radius:20px;background-color:#ff4500;color:var(--primary)}.preview{width:80%;height:25px;background-color:var(--input);color:var(--primary)}@media screen and (max-width:700px){.container{width:80%;height:auto;display:grid;grid-template-columns:1fr;grid-template-rows:1fr 1fr;transition:all .5s ease-in}}body{background-color:#333}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px}