a:visited{
    color: rgb(255, 43, 216);
}

a:link{
    color: rgb(124, 128, 10);
}

.post-avatar {
  max-height: 48px;
  height: 48px;
  width: 48px;
  max-width: 48px;
  margin-left: 0.2em;
  /**
  clip-path: circle(40%);
  */
  overflow: hidden;
  border-radius: 24px;
  /**
  position: relative;
  left: -0.5em;
  */
  margin-right: 0.3em;
}

.post-header {
  display: flex;
  align-items: center;
  justify-content: start;
  padding-bottom: 0.4em;
  margin-bottom: 0.3em;
  border-bottom-style: solid;
  border-bottom-color: #45134f;
  border-bottom-width: 0.1em;
}

.post {
  display: flex;
  flex-direction: column;
  border-style: solid;
  border-radius: 4%;
  padding: 0.5em;
  border-color: blueviolet;
  background-color: rgb(167, 113, 217);
  border-width: 0.24em;
  width: 30em;
  max-width: 30em;
}

.post-content {
  word-break: break-word;
}

.post-name {
  margin-left: auto;
  flex: auto;
}

.post-time {
  flex: auto;
}

.post-footer {
  display: flex;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  margin-top: 0.4em;
  border-top-style: solid;
  border-top-color: #45134f;
  border-top-width: 0.1em;

}

.post-footer div {
  flex: auto;
}

.post-button-wrap {
  align-self: end;
  text-align: end;
}

.post-button {
  align-self: end;
  text-align: end;

  background-color: rgb(167, 113, 217);
  border-color: #45134f;
}

.post-button:hover {
  cursor: pointer;
  background-color: rgba(240, 248, 255, 0.346);
  border-color: #581f638b;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #45134f;
  margin: 1em 0;
  padding: 0;
}



.game * {
  z-index: 3;
}

.game {

  /**width: 100%; */
  height: 100%;
  display: flex;
  flex-direction: column;
  /**padding: 8px; */
  background-size: cover;
  background-position: center;
  color: rgb(239, 255, 175);

  /**
  text-shadow: rgb(0, 0, 0) 10 px,;
  -webkit-text-stroke-color:rgb(255, 255, 255);
	-webkit-text-stroke-width:1px;
  */
}

.game-container {
  margin-left: auto;
  margin-right: auto;
}

.choice-container {
  margin-left: auto;
  margin-right: auto;
  margin-top: 10vh;
  background-color: #350f3df3;
  border-style: solid;
  border-color: #8e1fa4;
  padding: 3px;
  border-radius: 4%;
}

.choices {

  border-style: solid;
  width: fit-content;
  align-self: center;
  position: relative;

}

.choice {
  width: 100%;
  padding: 0.1em;
}

.choice-button {
  width: inherit;
  cursor: pointer;
  background-color: inherit;
  border-left: 0;
  border-right: 0;
  color: rgb(239, 255, 175);
  align-self: center;

}

html {
  height: 100%;
}

body {
  margin: 0%;
  height: 100%;
}

main {
  height: 100%;
}

h1 {
  font-size: larger;
  font-weight: bold;
  margin: auto;
  font-family: sans-serif;
}


.scenariotextbox {
  background-color: #350f3df3;
  border-style: solid;
  border-color: #8e1fa4;
  padding: 10px;
  width: fit-content;

  margin-left: auto;
  margin-right: auto;
  margin-top: 17vh;

  max-width: 50%;
  font-size: large;
}

.navigation {
  display: flex;
  flex-direction: row;
  flex: auto;
  padding: 8px;
  background-color: #d04fea;
}

.f1 {
  width: fit-content;
  margin-left: auto;
}

.title {
  font-size: larger;
  text-align: center;
}

.scenariochoiceBox {
  width: fit-content;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  max-width: 50%;
  display: flex;
  flex-direction: column;
}

.choice-content {
  padding: 10px;
}


.next-button {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2em;
  background-color: #350f3df3;
  color: rgb(239, 255, 175);
  padding: 0.3em;
  padding: 1em;
  border-radius: 100%;
  font-size: small;
}

/** 
.next-button {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2em;
  background-color: transparent;
  border-style: none;
  padding: 0.3em;
  border-radius: 40%;
}

.next-button::after {
  content: url("/images/arrowRight.png");

}*/

.next-button:hover {
  cursor: pointer;
  }
  

.next-link {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.aimless {
  user-select: none;
  z-index: 4;
  position: absolute;

}


.animation-box {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.vignette {
  /** offset-x offset-y blur-radius spread-radius */
  box-shadow: 0 0 200px 10px rgba(0, 0, 0, 0.9) inset;
}


.ThankYou {
  display: flex;
  flex-direction: row;
}

.star1,
.star2 {
  animation: starrot 0.5s ease-in-out 0s infinite alternate;
}

@keyframes starrot {
  from {
    rotate: -30deg;
  }

  to {
    rotate: 30deg;
  }

}