@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(3, 9, 11);
}

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;
}

@media only screen and (max-width: 890px) {
  #text-content {
    padding: 1em;
  }
}

h1, h2, h3, h4 {
  color: rgb(117, 209, 140);
  font-weight: 100;
  margin-bottom: -0.5rem;
  letter-spacing: 0.1em;
  line-height: 1.1em;
}

#profile-image {
  float: right;
  max-width: 100%;
}

@media only screen and (max-width: 890px) {
  video {
    display: block;
    margin: 0 auto;
    float: none;
  }
}

a {
  color: rgb(134, 218, 213);
  text-decoration: none;
}

body.dark a {
  color: rgb(117, 209, 140);
}

code {
  font-size: x-large;
}

.signed {
  text-align: right;
}