@import url("https://fonts.googleapis.com/css2?family=Concert+One&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");*,html{margin:0;padding:0;box-sizing:border-box;font-family:Concert One,sans-serif}body{width:100dvw;height:100dvh;background-image:linear-gradient(15deg,#137c75,#336f61);background-color:#336f61}body,main{display:flex;justify-content:center;align-items:center;flex-direction:column}main{width:100%;height:100%;gap:10px}hr{width:96%;height:1px;background-color:#137c75;border:0}.hidden{display:none;visibility:hidden}.title-container{width:90%;height:10%;display:flex;justify-content:center;align-items:center;& h1{font-size:16px;font-weight:100;color:#fff;text-shadow:#0f3443 1px 1px 1px;text-wrap:nowrap}& img{width:60px;height:60px}}.main-container{width:90%;height:80%;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#fff;gap:5%;border-radius:10px;border:2px solid #0f3443;box-shadow:0 0 5px 3px #0f3443;overflow-y:auto}.preview-container{width:100%;height:auto;display:flex;justify-content:center;align-items:center;flex-direction:column;overflow-y:auto;gap:10px;& .name{width:100%;text-align:center;font-size:18px;font-weight:100}& button{width:40%;min-height:30px;height:40px}& .preview-img-container{position:relative;display:flex;justify-content:center;width:100%;height:auto;& img{width:50%;height:auto}& .album{position:relative;box-shadow:0 3px 5px #333;border:2px solid #0f3443;background-color:#fff;z-index:2}& .disc{position:absolute;left:35%;animation:discRotate 10s linear infinite;z-index:1}}}.input-container{display:flex;justify-content:center;align-items:center;flex-direction:column;width:96%;height:auto;gap:3px;& .input-msg{width:100%;height:50%;font-size:12px;color:#555;margin-bottom:8px;& h3{font-weight:300;color:#000}}.send-container{width:100%;height:50%;display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;& input[type=text]{width:70%;height:40px;border:1px solid #0f3443;padding-left:10px;background-color:#eee;outline:none;font-family:Arial,Helvetica,sans-serif}& button{width:30%;height:40px;border-left:0}}}.btn-grad{text-align:center;text-transform:uppercase;font-weight:100;transition:.5s;background-size:200% auto;border:1px solid #0f3443;box-shadow:0 0 2px 0 #777;color:#fff;background-image:linear-gradient(90deg,#0f3443 0,#12b675 51%,#0f3443);&:hover{background-position:100%}}@keyframes discRotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes previewView{0%{width:0}to{width:80%}}@media screen and (min-width:1024px){hr{display:none}.main-container{flex-direction:row;gap:0}.input-container{height:100%;width:100%;& .input-msg,& .send-container{width:90%;height:auto}}.preview-container{height:100%;width:80%;background:#137c75;color:#fff;animation:previewView 1s linear forwards;transition:all 1s;& p{font-size:clamp(1.5rem,2vw,2rem);font-weight:100}}}