@font-face { font-family:Fira Sans; src: url('/fonts/FiraSans.ttf') format("truetype");}

@font-face { font-family:Fira Mono; src: url('/fonts/FiraMono.otf') format("opentype");}


body {
	background-color: #000000;
	font-family: Fira Sans;
	font-size: 25px;
	color: #EEEEEE;
}
a:link {
	color: #EFEFEF;
}
a:visited {
	color: #EFEFEF;
}
img {
  margin: 30px;
  box-shadow: 0 0 10px gray;
}
code {
	font-family: Fira Mono;
}

.paragraphs {
  max-width: 800px;
  margin: 20px auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 10px 20px;
  position: relative;
  font-family: Fira Mono;
  text-align: left;
  font-size: 20px;
}

#input {
    padding: 15px;
    font-size: 18px;
    margin-top: 10px;
    width: 200px;
    font-family: Fira Mono;
}

#submitButton {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 32px;
    height: 32px;
}

#submitButton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#submitButton img {
    width: 32px;
    height: 32px;
    margin: 0;
    display: block;
    filter: invert(100%);
    box-shadow: 0 0 0px gray;
    border-style:none;
}

#response {
  font-family: Fira Mono;
  white-space: pre;
}

.spoiler {
    display: inline-block;
    background: #111;
    color: transparent;
    border-radius: 4px;
    padding: 0 6px;
    cursor: pointer;
    user-select: none;
    transition: color 0.3s, background 0.3s;
}
.spoiler.revealed {
    background: #ffeaa0;
    color: #111;
}