@import url("base.css");

body {
  color: var(--text);
  background-color: var(--bkgd-scrpr);
}

.img_in_tabl {
  padding: 0;
  padding-left: var(--pads);
  padding-right: var(--pads);
}

.img_in_menu_bar {
  image-rendering: pixelated;
}

.img_in_menu_bar:hover {
  filter: invert(100%);
}

.main {
  background-color: var(--abot-bkgd-c);
  border: var(--brds) dashed var(--abot-border-c);
  padding: var(--pads);
}

.attachment {
  border: var(--brds) dotted var(--abot-border-attachment);
}

.main * {
  /*border: 5px solid black;*/
}

.preview:hover {
  opacity: 0.5;
}

.icons {
  vertical-align: middle;
  padding: calc(var(--pads) / 2);
}
  
.title {
  font-size: 3ch;
}
  
.projs {
  padding: var(--img-padding);
}
  
.projs img {
  padding: 0;
}
  
@media not screen and ((max-aspect-ratio: 1.2/1) or (max-width: 800px) or (max-height: 600px)) {
}

@media screen and ((max-aspect-ratio: 1.2/1) or (max-width: 800px) or (max-height: 600px)) {
  .img_in_tabl {
    width: min(50vw, 100%);
  }
  
  .window_stacked {
    width: min(100%, calc(100vw - 2 * (var(--default-body-margin) + var(--brds) + var(--pads))))
  }
}