/* Application styles */
section#main {
  /* fixed with with auto left and right margin */
  width: 960px;
  margin: 0 auto;
  padding-top: 2em;
  color: #393842;
}

dt {
  font-weight: bold;
}

dd {
  word-break: break-all;
}

fieldset {
  border: 3px solid rgb(216, 216, 223);
  padding: 2em;
  border-radius: 1em;
}

a {
  color: #393842;
}

a:hover  {
  color: #8355ff
}

img#logo {
  margin-bottom: 1em;
}

span.pre {
  white-space: pre-wrap;
  font-family: monospace;
  font-size: larger;
  background-color: #ffcf3b;
}

.legend {
  font-weight: lighter;
  font-size: smaller;
  color: rgb(216, 216, 223);
}

/* define fadout and stay */
@keyframes fadeout {
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

.notice {
  border: 3px solid #ffcf3b;
  border-radius: 1em;
  background-color: #ffcf3b;
  color: #393842;
  padding: 1em;
  margin: 2em 0;
  font-weight: bold;
  /* dissapear after 5 seconds and stay away */
  animation: fadeout 5s 1;
  animation-fill-mode: forwards;
  /* position absolute to be on top of the page */
  position: absolute;
  top: 1em;
  right: 1em;
}