body{
background:#fff8ef;
font-family:'Libre Baskerville', serif;
margin:0;
}

.wrapper{
max-width:900px;
margin:40px auto;
background:#fffdf7;
border-radius:14px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

/* HEADER */

.header{
background:#d32b2b;
color:white;
text-align:center;
padding:40px 20px;
position:relative;
border-top:6px solid #fff8ef;
border-bottom:6px solid #fff8ef;
}

.header h1{
margin:0;
font-size:48px;
letter-spacing:2px;
}

.header p{
margin:5px 0 0 0;
font-style:italic;
}

.header::after{
content:"";
display:block;
height:20px;
background:
linear-gradient(-45deg,#fff8ef 10px,transparent 10px),
linear-gradient(45deg,#fff8ef 10px,transparent 10px);
background-size:20px 20px;
background-position:left bottom;
}

/* NAVIGATION */

.nav{
text-align:center;
padding:20px;
}

.nav a{
display:inline-block;
background:#d32b2b;
color:white;
text-decoration:none;
padding:10px 20px;
margin:6px;
border-bottom:none;
border-radius:30px;
box-shadow:
0 3px 6px rgba(0,0,0,0.2),
inset 0 2px 0 rgba(255,255,255,0.35);
font-weight:bold;
}

.nav a:hover{
transform:translateY(-2px);
box-shadow:
0 5px 10px rgba(0,0,0,0.25),
inset 0 2px 0 rgba(255,255,255,0.4);
}

/* CONTENT */

.content{
padding:30px 40px;
text-align:center;
}

.content h2{
color:#d32b2b;
margin-top:10px;
}

.content p{
max-width:650px;
margin:auto;
}

.content input[type="text"],
.content input[type="email"],
.content input[type="password"],
.content select {
  width: 100%;
  max-width: 350px;
  padding: 8px 10px;
  margin: 5px 0 12px;

  border: 1px solid #e5d6c8;
  border-radius: 8px;

  background: #fff;
  font-family: inherit;
  font-size: 14px;

  box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
  transition: all 0.2s ease;
}

.content input:focus,
.content select:focus {
  outline: none;
  border-color: #d32b2b;
  box-shadow: 0 0 0 2px rgba(211,43,43,0.15);
}

.content input[type="submit"] {
  background: #d32b2b;
  color: white;
  border: none;

  padding: 10px 20px;
  border-radius: 30px;

  font-weight: bold;
  cursor: pointer;

  box-shadow:
    0 3px 6px rgba(0,0,0,0.2),
    inset 0 2px 0 rgba(255,255,255,0.35);

  transition: all 0.2s ease;
}

.content input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow:
    0 5px 10px rgba(0,0,0,0.25),
    inset 0 2px 0 rgba(255,255,255,0.4);
}

/* MEMBERS GRID */
.members {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 220px));
  justify-content: center;
  gap: 20px;
}

/* Non-member elements (dropdown + text) */
.members > *:not(.member) {
  grid-column: 1 / -1;
  text-align: center;
  margin-bottom: 10px;
}

.member {
  background: #fff8ef;
  padding: 12px;
  border-radius: 10px;
  text-align: center;
  margin-top: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  transition: all 0.2s ease;
}

.member:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.member strong {
  display: block;
  color: #d32b2b;
  font-size: 16px;
  margin-bottom: 4px;
}

.member .country {
  display: block;
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
}

.member .meta {
  font-size: 13px;
}

.member::before {
  content: "♡";
  display: block;
  color: #d32b2b;
  font-size: 12px;
  margin-bottom: 5px;
}

/* DIVIDER */

.divider{
letter-spacing:6px;
color:#d32b2b;
margin:25px 0;
}

/* FOOTER */

.footer{
background:#d32b2b;
color:white;
text-align:center;
padding:15px;
font-size:14px;
border-top:6px solid #fff8ef;
}

.footer::before{
content:"";
display:block;
height:20px;
background:
linear-gradient(-45deg,#fff8ef 10px,transparent 10px),
linear-gradient(45deg,#fff8ef 10px,transparent 10px);
background-size:20px 20px;
}

a{
color:#c62828;
text-decoration:none;
border-bottom:1px dotted #c62828;
}

a:hover{
color:#8e1d1d;
border-bottom:1px solid #8e1d1d;
}

/* FORM */

form {
  max-width: 500px;
  margin: 20px auto;
  text-align: left;
  line-height: 1.6;
}

form label {
  display: block;
  margin-top: 10px;
  font-weight: bold;
}