body {
  overflow: hidden;
}

h1,
h2,
h3,
h4 {
  padding-left: 0px;
  margin-left: 0px;
  padding-top: 5px;
  margin-top: 5px;
}

.parent {
  padding: 20px;
  padding-bottom: 0px !important;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(15, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  height: 100vh;
  font-family: "Merriweather", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 0.8em;
  font-style: normal;
  font-variation-settings: "wdth" 112;
}

button {
  font-family: "Merriweather", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 112;
}

.div1 {
  grid-area: 1/1/2/8;
  justify-content: bottom;
}

.header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: flex-end;
  align-items: flex-start;
  height: 100%;
  font-size: 5em;
}

.issue {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 1.2em;
}

.div2 {
  grid-area: 2/1/3/8;
  background-color: black;
  --mask: radial-gradient(
  			6.6px at 50% calc(100% + 4.6px),
  			#0000 calc(99% - 1px),
  			#000 calc(101% - 1px) 99%,
  			#0000 101%
  		)
  		calc(50% - 8px) calc(50% - 2.5px + 0.5px) / 16px 5px repeat-x,
  	radial-gradient(
  			6.6px at 50% -4.6px,
  			#0000 calc(99% - 1px),
  			#000 calc(101% - 1px) 99%,
  			#0000 101%
  		)
  		50% calc(50% + 2.5px) / 16px 5px repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}

.div3 {
  grid-area: 3/1/6/2;
}

.div4 {
  grid-area: 2/2/15/15;
  background-color: black;
  --mask2: radial-gradient(
  			6.6px at calc(100% + 4.6px) 50%,
  			#0000 calc(99% - 1px),
  			#000 calc(101% - 1px) 99%,
  			#0000 101%
  		)
  		calc(50% - 2.5px + 0.5px) calc(50% - 8px) / 5px 16px repeat-y,
  	radial-gradient(
  			6.6px at -4.6px 50%,
  			#0000 calc(99% - 1px),
  			#000 calc(101% - 1px) 99%,
  			#0000 101%
  		)
  		calc(50% + 2.5px) 50%/5px 16px repeat-y;
  -webkit-mask: var(--mask2);
  mask: var(--mask2);
  max-width: 25px;
}

.div5 {
  grid-area: 3/2/15/8;
  column-count: 2;
  overflow-y: auto;
  margin-right: 15px;
  padding-left: 35px;
  margin-left: 15px;
  padding-bottom: 0px !important;
  margin-bottom: 0px !important;
  position: relative;
  display: block;
  scrollbar-color: white white;
  scrollbar-width: thick;
}

.scrollbarprogress {
  width: 50px;
  height: 100px;
  position: absolute;
  background-color: red;
  display: block;
  border-radius: 50px;
  z-index: 99999999;
  top: 0;
  right: 0;
}

.scrollbartrack {
  min-height: 100%;
  background-color: #f1f1f1;
  width: 15px;
  position: absolute;
  display: block;
  right: 2.65%;
  z-index: 999999;
  top: 0%;
  --mask2: radial-gradient(
  			6.6px at calc(100% + 4.6px) 50%,
  			#0000 calc(99% - 1px),
  			#000 calc(101% - 1px) 99%,
  			#0000 101%
  		)
  		calc(50% - 2.5px + 0.5px) calc(50% - 8px) / 5px 16px repeat-y,
  	radial-gradient(
  			6.6px at -4.6px 50%,
  			#0000 calc(99% - 1px),
  			#000 calc(101% - 1px) 99%,
  			#0000 101%
  		)
  		calc(50% + 2.5px) 50%/5px 16px repeat-y;
  mask: var(--mask2);
}

a {
  color: black;
  font-weight: 900;
  font-size: 1.5em;
  text-decoration: none;
}

a:hover {
  color: red;
}

h4 a:before {
  content: "";
  display: block;
  position: relative;
  top: 25px;
  left: 0;
  background: linear-gradient(90deg, red 0%, rgba(255, 255, 255, 0) 80%);
  width: calc(100% - 200px);
  height: 5px;
  --mask: radial-gradient(
  			6.6px at 50% calc(100% + 4.6px),
  			#0000 calc(99% - 1px),
  			#000 calc(101% - 1px) 99%,
  			#0000 101%
  		)
  		calc(50% - 8px) calc(50% - 2.5px + 0.5px) / 16px 5px repeat-x,
  	radial-gradient(
  			6.6px at 50% -4.6px,
  			#0000 calc(99% - 1px),
  			#000 calc(101% - 1px) 99%,
  			#0000 101%
  		)
  		50% calc(50% + 2.5px) / 16px 5px repeat-X;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}

h3 {
  display: none;
}

h4 {
  font-size: 0.8em;
}