style.css

:root {
  --dk: black;
  --second-dk: #0F0F0F;
  --bg-dk: #1f1f1f;
  --lgt-txt:#d2dfdd;
  --bg-accent:darkblue;
  --accent: rgb(0, 138, 42);
  --link: aqua;
  --link2:#64b6ff;
}

body {
  color: var(--lgt-txt);
  background-color: var(--bg-dk);
  font-family: "Lucida Sans Unicode", "Trebuchet MS", Sans-Serif;
  letter-spacing: 0.011em;
  line-height: 1.4;
  text-align: center;
  margin-left: 140px;
  margin-right: 40px;
  margin-bottom: 10px;
  max-width: 1600px;
  border:12px solid var(--bg-accent);
  border-image: url(borderblue.png) 14 round;
  padding: 12px;
  overflow-x: hidden;
}

html{
   width: 100%;
   background-color: var(--bg-accent);
   background-image: url('data:image/png;base64,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');
}

body img{
  max-width:100%;
}
body iframe{
  max-width:100%;
}
topbar{display:none;}
@media (max-width: 900px), (max-aspect-ratio: 3/4) {
  body{
    margin-left: 20px;
    margin-right: 20px;
  }
  sidebar{display:none;}
  topbar{
    display:block;
    margin:auto;
    font-size: 200%
  }
}
@media (max-width: 500px){
  body{
    margin-left:0px;
    margin-right:0px;
  border-image-width:8px;
  }
}

p {padding: 0px 4px 0px;}

a:link{
  color: var(--link);
}

a:visited{
  color: var(--link2);
}

nav {
  font-family: "Lucida Sans Unicode", "Trebuchet MS", Sans-Serif;
  text-align:center;
}

nav sidebar{
  background-color:var(--accent);
  z-index:1;
  padding:0;
  margin:0;
  top:10px;
  left:5px;
  width:120px;
  position:fixed;
}

nav sidebar{
  width:120px;
}

nav topbar{
  width: 90%; padding: 10px;
}

nav a:link{
  color:var(--accent);
  text-decoration: none;
}

nav a:visited{
  color:var(--accent);
  text-decoration: none;
}

nav a:hover{
  color:var(----lgt-txt);
  text-decoration: none;
}

nav p{
  background-color:var(--dk);
  width:90%;
  margin:4%;
  padding:0;
}

table {
  table-layout:fixed;
  text-align: center;
  background-color: var(--second-dk);
  border: 5px solid var(--accent);
  border-spacing:2px;
  margin: auto;
  width: 90%
}


th{
  text-align: center;
  border: 1px solid var(--accent);
  border-spacing:2px;
}

td{
  text-align: left;
  border: 1px solid var(--accent);
  border-spacing:2px;
}

UL{
  text-align:left;
}

.accordion {
  background-color: black;
  font-family:inherit;
  font-size: inherit;
  color:inherit;
  font-weight: bold;
  cursor: pointer;
  padding: 0px 24px 0px 24px;
  border: 2px solid #444;
  outline: none;
  transition: 0.4s;
}
.panel{
  margin:auto;
  max-width: 80%;
  overflow: hidden;
  display: none;
}

.divider{
  width: 60%;
  border: 4px solid var(--link2);;
  margin:auto;
}

footer {
display:none;
  position: fixed;
  background: var(--dk);
  font-size: 12px;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
}

.header-link{
  font-weight: bold;
  color:white;
        text-decoration: underline;
        text-decoration-color: var(--accent);
      }
a .header-link:hover{
        transition: 0.25s;
        color: var(--link);
      }

/*index page stuff*/
.li1{
  text-align: left;
  background-color: var(--second-dk);
  padding: 1px 10px 20px 20px;
  border-bottom: 4px solid var(--accent);
  width: 85%;
  margin:auto;
  margin-bottom: 5px;
}
.li2{
  border-bottom-color: var(--bg-accent);
}
.li1 img{
  float: right;
  object-fit: contain;
  margin: 20px 10px 5px 15px;
  max-height: 150px;
}
.clear{
  clear: right; display: block;
}

.linkicons-block{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
    padding: 8px;
    max-width: 100%;
}

.linkicons-block a{
  text-decoration: none;
    font-weight: bold;
    font-size: 150%;
  }
  .linkicons-block a:hover{
    color:var(--link2);
  }

.iconblock{
  text-align: center;
  margin: 10px;
  width: calc(50% - 20px);
  max-width:250px;
}
.iconblock img{
  background-color: var(--link);
  margin:4px;
  border: 1px solid var(--link);
  width: 100%;
}
.iconblock:hover img{
  background-color: var(--link2);
  margin:3px;
  border: 2px solid var(--link2);
}