.main-div {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 0;
  width: 100%;
}

@font-face {
  font-family: "Bahnschrift";
  src: url("fonts/Bahnschrift.woff2") format("woff2"),
    url("fonts/Bahnschrift.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  background-color: #191919;

  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: Bahnschrift;
  flex-direction: column;
}

#new-post {
  background-color: #141414;
  font-size: 18px;
  position: fixed;
  bottom: -320px;
  text-align: center;
  border-radius: 15px 15px 0 0;
  padding: 10px;
  width: 340px; /* Adjust width as needed */
  word-wrap: break-word;
}

#posts {
  display: flex;
  flex-direction: column; /* Set the flex direction to column */
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.post-box {
  background-color: transparent;
  width: 300px;
  border: 2px solid #19376d;
  color: white;
  margin-top: 10px;
  font-size: 16px;
  padding: 10px;
  border-radius: 15px;
}
#error {
  font-style: bold;
  color: tomato;

  font-size: small;
}

#post-error {
  font-style: bold;
  color: tomato;

  font-size: small;
}

#message {
  width: 100%;
  margin-top: 10px;
  resize: none;
  margin-left: -6px;
  background-color: rgb(45, 45, 45);
  border: 2px solid #576cbc;
  color: white;
  font-size: larger;
  border-radius: 25px;
  padding-left: 8px;
  padding-top: 8px;
}
#message::active {
  border: 3px solid blueviolet;
}

#username {
  width: 100%;
  margin-left: -4px;
  border-radius: 25px;
  height: 40px;
  font-size: larger;
  background-color: rgb(45, 45, 45);
  border: 2px solid #576cbc;
  color: white;
  padding-left: 10px;
}

#postBtn {
  width: 100%;
  background-color: #576cbc;
  color: white;
  font-size: 24px;
  border: none;
  height: 40px;

  border-radius: 25px;
}

.empty {
  height: 70px;
  background-color: azure;
}
.userid {
  color: #576cbc;
  font-size: 20px;
  margin-bottom: -10px;
}

.postrank {
  color: #576cbc;
  font-size: 18px;
  margin-bottom: -10px;
}

.postdate {
  color: rgb(90, 90, 90);
  font-size: 14px;
}

.postdateBest {
  color: rgb(120, 120, 120);
  font-size: 18px;
}

.postmsg {
  width: 300px;
  word-wrap: break-word;
}

#newpostheader {
  color: white;
  background-color: hsl(195, 59%, 60%);
  width: 150px;
  border: none;
  font-size: 18px;
  border-radius: 25px;
  margin-bottom: 20px;
  margin-top: 10px;
  padding: 3px;
}

.newpostheadershow {
  animation-name: newpostheaderchose;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.newpostshow {
  animation-name: newpostshow;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.newpostheaderhide {
  animation-name: newpostheaderunchose;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.newposthide {
  animation-name: newposthide;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
#newpostheadericon {
  fill: white;
}

@keyframes newpostheaderchose {
  from {
    color: white;
    background-color: hsl(195, 59%, 60%);
    fill: white;
  }
  to {
    color: #a5d7e8;
    background-color: transparent;
    fill: hsl(195, 59%, 60%);
  }
}

@keyframes newpostheaderunchose {
  from {
    color: #a5d7e8;
    background-color: transparent;
    fill: hsl(195, 59%, 60%);
  }
  to {
    color: white;
    background-color: hsl(195, 59%, 60%);
    fill: white;
  }
}

@keyframes newpostshow {
  from {
    bottom: -320px;
  }
  to {
    bottom: 0px;
  }
}

@keyframes newposthide {
  from {
    bottom: -0px;
  }
  to {
    bottom: -320px;
  }
}

#site-header {
  color: white;
  width: 340px;
  background-color: #576cbc;
  text-align: center;

  text-justify: inter-cluster;
  padding: 8px;
  border-radius: 0 0 15px 15px;
  font-size: 18px;
  font-weight: 600;
  position: absolute;
  top: 0;
}

#site-header-margin {
  width: 355px;
  height: 70px;
  border-radius: 15px;
  background-color: #19376d;
  position: absolute;
  top: 0;
}

#site-header-margin-margin {
  width: 355px;
  height: 70px;

  top: 0;
}

#site-header-margin button {
  width: 118px;
  height: 30px;
  border-radius: 15px;
  text-align: center;

  background-color: #19376d;
  margin-top: 40px;
  border: none;
  color: hsl(0, 0%, 80%);
  text-decoration: underline hsl(195, 59%, 60%) 2px;
  text-underline-offset: 5px;
  font-size: 14px;
}

#site-header-margin button:hover {
  color: white;
}

.reactions button {
  border: none;
  border-radius: 10px;
  padding: 3px;
  font-size: 13px;
  margin-left: 7px;
  color: white;
  background-color: #272727;
}

.reactions button:hover {
  background-color: #404040;
}

.timer-box {
  width: 300px;
  background-color: hsl(195, 59%, 60%);

  color: white;
  margin-top: 10px;
  margin-bottom: -24px;
  font-size: 16px;
  padding: 10px;
  border-radius: 15px;
}

.postdateBestlable {
  color: rgb(0, 0, 0);
  font-size: 18px;
}

#postdateBestTimer {
  color: #141414;
  background-color: white;
  border-radius: 15px;
  font-size: 24px;
  width: 107px;
  padding: 5px 10px;
}

#postdateBestTimerShowMore {
  color: #19376d;
  text-decoration: underline;
}