* {
    padding:0;
    margin:0px;
}

@font-face { 
	font-family: "ChainedMoth"; 
	src: url("chainedmoth_text.ttf") format("truetype"); 
	font-weight: normal;
	font-style: normal; 
	font-display: swap;
}

html {
  background-color: black;
  color: #b40000;
  font-family: "ChainedMoth";
  font-size: 28px;
  white-space: pre-line;
  background-image: url('landscape.png');
    padding-left:25px;
        padding-right:25px;
        background-size: 100%;
          background-repeat: no-repeat;
        background-position: center bottom;
        image-rendering: crisp-edges;
    margin:0;

}

.thick {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: #b40000;
  text-decoration-thickness: 4px;
}

body {
    line-height:4px
}

.imageglow {
  filter: drop-shadow(0 0 0.5rem #b40000);
}

.header {
  background-image: url("lost_forest.png");
  background-size: cover;
  background-repeat: no-repeat;
  border: 4px solid #b40000;
  border-radius: 4px;
  line-height:15px;
  padding: 0px;
  background-position: center;
          image-rendering: crisp-edges;
}

.headerbox {
  border: 4px solid #b40000;
  border-radius: 4px;
  background-color: black;
  background-size: cover ;
width: 25%;
    margin: 0%;
vertical-align: baseline;
text-shadow: #b40000 0px 0 0.5rem;
overflow: auto;
        image-rendering: smooth;
}

.navigator {
  border: 4px solid #b40000;
  border-radius: 4px;
  background-color: black;
  background-size: cover ;
    margin-top: 15px;
vertical-align: baseline;
text-shadow: #b40000 0px 0 0.5rem;
  display: inline-block;
}

.glowingtext {
text-shadow: #b40000 0px 0 0.5rem;
}

ul {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0px;
  font-size: 35px;
  ‑webkit‑text‑size‑adjust: 100%
}

li {
margin-top: 20px;
margin-bottom: 10px;
margin-left: 30px;
margin-right: 30px;
font-size: 35px;
}

/* unvisited link */
a:link {
  color: #b40000;
    text-decoration: none;
}

/* visited link */
a:visited {
  color: #b40000;
    text-decoration: none;
}

/* mouse over link */
a:hover {
  color: red;
    text-decoration: none;
}

/* selected link */
a:active {
  color: #b40000;
    text-decoration: none;
}

.titletext {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: #b40000;
  text-decoration-thickness: 4px;
  font-size: 38px;
  text-shadow: #b40000 0px 0 0.5rem;
}

.box {
  border: 4px solid #b40000;
  border-radius: 4px;
  background-color: black;
  width: 75%;
  margin:25px;
  line-height:30px;
}

.pdfbox {
  border: 4px solid #b40000;
  border-radius: 4px;
  padding-bottom: 15px;
  background-color: black;
  width: 75%;
  height:350px;
  margin:0px;
line-height:30px;
overflow-y: auto;
}

html {
  scroll-behavior: smooth;
}

img.screenborder {
  border: 45px solid #000000;
  border-radius: 75px;
  border-image: url(screen_border.png);
  border-image-slice:  15%;
  border-image-repeat: stretch;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-right: 2px;
  padding-left: 2px;
   background-image: linear-gradient(to bottom, rgba(00, 00, 000, 1) 0%, rgba(0, 0, 0, 1) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
  background-clip: content-box, padding;
filter: drop-shadow(0 0 0.7rem #b40000);
margin: 20px;
  width: 40vw;
  height: auto;
}

iframe {
  border: 45px solid #000000;
  border-radius: 75px;
  border-image: url(screen_border.png);
  border-image-slice:  15%;
  border-image-repeat: stretch;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-right: 2px;
  padding-left: 2px;
   background-image: linear-gradient(to bottom, rgba(00, 00, 000, 1) 0%, rgba(0, 0, 0, 1) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
  background-clip: content-box, padding;
filter: drop-shadow(0 0 0.7rem #b40000);
margin: 20px;
  width: 40vw;
  height:25vw;
}

  background-postion: center;
  background-size: 100% 100%;
  height: 100%;
  width: 100%;

u{text-decoration: underline 5px;}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}