public/css/compose-style.css
:root {
  --uiclr: #009d84;
  --white: #e4e9fd;
  --black: #040c0e;
  --light-black: rgb(53, 50, 50);
}
.title {
  margin: 30px 0;
  color: var(--light-black);
}
main {
  margin: 0 3%;
}
.post-title input {
  width: 70%;
  height: 30px;
  border: none;
  outline: none;
  border-bottom: 2px solid gray;
  transition: 0.15;
  padding: 0 5px;
}
.post-title input:focus {
  border-color: var(--uiclr);
}
.post-content {
  margin-top: 2%;
}
.post-content textarea {
  width: 70%;
  border: 2px solid gray;
  outline: none;
  padding: 5px;
  transition: 0.15;
}
.post-content textarea:focus {
  border: 2px solid var(--uiclr);
}
.custom-file-input {
  margin: 1% 0;
  width: 70%;
}
.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: "⬆️Upload image";
  display: inline-block;
  background: #009d8345;
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10pt;
}
.custom-file-input:hover::before {
  border-color: black;
}
.custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}
.submit-button input {
  margin-top: 2%;
  padding: 8px 20px;
  font-size: 14pt;
  background-color: var(--uiclr);
  color: var(--white);
  outline: none;
  border: none;
  border-radius: 4px;
}
.submit-button input[type="reset"] {
  margin-top: 2%;
  padding: 8px 20px;
  font-size: 14pt;
  background-color: rgb(228, 8, 8);
  color: var(--white);
  outline: none;
  border: none;
  border-radius: 4px;
  margin-left: 1%;
}
.submit-button input:hover {
  opacity: 0.8;
}
@media only screen and (max-width: 600px) {
  .main {
    display: flex;
    justify-content: center;
  }
}
