vueJs/css/css.css

body { padding: 3%; }

form {
  width: 93%;
  border-radius: 10px;
  box-shadow: 10px 10px 20px 10px #a9b0b8;
  padding: 3%;
  display: flex; flex-direction: column;
  gap: 3%;
}
.form_cont { font-size: 14pt; margin-left: 4%; display: grid; gap: 2%; }
.tex { grid-template-columns: 20% 70%; }
.tex > div > input { margin-right: 4%; }
.check { grid-template-columns: 20% 50px; }
form > div > label { text-align: right; }
button {
  width: 50%;
  margin-left: 25%; margin-top: 2%; padding: 10px;
  border-radius: 10px;
}
button:hover { background-color: #a9b0b8; }

.notes {
  width: 93%;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2%;
  margin-top: 5%; margin-left: 2%;
}

.note {
  border-radius: 10px; border-top-left-radius: 0; border: 3px solid white;
  box-shadow: 10px 10px 20px 5px #a9b0b8;
  text-align: center;
  padding: 20px;
}
.topic_box {
  width: 100%;
  display: grid; grid-template-columns: 10% 90%;
}
.topic_box > div { padding-top: 15px; font-size: 10pt; }
.topic_box > button { width: 70%; }