html,
body {
  font-family: "Roboto", sans-serif;
  background: #fafafa;
  color: #4c4c4c;
}

.appbar {
  background: #f7d736;
  height: 70px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

.logo { height: 45px; }

.subtitle {
  font-size: 18px;
  font-weight: 500;
  color: #2c2c2c;
}

.container {
  max-width: 1320px;
  margin: 22px auto;
  padding: 0 20px;
}


.form-card {
  background: #fff;
  padding: 18px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  margin: 0 auto 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 600px;
}

.form-card-title,
.autoresize {
  width: 100%;
  padding: 10px 12px;
  border: none;
  font-size: 16px;
  background: transparent;
  outline: none;
  box-shadow: none;
}

.form-card-title::placeholder,
.autoresize::placeholder {
  color: #777;
}

.form-card-title:focus,
.autoresize:focus {
  outline: none;
  box-shadow: none;
  background: transparent;
}

.btn {
  background: #f7d736;
  border: none;
  padding: 12px;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
  width: 100%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.btn:hover { background: #e0d426; }


.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  column-gap: 20px;
  row-gap: 14px;
  align-items: start;
  justify-content: center;
}

.card {
  padding: 18px;
  border-radius: 10px;
  box-shadow: 0 16px 28px rgba(0,0,0,0.22);
  font-family: "Permanent Marker", cursive;
  transition: transform .16s ease, box-shadow .16s ease;
  align-self: start;
}

.card-color-1 { background: #ead3a7; }
.card-color-2 { background: #9de0f5; }
.card-color-3 { background: #ef89ba; }
.card-color-4 { background: #fae890; }
.card-color-5 { background: #abe9c1; }

.card-rotation-1  { transform: rotate(-1.2deg); }
.card-rotation-2  { transform: rotate(-0.8deg); }
.card-rotation-3  { transform: rotate(0.9deg); }
.card-rotation-4  { transform: rotate(0.6deg); }
.card-rotation-5  { transform: rotate(-0.7deg); }
.card-rotation-6  { transform: rotate(1deg); }
.card-rotation-7  { transform: rotate(-0.9deg); }
.card-rotation-8  { transform: rotate(0.7deg); }
.card-rotation-9  { transform: rotate(-0.6deg); }
.card-rotation-10 { transform: rotate(1.1deg); }
.card-rotation-11 { transform: rotate(-1deg); }

.card:hover {
  transform: translateY(-2px) rotate(0deg);
  box-shadow: 0 22px 34px rgba(0,0,0,0.28);
}

.card-title {
  color: #000;
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 900;
}

.card-content { color: #4c4c4c; }

.card-content p {
  font-size: 15px;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .card-container { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

@media (max-width: 620px) {
  .form-card { margin-bottom: 20px; }
  .card-container { column-gap: 16px; row-gap: 12px; }
}