* { box-sizing: border-box; } body { font-family: Arial, sans-serif; padding: 20px; margin: 0; background: #000; color: ; } .container { max-width: 600px; margin: auto; background: #222; padding: 80px 20px 20px 20px; box-shadow: 0 0 10px rgba(255, 255, 255, 0.3); border-radius: 8px; } label { display: block; margin-top: 10px; font-weight: bold; color: #fff; } input, textarea { width: 100%; padding: 10px; margin-top: 5px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; background: linear-gradient(90deg, #333 0%, #444 100%); color: #fff; } select { background: #333; /* fallback for old browsers */ background: linear-gradient(90deg, #333 0%, #444 100%); color: #fff; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; padding: 10px; margin-top: 5px; width: 100%; box-sizing: border-box; appearance: none; /* Remove default arrow styling */ -webkit-appearance: none; -moz-appearance: none; } select:focus, input:focus, textarea:focus { outline: 2px solid #46349f; border-color: #46349f; } button { margin-top: 20px; padding: 12px; font-size: 16px; background: linear-gradient(90deg, #46349f 0%, #ea463c 100%); color: white; border: none; border-radius: 4px; cursor: pointer; transition: 0.2s ease-in-out; } .container button { width: 100%; } button:hover { background-color: #ccc; color: #222; transition: 0.2s ease-in-out; } textarea { resize: vertical; min-height: 80px; } @media (max-width: 768px) { .container { padding: 15px; } input, select, textarea { font-size: 15px; } } @media (max-width: 480px) { .container button { font-size: 14px; padding: 10px; } } /*fonts*/ h2.maintitle { text-align: center; color: #fff; } /*top bar*/ .top-bar { position: fixed; top: 0; left: 0; width: 100%; background: #fff; z-index: 9999; border-bottom: 1px solid #ddd; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); padding: 10px 0; } .top-bar-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: flex-end; align-items: center; gap: 10px; } .top-bar-inner button { display: inline-block !important; width: auto !important; padding: 10px 16px; font-size: 15px; margin: 0; } .top-bar-inner .top-button { all: unset; display: inline-block; background: #007bff; color: white; padding: 10px 16px; font-size: 15px; border-radius: 4px; cursor: pointer; margin: 0; } .top-bar-inner .top-button:hover { background: #0056b3; } @media (max-width: 480px) { .top-bar-inner .top-button { font-size: 14px; padding: 8px 12px; } } /* FINAL override — force flex layout for header buttons */ .top-bar { position: fixed; top: 0; left: 0; width: 100%; background: #fff; z-index: 10000; border-bottom: 1px solid #ddd; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); padding: 10px 0; } .top-bar-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .button-row { display: flex; justify-content: flex-end; alighn-items: center; gap: 10px; } .button-row button { all: unset; display: inline-block; background: linear-gradient(90deg, #46349f 0%, #ea463c 100%); color: white; padding: 10px 16px; font-size: 15px; border-radius: 4px; cursor: pointer; transition: 0.2s ease-in-out; } .button-row button:hover { background: #ccc; color: #222; transition: 0.2s ease-in-out; } @media (max-width: 600px) { .button-row { flex-direction: column; align-items: stretch; } .button-row button { width: 100%; text-align: center; } } /* Add to /css/style-main.css or inside */ .reg-input { background: #ffe600; color: #222; font-weight: bold; font-size: 2rem; letter-spacing: 0.2em; border: 2px solid #222; border-radius: 6px; text-align: center; width: 100%; max-width: 320px; display: block; margin: 0 auto 20px auto; box-sizing: border-box; height: 60px; vertical-align: middle; } .reg-input::placeholder { color: #222; opacity: 1; font-weight: bold; text-align: center; letter-spacing: 0.1em; }