:root { --accent: #ffcc00; --max: 760px; }
*{box-sizing:border-box}
body {
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;

  /* Background image setup */
  background: url("https://images.pexels.com/photos/3062553/pexels-photo-3062553.jpeg") 
              no-repeat center center fixed;
  background-size: cover;   /* ensures it stretches and fills */
}



.container{
  width:100%;
  max-width:var(--max);
  background:rgba(0,0,0,0.75); /* glass effect */
  padding:24px;
  border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,0.4);
  color:#fff;
}

h1{
  margin:0 0 18px;
  font-size:1.8rem;
  text-align:center;
  color:var(--accent);
}

.form .label{
  display:block;
  margin-bottom:14px;
  font-size:1rem;
}

.form input[type="text"], 
.form textarea{
  width:100%;
  padding:10px;
  border-radius:8px;
  border:1px solid #ccc;
  margin-top:6px;
  font-size:1rem;
}

textarea {
  resize: vertical;
}
.form select {
  width:100%;
  padding:10px;
  border-radius:8px;
  border:1px solid #ccc;
  margin-top:6px;
  font-size:1rem;
  background:#fff;
  color:#000;
}


.roles{
  border:1px dashed #aaa;
  padding:12px;
  border-radius:8px;
  margin:16px 0;
}

.roles label{
  display:block;          /* vertical layout */
  margin:8px 0;
  font-size:1rem;
  cursor:pointer;
  color:#fff;
}

.roles input[type="checkbox"] {
  margin-right:8px;
  transform: scale(1.2);  /* make checkbox bigger */
}

button{
  display:inline-block;
  background:var(--accent);
  color:#000;
  border:none;
  padding:12px 20px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
  width:100%;
  font-size:1rem;
}

button:hover{
  background:#ffdb4d;
}

.msg{
  margin-top:12px;
  color:lightgreen;
  font-size:.95rem;
  min-height:1.2em;
  text-align:center;
}