@import url("https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@300..900&");

/* General syles */

#footer {
  margin-top: 10;
}

/* buttons */

#forum-buttons-container {
  display: flex;
  justify-content: space-around;
  margin-bottom:5px;
  width: 100%;
}

.forum-button {
  border-radius: 20px;
  padding: 5px 10px;
  cursor: pointer;
  background-color: transparent;
      border: outset 3px #71bbe9
}

.buttons-container {
  display: flex;
  justify-content: left;
}


.green-button:hover {
  border: solid #f5ce45 2px;
  color: #33c15b;
}

.green-button:active {
  box-shadow: 0 0 10px #33c15b;
  color: white;
}

/* header */

h1 {
  text-align: center;
  border: solid #13132a 15px;
  padding: 0px 20px 0px 20px;
  z-index: 2;
}

#forum-header {
  display: flex;
  justify-content: center;
  z-index: 2;
}

/* Page Navigation */

.message-board-navigation {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-top: 30px;
}

#page-navigation {
  width: 100%;
}

.dummy-link {
  color: transparent;
}

.page-link {
  color: #fb2271;
  border-radius: 5px;
  background-color: #febe38;
  margin-top: 5px;
}

/* message board list */

#forum-container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: transparent;
  margin-top: -30px;
}

#posts-list {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.post-wrapper {
  display: flex;
  width: 100%;
  align-items: center;
}

.post-container {
     border:solid 2px transparent; 
  position: relative;
  background: #13132a;
  border-radius: 10px;
  padding: 10px;
  margin: 10px;
  width: 100%;
  box-shadow: 0 0 8px #227e3c;
  cursor: pointer;
}

.post-container:hover{
    border:solid 2px #33c15b;   
    box-shadow: 0 0 12px #33c15b;
}

.post-title {
  text-align: left;
  width: 100%;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.post-details {
  display: flex;
  justify-content: space-between;
  font-size: 80%;
  width: 100%;
}

.post-details span {
  white-space: nowrap;
}

.posted-by {
  white-space: nowrap;
  display: flex;
  font-size: 80%;
  justify-content: right;
  width: 100%;
}

.star {
  width: 30px;
  height: 30px;
  color: white;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  font-size: 70%;
  text-align: center;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.unread {
  position: absolute;
  left: -30px;
  bottom: 30px;
  display: inline-block;
  border-radius: 50%;
  height: 15px;
  width: 15px;
  box-shadow: 0 0 10px #33c15b;
}

.read {
  border: solid 2px grey;
  position: absolute;
  left: -30px;
  bottom: 30px;
  display: inline-block;
  border-radius: 50%;
  height: 15px;
  width: 15px;
}

.purple {
  color: #6f4099;
}

.message-board {
  width: 100%;
}

/* Message Board Styles */


@media screen and (max-width: 578px) {
  .post-container {
    max-width: 300px;
  }
  .post-title {
    max-width: 310px;
    margin-right: 0px;
  }

  .post-details {
    font-size: 60%;
    .post-title {
      font-size: 90%;
      max-width: 270px;
    }

    .player-name {
      width: 60px;
    }
  }
}