@import url("base.css");

body {
  color: var(--text);
  background-color: var(--bkgd-main);
  margin: var(--default-body-margin);
}

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

.commit_list * {
  margin: 5px;
}

.commit_list div * {
  background-color: yellow;

}

.side_entry {
  padding: var(--pads);
  border-bottom: var(--brds) solid var(--text);
  border-left: var(--brds) dashed var(--text);
  border-right: var(--brds) dashed var(--text);
}

.side_link_entry {
  color: var(--text);
}

.side_link_entry:hover {
  background-color: var(--side-entry-hover-c);
}

.buttoned_link {
  color: var(--text);
}

.buttoned_link:visited {
  color: var(--text);
}

.global_container {
  margin-top: var(--mrgs);
}

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

.img_in_main {}

@media not screen and ((max-aspect-ratio: 1.2/1) or (max-width: 800px) or (max-height: 600px)) {
  img {
    max-width: 100%;
  }
  
  .img_in_main {
    max-width: min(100%, calc(100vw - (var(--calc-inside-main-s) + (var(--mrgs) * 2) + var(--left-side-min-s) + var(--right-side-min-s))));
  }
  
  .global_container {
    display: flex;
    flex-direction: row;
  }
}

@media screen and ((max-aspect-ratio: 1.2/1) or (max-width: 800px) or (max-height: 600px)) {
  .img_in_main {
    max-width: calc(100vw - var(--calc-inside-main-s));
  }
  
  .left {
    min-width: calc(100% - (var(--pads) * 2));
    margin-bottom: var(--mrgs);
  }
  
  .right {
    min-width: calc(100% - (var(--pads) * 2));
    margin-top: var(--mrgs);
  }
  
}


@media not screen and ((max-aspect-ratio: 1.2/1) or (max-width: 800px) or (max-height: 600px)) {
  .left {
    min-width: var(--left-side-min-s);
    margin-right: var(--mrgs);
  }
  
  .right {
    min-width: var(--right-side-min-s);
    margin-left: var(--mrgs);
  }
}

.high_title {
  margin-top: 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post_window {
  padding-bottom: var(--pads);
  padding-left: var(--pads);
  padding-right: var(--pads);
  min-width: 100px;
  min-height: 100px;
  
  height: 50vh;
  
  
}

.post_iframe {
  border: none;
  height: calc(100% - 50px);
  width: 100%;
}

@media screen and ((max-aspect-ratio: 1.2/1) or (max-width: 800px) or (max-height: 600px)) {
  .post_window {
    max-width: calc(100vw - var(--calc-inside-main-s));
  }
}

@media not screen and ((max-aspect-ratio: 1.2/1) or (max-width: 800px) or (max-height: 600px)) {
  .post_window {
    width: min(50vw, calc(100vw - (var(--calc-inside-main-s) + (var(--mrgs) * 2) + var(--left-side-min-s) + var(--right-side-min-s)) - 2px));
  }
}