@font-face {
  font-family: 'Open Sans';
  src: url("/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf");
}
@import "parts/_cards.scss";
@import "parts/_code.scss";
@import "parts/_header.scss";
@import "parts/_image.scss";
@import "parts/misc.scss";
@import "parts/table.scss";
@import "parts/home-banner.scss";
@import "parts/footer.scss";
@import "parts/theme-switch.scss";

:root {
  --max-layout-width:900px;
  --normal-layout-width:600px;
  --medium-layout-width:350px;
  --small-layout-width:200px;
  font-family: 'Roboto Mono', monospace;
  line-height: 180%;


  --bg-0: #121212;
  --bg-1: rgba(255, 255, 255, 5%);
  --bg-2: rgba(23, 23, 23, 100%);
  --primary-color: #ef5350;
  --hover-color: white;
  --background-color:#29292e;
  --navbar-color:#222226;
  --secondary-color:#1b1b20;
  --highlights: #b35a5a;
  --links: #449cf8;
  --text-color: #f2f2f2;
  --code: #ef476f;
  --border-color: #111;
  --light-border-color: rgba(255, 255, 255, 0.1);
  --input-back: #4b4a4a;
  --input-color: #294797;
}

[data-theme="light"] {
  --bg-0: #fff;
  --bg-1: #f2f2f2;
  --bg-2: #fefefe;
  --primary-color: #ef5350;
  --hover-color: white;
  --background-color:#fff;
  --navbar-color:#e3e3e3;
  --secondary-color:rgb(158, 158, 158);
  --text-color: #222226;
  --border-color: rgb(114, 114, 114);
  --light-border-color: rgba(255, 255, 255, 0.1);
  --input-back: #161616;
  --input-color: #294797;
  --input-back: rgb(158, 158, 158);
  --input-color: #fbec48;
}

html {
  background-color: var(--background-color);
  color: var(--text-color);
  line-height: 1.6em;
}
body{
  margin:0;
  padding:0;
}
.content {
  max-width: var(--max-layout-width);
  margin: 0 auto;
  padding: 0 24px;
  word-wrap: break-word;
  min-height: 80vh;
}
@media only screen and (max-width:1000px) {
  .content{
    max-width: var(--normal-layout-width);
  }
}
@media only screen and (max-width:600px) {
  .content{
    max-width: var(--medium-layout-width);
  }
}
@media only screen and (max-width:300px) {
  .content{
    max-width: var(--small-layout-width);
  }
}
@media all and (min-width:640px) {
  html {
    font-size: 16.5px;
  }
}

@media all and (min-width:720px) {
  html {
    font-size: 17px;
  }
}

@media all and (min-width:960px) {
  html {
    font-size: 18px;
  }
}