/* WARNING: If you change this font, also change the font loading check
   in main.dart. */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@100;300&display=swap');

/* DARK */
/*$oxford-blue: rgba(4, 4, 54, 1);*/
/*$orange-soda: rgba(245, 93, 62, 1);*/
/*$dark-orange: rgba(255, 136, 17, 1);*/
/*$cultured: rgba(238, 240, 242, 1);*/
/*$prussian-blue: rgba(11, 57, 84, 1);*/

/*!* LIGHT *!*/
/*$amaranth-purple: rgba(166, 58, 80, 1);*/
/*$tea-green: rgba(199, 223, 197, 1);*/
/*$orange-soda: rgba(245, 93, 62, 1);*/
/*$cultured: rgba(238, 240, 242, 1);*/
/*$oxford-blue: rgba(4, 4, 54, 1);*/

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Work Sans', Lato, sans-serif;
  font-weight: 300;
  color: rgb(4, 4, 54);
  background: rgb(238, 240, 242);
}

body.dark, body.dark #matrioska {
  color: rgb(238, 240, 242);
  background: rgb(4, 4, 24);
}

#play-canvas {
  display: block;
  margin: 0 auto;
}

#play-area {
  border-bottom: 1px solid rgb(199, 223, 197);
}

body.dark #play-area {
  border-bottom: 1px solid rgb(11, 57, 84);
}

#output {
  padding: 20px;
  text-align: center;
}

#text-content {
  max-width: 50em;
  margin: 0 auto;
  padding: 5em;
  font-size: 150%;
  line-height: 1.5;
}

h1, h2, h3, h4 {
  font-weight: 100;
  margin-bottom: -0.5rem;
}

a {
  color: rgb(166, 58, 80);
  text-decoration: none;
}

body.dark a {
  color: rgb(255, 136, 17);
}

code {
  font-size: x-large;
}

.signed {
  text-align: right;
}