styles.min.css

body {margin: 0;height: 100%;font-size: 1rem;overflow-x: hidden;font-family: "Poppins", sans-serif;}.container {padding: 1rem 1rem;display: block;}.center_all {gap: 1rem;display: flex;align-items: center;flex-direction: column;justify-content: center;}main {padding: 0;display: flex;align-items: center;justify-content: center;}.hero { margin-top: 2rem; gap: 1rem;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;background: #dec55d;width: max-content;height: 25rem;border-radius: 1rem;}.logo {transform: rotate(-90deg);}form {padding: 0 1rem;gap: 0.4rem;display: flex;align-items: center;flex-direction: column;justify-content: center;}input, textarea {outline: none;width: 100%;padding: 1rem 1rem;border-radius: .4rem;border: 1px solid #dec55d;}b {color: rgb(50, 156, 255);}span {border-radius: 1rem;}.capture-area {border-radius: 1rem;height: 100%;width: 390px;overflow: hidden;display: flex;align-items: center;justify-content: center;}#captureArea {height: 844px;width: 390px;gap: 0.4rem;padding: 0 1rem;border: none;color: white;display: flex;align-items: flex-start;flex-direction: column;justify-content: center;background: url(./bg.svg);background-size: cover;background-position: center center;}#pNameDisplayContainer, #uNameDisplayContainer, #msgDisplay {padding: 4px 1rem;border: 1px solid white;}#msgDisplay {border: none;}#captureBtn {border: none;outline: none;color: white;cursor: pointer;background: black;width: 100%;font-weight: 600;padding: 1rem 0;margin-bottom: 20px;border-radius: 1rem;letter-spacing: 0.1rem;}#screenshotsContainerchild {gap: 0.4rem;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;width: 950px;}.screenshot {width: 100%;flex-grow: 1;max-width: max-content;img {width: 14rem;height: 15rem;border-radius: 1rem;object-fit: cover;}}.scrnshtText,.logo {font-weight: 800;font-size: 2rem;}.screenshotText {text-align: center;align-items: center;justify-content: center;}.screenshotText.hide {display: none;}code {text-align: center;}@media screen and (max-width: 768px ) {main {padding: 0;height: 100%;width: 100%;}.hero {margin-top: 0; width: 100%;height: 100%;align-items: center;justify-content: center;flex-direction: column;border-top-left-radius: 0;border-top-right-radius: 0;}.capture-area {height: 400px;width: max-content;order: -1;}#captureArea {width: 12rem;height: 100%;padding: 0 2rem;}.screenshot {flex-grow: 1;max-width: max-content;img {width: 270px;}}.screenshotText {text-align: center;}#screenshotsContainer {padding: 0;width: 100%;}#screenshotsContainerchild {width: 98%;padding: 1rem;}.logo {order: -1;transform: rotate(0);}}