body {
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;

  /* Draw background pattern, from here "CSS Only Cubic Pattern": https://freefrontend.com/css-background-patterns/ */
  --s: 80px; /* control the size */
  --c1: #b2b2b2;
  --c2: #ffffff;
  --c3: #d9d9d9;

  --_g: var(--c3) 0 120deg,#0000 0;
  background:
    conic-gradient(from -60deg at 50% calc(100%/3),var(--_g)),
    conic-gradient(from 120deg at 50% calc(200%/3),var(--_g)),
    conic-gradient(from  60deg at calc(200%/3),var(--c3) 60deg,var(--c2) 0 120deg,#0000 0),
    conic-gradient(from 180deg at calc(100%/3),var(--c1) 60deg,var(--_g)),
    linear-gradient(90deg,var(--c1)   calc(100%/6),var(--c2) 0 50%,
                          var(--c1) 0 calc(500%/6),var(--c2) 0);
  background-size: calc(1.732*var(--s)) var(--s);
}

#choose-file-block {
    --choose-file-block-opacity: 0.8;
    background-color: rgb(255, 255, 255, var(--choose-file-block-opacity) );
    padding: 1rem;
    box-shadow: 0 8px 6px -6px black;
}

@media (prefers-color-scheme: dark) {
  body {

  color: white;

  /* Darker colors for background pattern */
  --c1: #898989;
  --c2: #212121;
  --c3: #090909;
  }

  #choose-file-block {
    background-color: rgb(0, 0, 0,var(--choose-file-block-opacity));
  }

  a:link {color:#cdf}
  a:hover, a:visited:hover {color:#def}
  a:visited {color:#dcf}
}


.img_container {
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
}

img {
  max-width: 100%;
  height: auto;
  padding: 1rem;
}