/* styles.css */ body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; color: #333; } .container { width: 80%; margin: auto; overflow: hidden; } h1 { text-align: center; margin-top: 20px; } .section { background: #fff; margin: 20px 0; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } label { display: block; margin-bottom: 8px; font-weight: bold; } input, select, textarea { width: calc(100% - 22px); padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; } textarea { resize: vertical; } #preview { border: 1px solid #ccc; padding: 20px; height: 200px; overflow-y: auto; background-color: #f9f9f9; } /* Tooltips and help text */ .tooltip { position: relative; display: inline-block; cursor: pointer; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 125%; /* Position above the text */ left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }