/*!********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./src/assets/scss/fonts.scss ***!
  \********************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Mulish:wght@300&display=swap);
/*!************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./src/assets/scss/fonts.scss (1) ***!
  \************************************************************************************************************************************************************************************************************************/
@import url(https://dev-cats.github.io/code-snippets/JetBrainsMono.css);
/*!************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./src/assets/scss/fonts.scss (2) ***!
  \************************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100&display=swap);
/*!***************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./src/assets/css/tomorrow.min.css?ngGlobalStyle ***!
  \***************************************************************************************************************************************************************************************************************************************/
/*!
  Theme: Tomorrow
  Author: Chris Kempson (http://chriskempson.com)
  License: ~ MIT (or more permissive) [via base16-schemes-source]
  Maintainer: @highlightjs/core-team
  Version: 2021.09.0
*/pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#4d4d4c;background:#fff}.hljs ::selection,.hljs::selection{background-color:#d6d6d6;color:#4d4d4c}.hljs-comment{color:#8e908c}.hljs-tag{color:#969896}.hljs-operator,.hljs-punctuation,.hljs-subst{color:#4d4d4c}.hljs-operator{opacity:.7}.hljs-bullet,.hljs-deletion,.hljs-name,.hljs-selector-tag,.hljs-template-variable,.hljs-variable{color:#c82829}.hljs-attr,.hljs-link,.hljs-literal,.hljs-number,.hljs-symbol,.hljs-variable.constant_{color:#f5871f}.hljs-class .hljs-title,.hljs-title,.hljs-title.class_{color:#eab700}.hljs-strong{font-weight:700;color:#eab700}.hljs-addition,.hljs-code,.hljs-string,.hljs-title.class_.inherited__{color:#718c00}.hljs-built_in,.hljs-doctag,.hljs-keyword.hljs-atrule,.hljs-quote,.hljs-regexp{color:#3e999f}.hljs-attribute,.hljs-function .hljs-title,.hljs-section,.hljs-title.function_,.ruby .hljs-property{color:#4271ae}.diff .hljs-meta,.hljs-keyword,.hljs-template-tag,.hljs-type{color:#8959a8}.hljs-emphasis{color:#8959a8;font-style:italic}.hljs-meta,.hljs-meta .hljs-keyword,.hljs-meta .hljs-string{color:#a3685a}.hljs-meta .hljs-keyword,.hljs-meta-keyword{font-weight:700}
/*!************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./src/assets/scss/fonts.scss (3) ***!
  \************************************************************************************************************************************************************************************************************************/
/* font-family: 'Mulish' */
/* font-family: 'JetBrains Mono' */
/* font-family: 'Inter' */

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss?ngGlobalStyle ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* You can add global styles to this file, and also import other style files */
body {
  background-size: cover;
  background-position: top;
  background-color: #1D2741;
  background-repeat: no-repeat;
  background-image: url('background.png');
}

.player-container {
  padding: 1em;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  align-content: space-between;
  background-color: #FFF;
  justify-content: space-around;
}
.player-container #video-container {
  width: 47%;
  padding-right: 10px;
}
.player-container #video-container video {
  width: 100%;
  max-width: 100%;
}
@media (max-width: 616px) {
  .player-container #video-container {
    width: 100%;
    padding-right: 0px;
  }
}
@media (max-width: 900px) {
  .player-container #video-container {
    width: 100%;
    padding-right: 0px;
  }
}
.player-container .log {
  width: 47%;
  padding: 20px;
  color: #FFF;
  overflow: auto;
  min-height: 195px;
  max-height: 195px;
  margin-left: 10px;
  border-radius: 5px;
  font-family: "JetBrains Mono";
  background-color: #07111F;
}
@media (max-width: 616px) {
  .player-container .log {
    width: 100%;
    margin-left: 0;
  }
}
@media (max-width: 900px) {
  .player-container .log {
    width: 100%;
    margin-left: 0;
  }
}
.player-container .code-container {
  width: 100%;
}
.player-container .code-container pre code {
  border-radius: 10px;
  background-color: #F6F6F6;
}

/*# sourceMappingURL=styles.css.map*/