<!--
https://www.sitepoint.com/community/t/overlapping-divs/368414
nikostzounakos
2021.05.30 02:56
-->

html {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}
body {
  margin: 0;
}
body {
  background-image: linear-gradient(
    to bottom,
    #99a 0,
    #99a calc(50% - 1px),
    #000 calc(50% - 1px),
    #000 calc(50% + 1px),
    #e6a calc(50% + 1px),
    #e6a 100%
  );
  background-attachment: fixed;
  padding: 2px;
}
/*
    NOTE: The sum of the percents of 
   .upper{bottom:calc(28% + 32px) and
   .lower{top:calc(72% - 32px) 
    should equal 100%. ie: (28% + 72% = 100%)
*/
body:before {
  content: "";
  position: fixed;
  top: calc(28% - 32px); /* positions top of blue horizontal line */
  bottom: calc(28% + 32px); /* sets bottom of blue vertical line */
  width: 50%;
  border-top: 64px solid rgba(0, 255, 255, 1);
  border-right: 64px solid rgba(0, 255, 255, 1);
}
body:after {
  content: "";
  position: fixed;
  top: calc(72% - 32px); /* positions top of yellow horizontal line */
  right: 0;
  bottom: 0;
  width: 50%;
  z-index: -1;
  border-top: 64px solid rgba(255, 255, 0, 1);
  border-left: 64px solid rgba(255, 255, 0, 1);
}
html:after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid #000;
  z-index: 3;
}
.outer {
  position: relative;
}