@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap');

* {
	font-family: "Roboto", sans-serif;

  margin: 0;
  padding: 0;
}

body {
  background:
  radial-gradient(black 15%, transparent 16%) 0 0,
  radial-gradient(black 15%, transparent 16%) 8px 8px,
  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
  background-color:#1b1b1b;
  background-size:16px 16px;
}

.page-wrapper {
  width: 1200px;
  margin: 0 auto;
  filter: drop-shadow(0 0 15px rgb(0, 0, 0));
  background-color: #292726;
}

.container {
  color: #fff;
  max-width: 1200px;
}

.header {
  background: linear-gradient(to right, #6f6866, #57504e);
  border-bottom: 1px solid #928d8b;
  padding: 10px;
}

.spread {
  display: grid;
  grid-template-columns: max-content auto auto;
  column-gap: 10px;
}

.title {
  color: #fff;
}

.author {
  margin: auto 0;
  color: #c8c8c8;
}

.version {
  margin-left: auto;
  margin-top: auto;
  margin-bottom: auto;
  color: #9e9e9e;
}

.main {
  padding: 10px;
  background: linear-gradient(to right, #38302e, #2e2826);
}

.introduction {
  background-color: #38302e;
}

.sfx-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 5px;
  row-gap: 7px;
}

.sfx-list li {
  display: grid;
  grid-template-columns: 28px 1fr 25px;
}

.play-button {
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  width: 28px;
  height: 28px;
  text-align: center;
  padding-left: 5px;
  border-color: 1px solid #fff;
	background:  linear-gradient(to bottom, #eae0c2 5%, #ccc2a6 100%);
	background-color: #eae0c2;
	border: 2px solid #333029;
	cursor: pointer;
	color: #505739;
	text-decoration: none;
	text-shadow: 0px 1px 0px #ffffff;
}

.play-button:hover {
	background:linear-gradient(to bottom, #ccc2a6 5%, #eae0c2 100%);
	background-color:#ccc2a6;
}

.textarea {
  background: linear-gradient(to right, #fff, rgb(221, 221, 221));
  background-color: #e6e6e6;
  border:2px solid #333029;
  border-left: none;
  border-right: none;
  resize: none;
  font-size: 16px;
  outline: none;
  padding-top: 3px;
  padding-left: 3px;
  overflow: hidden;
}

.correct {
  background: linear-gradient(to right, #ffde7c, #e4cb5d);
  background-color: #ffde7c;
  color:#1b1b1b;
  font-weight: 500;
}

.spoiler {
  background: linear-gradient(to right, #b68463, #91633d);
  color: black;
}

.span-id {
	background:  linear-gradient(to bottom, #eae0c2 5%, #ccc2a6 100%);
	background-color: #eae0c2;
  color: #505739;
  border: 2px solid #333029;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  padding: auto;
  text-align: center;
  padding-top: 3px;
  padding-right: 2px;
  font-size: 14px;
}

.correct-guesses {
 display: flex;
 justify-content: center;
 padding: 10px;
 padding-bottom: 5px;
}

.correct-amount {
  padding-left: 5px;
}

.completed {
  color:#88ec59;
  font-weight: 500;
}

.spoiler-button {
  display: block;
  margin: 0 auto;
  padding: 5px;
  text-align: center;
  border-color: 1px solid #fff;
	border: 2px solid #534c44;
	cursor: pointer;
	color: #000000;
	text-decoration: none;
  transition: all 0.2s ease 0s;
  background: linear-gradient(to left, rgb(233, 173, 117) 50%, rgb(180, 119, 91) 50%) right;
  background-size: 200%;
  transition: .5s linear;
}

.spoiler-button:hover {
  transition-duration: 0.2s;
  background-color: #4b4948;
}

.spoiler-button:active {
  transition-duration: 2s;
  background-position: left;
}

.footer {
  padding: 10px;
  background: linear-gradient(to right, #4b4948, rgb(70, 63, 61));
  border-top: 1px solid #928d8b;
}

.footer-info {
  list-style-type: none;
  text-align: center;
  align-items: center;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 80px;
  color:#c3b9b6;
}

.source-code {
  display: block;
  text-align: center;
  color: #c3b9b6;
  font-size: 12px;
}

.link {
  color: rgb(165, 186, 206);
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}

.github-logo {
  max-height: 1rem;
  max-width: auto;
  vertical-align: -3px;
}

@media (max-width: 1200px) {
  .page-wrapper {
    width: 100%;
  }

  .container {
    max-width: 100%;
  }

  .sfx-list {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 850px) {
  .sfx-list {
    grid-template-columns: 1fr 1fr;
  }
}