@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700');
pre#code {
  margin-top: 20px;
  border-radius: 5px;
  padding: 20px;
  font-size: 22px;
  line-height: 1.5;
  color: #ffffff;
  text-shadow: 2px 2px 4px rgb(148, 0, 211);
  text-align: left;
}
body {
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* background-image: url('/static/images/bg.png'); */
  background: black;
  font-size: 13px;
  background-size: cover;
  background-repeat: no-repeat;
}
body.image_gallery {
  padding: 40px;
  background: black;
  /*background-image: url('/static/images/bg44.png');*/
}
body.project-page {
  background: black;
  /* background-image: url('/static/images/bg22.png'); */
}
body.notes-page {
  background: black;
  /* background-image: url('/static/images/bg33.png'); */
}
#printed-text {
  font-size: 22px;
  color: white;
}
 /* Меню стили */
.menu-footer a i {
  font-size: 1.9rem;
}
#header {
  padding: 2rem; }
#menu {
  background: rgba(0, 0, 0, 0.6);
  height: 100%;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: fixed;
  text-align: center;
  top: 0;
  transition: all 0.7s ease-in-out;
  visibility: hidden;
  width: 100%;
  z-index: 1100; }
  #menu.open {
    opacity: 1;
    visibility: visible; }
    #menu.open li:nth-child(1) {
      animation-delay: 0.1s; }
    #menu.open li:nth-child(2) {
      animation-delay: 0.2s; }
    #menu.open li:nth-child(3) {
      animation-delay: 0.3s; }
    #menu.open li:nth-child(4) {
      animation-delay: 0.4s; }
    #menu.open li:nth-child(5) {
      animation-delay: 0.5s; }
    #menu.open li:nth-child(6) {
      animation-delay: 0.6s; }
    #menu.open li:nth-child(7) {
      animation-delay: 0.7s; }
    #menu.open li:nth-child(8) {
      animation-delay: 0.8s; }
    #menu.open li:nth-child(9) {
      animation-delay: 0.9s; }
    #menu.open li:nth-child(10) {
      animation-delay: 1s; }
    #menu.open li {
      animation-duration: 1.0s;
      animation-fill-mode: both;
      animation-name: fadeInUp; }
  #menu ul:hover a {
    opacity: 0.5; }
  #menu ul a {
    -webkit-transform: translateZ(0);
    transition: opacity 0.3s ease-in-out; }
    #menu ul a:hover {
      opacity: 1; }
  #menu .main-nav {
    position: relative;
    top: 50%;
    transform: translateY(-50%); }
    #menu .main-nav ul {
      list-style: none;
      margin: 0;
      padding: 0; }
    #menu .main-nav a {
      color: #ffffff;
      display: block;
      font-size: 2.5rem;
      font-weight: bold;
      padding: 1rem 1rem;
      text-decoration: none;
      text-transform: uppercase; }
      #menu .main-nav a:first {
        padding-top: 0; }
  #menu .menu-footer {
    padding: 2rem;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0; }
    #menu .menu-footer ul {
      display: inline-block;
      list-style: none;
      margin: 0;
      padding: 0; }
      #menu .menu-footer ul li {
        display: inline;
        margin: 0 1rem; }
    #menu .menu-footer a {
      color: #ffffff;
      text-decoration: none;
      text-transform: uppercase; }
.toggle-menu {
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: inline-block;
  height: 50px;
  outline: none;
  padding: 0;
  pointer-events: initial;
  position: fixed;
  right: 20px;
  top: 20px;
  vertical-align: middle;
  width: 50px;
  z-index: 1101; }
  .toggle-menu span {
    background-color: #fff;
    content: "";
    display: block;
    height: 2px;
    left: calc(50% - 13px);
    position: absolute;
    top: calc(50% - 1px);
    transform-origin: 50% 50%;
    transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out,  transform 0.2s linear;
    width: 26px; }
    .toggle-menu span:before, .toggle-menu span:after {
      background-color: #fff;
      content: "";
      display: block;
      height: 2px;
      position: absolute;
      transform-origin: 50% 50%;
      transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out,  transform 0.2s linear;
      width: 26px; }
    .toggle-menu span:before {
      top: 7px; }
    .toggle-menu span:after {
      top: -7px; }
  .toggle-menu.active span {
    background-color: transparent;
    transition: background 0.2s ease-out; }
    .toggle-menu.active span:before, .toggle-menu.active span:after {
      transition: top 0.2s ease-out, transform 0.2s 0.2s ease-out; }
    .toggle-menu.active span:before {
      top: 0;
      transform: rotate3d(0, 0, 1, -45deg); }
    .toggle-menu.active span:after {
      top: 0;
      transform: rotate3d(0, 0, 1, 45deg); }
.terminal {
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #ffffff;
    padding: 16px;
    border-radius: 5px;
    margin: 70px;
    max-height: 800px; /* Ограничение по высоте, чтобы был вертикальный скролл */
    overflow-y: auto; /* Включаем вертикальный скролл */
}
.terminal .output {
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    white-space: pre-wrap;
    margin-bottom: 15px;
    font-size: 16px;
}
.terminal #input {
    background-color: transparent;
    border: none;
    color: #ffffff;
    font-family: monospace;
    font-size: 16px;
    outline: none; /* Убираем контур при фокусе */
}