@use '../vendor/highlight.js/src/styles/github-dark.css';

$padding: 1em;

@font-face {
  font-family: "Mplus Code";
  src: url("./MplusCodeLatin[wdth,wght].ttf") format("truetype");
}

body {
  background-color: #404040;
  margin: 0;
}

.unselectable {
    user-select: none;
}

hr {
  @extend .hljs;
  margin: $padding 0;
}

main {
  display: inline-flex;
  min-width: 100%;
  justify-content: center;
}

.paste {
  @extend .hljs;
  border-radius: $padding;
  margin: $padding;
  padding: 2 * $padding;
  box-shadow: 0 0 $padding black;
  min-width: 120ch;
}

.hljs {
  font-family: 'Mplus Code', sans-serif;
}

.hljs-ln td.hljs-ln-numbers {
  text-align: right;
  padding-right: $padding;
}

.centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.fullscreen {
  min-height: 100vh;
  min-width: 100vw;
  margin: 0;
}

.display-anyways {
  margin-top: 4em;
  text-decoration: underline;
  cursor: pointer;
}

img, audio, video {
  border-radius: $padding;
  margin-bottom: $padding;
  max-height: 75vh;
  max-width: 75vw;
}

.primary {
  @extend .hljs;
}