body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background-color: #ffffff;
  margin:0;
  padding:0;
}

/* PAGE TITLE */
h1{
  text-align:center;
  color:green;
  margin-top:40px;
}

p.subtitle{
  text-align:center;
  color:#555;
  margin-bottom:30px;
}

/* REVIEW CARDS */
.reviews-container{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  justify-content:center;
  margin-bottom:40px;
  padding:20px;
}

.review-card{
  background:white;
  border-radius:10px;
  padding:20px;
  width:280px;
  box-shadow:2px 2px 10px rgba(0,0,0,0.1);
}

.review-card .stars{
  color:gold;
  font-size:20px;
  margin-bottom:8px;
}

.review-card .review-text{
  color:#444;
  font-size:14px;
  line-height:1.6;
  margin-bottom:12px;
}

.review-card .reviewer-name{
  font-weight:bold;
  color:green;
  font-size:14px;
}

.review-card .review-date{
  color:#aaa;
  font-size:12px;
}

/* FORM */
.form-container{
  background:white;
  border-radius:10px;
  padding:30px;
  max-width:500px;
  margin:0 auto 60px auto;
  box-shadow:2px 2px 10px rgba(0,0,0,0.1);
}

.form-container h2{
  color:green;
  margin-bottom:20px;
  text-align:center;
}

.form-container label{
  display:block;
  font-size:14px;
  color:#555;
  margin-bottom:5px;
  font-weight:bold;
}

.form-container input,
.form-container textarea{
  width:100%;
  padding:10px;
  border:1px solid #ccc;
  border-radius:8px;
  font-size:14px;
  margin-bottom:15px;
  box-sizing:border-box;
  font-family: inherit;
}

.form-container textarea{
  height:100px;
  resize:vertical;
}

/* STAR PICKER */
.star-picker{
  display:flex;
  gap:5px;
  margin-bottom:15px;
}

.star-picker span{
  font-size:30px;
  cursor:pointer;
  color:#ccc;
}

.star-picker span.selected{
  color:gold;
}

.form-container button{
  width:100%;
  padding:12px;
  background-color:green;
  color:white;
  border:none;
  border-radius:8px;
  font-size:16px;
  cursor:pointer;
}

.form-container button:hover{
  background-color:darkgreen;
}