.fantasy span,
.fantasy:after,
#forum .double:after {
  display: inline-block;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}
.fantasy:after,
#forum .double:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
}
.fantasy {
  background-color: #600;
  border-width: 0.15em;
  border-style: outset outset outset inset;
  border-color: #fb2;
  border-radius: 2px;
  box-shadow: 0 0 0.09375em #000;
}
.fantasy:after {
  box-shadow: 0 0 0.25em 0.25em rgba(0, 0, 0, 0.5) inset;
}
#forum .double {
  position: relative;
  border: 0.2em double #fb2;
}
#forum .double:after {
  box-shadow: 0 0 0.25em 0.2em rgba(0, 0, 0, 0.7) inset;
}

#pigeonnier {
  font-family: "MedievalSharp", serif;
  color: cornsilk;
}

#pigeonnier h3 {
  font-family: "ancient", serif;
  font-size: 3em;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  text-align: center;
  margin: auto;
  padding-top: 1em;
}

#pigeonnier-welcome {
  margin: 0 auto;
  text-align: justify;
  /*background-image: url("../static/parchment.jpg");
  background-attachment: scroll;
  background-position: center center;*/
  font-size: 1.1em;
  /*font-family: "ancient", serif;*/
  padding: 0.5em;
}
#form h3 .team {
  letter-spacing: 10px;
}

#pigeonnier .team-members h4 {
  font-size: 1.15em;
  color: rgb(157, 118, 77);
  margin: 0;
  font-family: MedievalSharp, serif;
}

#pigeonnier .team-members #team-list {
  list-style: none;
  margin: 2% 0;
}

#new-discussion h4 {
  display: flex;
  align-items: center;
  color: darkred;
  text-shadow: -2px 2px 4px rgba(0, 0, 0, 0.75);
  margin: 4%;
  padding: 2% 10%;
  --inlay-bg: rgba(255, 248, 220, 0.15) !important;
  --inlay-hover-opacity: 0.7 !important;
}

#new-discussion h4 span {
  flex-grow: 1;
  font-size: 3em;
}
@media (max-width: 600px) {
  #new-discussion h4 span {
    font-size: 2em;
  }
}
#new-discussion form {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  padding: 0 5%;
  margin: 2% 0;
}

#new-discussion form input {
  background: rgba(255, 255, 255, 0.2);
  outline: none;
  border: none;
  border-bottom: 2px solid black;
  padding: 0.2em;
  margin: 2%;
}

#new-discussion form input::placeholder {
  color: rgba(0, 0, 0, 0.3);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

#new-discussion form label {
  font-size: 1.2em;
  color: khaki;
  text-align: center;
  animation: glow 1s ease-in-out infinite alternate;
  padding-bottom: 0.5em;
}

.msg-box {
  border: 1px solid #ffffff9b;
  padding: 2%;
  margin: 75px 5%;
  box-shadow: 0 0 10px 2px chocolate;
  border-radius: 0.4em;
  background: rgba(255, 249, 240, 0.2);
}

#message-area {
  padding: 0 2%;
}

#new-discussion textarea {
  outline: none;
  min-height: 30vh;
  border: none;
  width: 100%;
  padding: 5%;
  font-family: MedievalSharp, serif;
  font-size: 1.3em;
}

/* On voit rien sinon */
#new-discussion textarea::placeholder {
  color: rgba(0, 0, 0, 0.7);
}

#new-discussion button[type="submit"] {
  text-align: center;
  font-size: 2em;
  font-weight: bold;
  letter-spacing: 2px;
  background-repeat: repeat;
  background-size: auto;
  background-attachment: scroll;
  box-shadow: 0 0 10px 2px chocolate;
  margin: 2% auto;
}

#new-discussion button[type="submit"] .licorne {
  display: none;
}

#new-discussion form[state="loading"] button[type="submit"] {
  text-align: left;
  padding: 0;
}
#new-discussion form[state="loading"] button[type="submit"] span {
  display: none;
}
#new-discussion form[state="loading"] button[type="submit"] .licorne {
  display: inline;
}

@keyframes loadingTraverse {
  0% {
    transform: scaleX(-1);
  }
  49% {
    transform: scaleX(-1);
  }
  50% {
    transform: scaleX(1);
    margin-left: calc(100% - var(--licorne-width));
  }
  99% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(-1);
    margin-left: 0;
  }
}

.template {
  display: none;
}

#discussion-list {
  scroll-snap-type: both mandatory;
  max-height: 100vh;
  overflow-y: scroll;
  overflow-x: visible;
  margin: 0 -1em;
  padding: 0 1em;
}
#discussion-list[state="loading"] {
  display: none;
}
#loading-discussion-list {
  display: none;
}
#discussion-list[state="loading"] + #loading-discussion-list {
  display: block;
  width: 100%;
}

#empty-discussion {
  display: none;
  text-align: center;
  font-size: 2em;
}
#empty-discussion h4 {
  font-family: "MedievalSharp", serif;
}
.discussion-preview {
  border-radius: 0.4em;
  scroll-snap-align: start;
  scroll-margin: 1em 0;
  transition: all 0.3s ease;
}

.discussion-preview:hover {
  background: rgba(255, 249, 240, 0.1);
}

.discussion-preview h4 {
  font-family: "ancient", serif;
  display: flex;
  align-items: center;
  gap: 3%;
  font-size: 2em;
  color: khaki;
  margin: 0 0 2%;
}
.discussion-preview [role="author"] {
  font-size: 1.2em;
}
.discussion-preview [role="last-author"] {
  font-weight: bold;
}
.discussion-preview .infos {
  opacity: 0.8;
  margin: 0;
  position: relative;
}

.discussion-preview .infos [role="msg-number"] {
  position: absolute;
  right: 0;
  top: 0;
}

.discussion-preview .additional-info {
  font-weight: light;
  font-size: 0.8em;
}
#focused-discussion {
  display: none;
}
#focused-discussion[state="loading"] {
  display: none !important;
}
#focused-discussion .message-wrapper {
  --border-bg: khaki !important;
  --inlay-bg: rgba(255, 255, 255, 0.2) !important;
  --outline-color: transparent !important;
  margin: 5% auto;
  font-family: "ancient", serif;
  padding: 2%;
}
#loading-focused-discussion {
  display: none;
}
#focused-discussion[state="loading"] + #loading-focused-discussion {
  display: block;
  width: 100%;
}

#focused-discussion [role="go-back"],
#loading-focused-discussion [role="go-back"] {
  text-align: center;
  letter-spacing: 1px;
  padding-bottom: 1%;
  border-bottom: 1px solid cornsilk;
  width: fit-content;
  color: cornsilk;
  font-family: "MedievalSharp", serif;
}

.discussion-title {
  display: flex;
  font-family: "ancient", serif;
  align-items: center;
  gap: 3%;
  color: khaki;
  text-align: left;
  margin: 0 0 2% 1%;
  font-size: 4em;
  font-weight: lighter;
  letter-spacing: 1px;
  text-shadow: 2px 2px 4px rgb(141 66 1 / 90%);
}

#discussion-messages {
  max-height: 100vh;
  scroll-snap-type: both mandatory;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

#discussion-messages .message {
  max-width: 48%;
  min-width: 48%;
  font-size: 1.1em;
  scroll-snap-align: end;
  scroll-margin-bottom: 3px;
}
#discussion-messages .message p {
  margin: 0;
}
#discussion-messages .message.self-message {
  align-self: end;
}

#discussion-messages .message [role="author"] {
  font-size: 0.8em;
  color: cornsilk;
  letter-spacing: 1px;
  padding-bottom: 0.2em;
}
.forum-msg {
  padding: 2%;
  border-radius: 0.3em;
  color: #241301;
  font-family: "MedievalSharp", serif;
}

#focused-discussion #new-message {
  display: flex;
  gap: 2%;
  margin-top: 2%;
}
#focused-discussion #new-message textarea {
  flex-grow: 1;
  padding: 0.1em;
  border: none;
  outline: none;
  background: #ffffff86;
  font-size: 1.2em;
  font-family: "MedievalSharp", serif;
}
#focused-discussion #new-message button {
  font-weight: bold;
  color: cornsilk;
  letter-spacing: 2px;
  font-family: "MedievalSharp", serif;
  background-repeat: repeat;
  background-size: auto;
  background-attachment: scroll;
  background-image: url("../static/wall.jpg");
  box-shadow: 0 0 10px 2px chocolate;
  padding: 0 2%;
}

#focused-discussion #new-message .licorne {
  display: none;
}
#focused-discussion #new-message[state="loading"] > * {
  display: none;
}
#focused-discussion #new-message[state="loading"] .licorne {
  display: inline;
}

.loading.licorne {
  animation: loadingTraverse 3s ease-in-out infinite;
}