:root {
  --sidebar-width: min(450px, 60%);
}

/*
The default theme is dark.
SCSS variables (`$black`) are not affected by scripts. (Inside code blocks, ...)
CSS variables (`var(--black)`) are affected by scripts. (Everywhere else.)
*/
:root {
  --black: #000000;
  --black-compl: #ffffff;
  --black-trans: #00000060;
  --black-compl-trans: #ffffff60;
  --dark: #404040;
  --dark-compl: #bfbfbf;
  --dark-trans: #40404060;
  --dark-compl-trans: #bfbfbf60;
  --gray: #808080;
  --gray-compl: #7f7f7f;
  --gray-trans: #80808060;
  --gray-compl-trans: #7f7f7f60;
  --lightgray: #c0c0c0;
  --lightgray-compl: #3f3f3f;
  --lightgray-trans: #c0c0c060;
  --lightgray-compl-trans: #3f3f3f60;
  --white: #ffffff;
  --white-compl: #000000;
  --white-trans: #ffffff60;
  --white-compl-trans: #00000060;
  --red: #c02020;
  --red-compl: #3fdfdf;
  --red-trans: #c0202060;
  --red-compl-trans: #3fdfdf60;
  --green: #20c020;
  --green-compl: #df3fdf;
  --green-trans: #20c02060;
  --green-compl-trans: #df3fdf60;
  --slateblue: #4040c0;
  --slateblue-compl: #bfbf3f;
  --slateblue-trans: #4040c060;
  --slateblue-compl-trans: #bfbf3f60;
  --blue: #2020c0;
  --blue-compl: #dfdf3f;
  --blue-trans: #2020c060;
  --blue-compl-trans: #dfdf3f60;
  --aqua: #40c0ff;
  --aqua-compl: #bf3f00;
  --aqua-trans: #40c0ff60;
  --aqua-compl-trans: #bf3f0060;
  --emerald: #40c040;
  --emerald-compl: #bf3fbf;
  --emerald-trans: #40c04060;
  --emerald-compl-trans: #bf3fbf60;
  --turquoise: #40ffc0;
  --turquoise-compl: #bf003f;
  --turquoise-trans: #40ffc060;
  --turquoise-compl-trans: #bf003f60;
  --seagreen: #20c0c0;
  --seagreen-compl: #df3f3f;
  --seagreen-trans: #20c0c060;
  --seagreen-compl-trans: #df3f3f60;
  --violet: #c040ff;
  --violet-compl: #3fbf00;
  --violet-trans: #c040ff60;
  --violet-compl-trans: #3fbf0060;
  --pink: #ff40c0;
  --pink-compl: #00bf3f;
  --pink-trans: #ff40c060;
  --pink-compl-trans: #00bf3f60;
  --grassgreen: #c0ff40;
  --grassgreen-compl: #3f00bf;
  --grassgreen-trans: #c0ff4060;
  --grassgreen-compl-trans: #3f00bf60;
  --gold: #ffc040;
  --gold-compl: #003fbf;
  --gold-trans: #ffc04060;
  --gold-compl-trans: #003fbf60;
  --brown: #c08020;
  --brown-compl: #3f7fdf;
  --brown-trans: #c0802060;
  --brown-compl-trans: #3f7fdf60;
}

:root {
  --horiz-padding: 0px;
  --font-size-landscape: 19px;
  --font-size-portrait: 14px;
}

@media screen and (orientation: landscape) {
  html {
    font-size: var(--font-size-landscape);
  }
  article {
    margin-top: 3.999rem;
    margin-bottom: 0px;
    margin-left: 9%;
    margin-right: 9%;
    max-width: 82%;
  }
}
@media screen and (orientation: portrait) {
  html {
    font-size: var(--font-size-portrait);
  }
  article {
    margin-top: 3.999rem;
    margin-bottom: 0px;
    margin-left: 5%;
    margin-right: 5%;
    max-width: 90%;
  }
}
@media print {
  body .markdown pre {
    overflow: none;
  }
  body .markdown .copy-fenced-code {
    display: none;
  }
}
article, footer {
  padding-left: var(--horiz-padding);
  padding-right: var(--horiz-padding);
}

html {
  font-family: "Nanum Gothic Coding";
  scroll-behavior: smooth;
}

body {
  background-color: var(--dark);
  transition: background-color 0.5s ease-out;
}