* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font-weight: 300;
    font-style: normal;
    --text-color: #b5e9c3; /* 0 - LIME */
    --white: white; /* 1 - WHITE */
    --grey: rgb(167, 167, 167); /* 2 - GREY */
    --blue: rgb(0, 149, 255); /* 3 - BLUE */
    --red: rgb(218, 44, 44); /* 4 - RED */
    --black: black; /* 5 - BLACK */
    --yellow: yellow; /* 6 - YELLOW */
    --purple: rgb(212, 74, 212); /* 7 PURPLE */
    --cyan: cyan; /* 8 - CYAN */
    --green: rgb(54, 172, 54); /* 9 - GREEN */
    --orange: #ff4f00; /*10 - MAROON */
    --cream: beige; /* 11 - BEIGE */
    --brown: rgb(161, 125, 17); /* 12 - BROWN */
    --gold: rgb(219, 219, 44); /* 13 - GOLD */
    --silver: rgb(218, 218, 218); /* 14 - SILVER */
    --teal: rgb(0, 163, 163); /* 15 - TEAL */
    --background-color: #2c2c2c;
}

li {
    font-size: larger;
    display: flex;
    flex-wrap: wrap;
}


html,
body {
    height: 100%;
}

body {
    /*background-color: var(--background-color);
    border: 40px solid var(--text-color);
    color: var(--text-color);*/
    border-width: 40px !important;
    position: relative;
}

.left-strip {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(10px + 0.05ch);
    background-color: black;
    z-index: 0;
    overflow: hidden;
}

.right-strip {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: calc(5px + 0.05ch);
    background-color: white;
    z-index: 0;
    overflow: hidden;
}


.content {
    padding: 40px;
    position: relative;
    z-index: 2;
}

a {
    text-decoration: none;
    color: inherit;
    font-weight: bold;
    font-size: larger;
}


.nav {
    display: block;
    justify-content: center;
    gap: 40px;
}

.nav a {
    text-decoration: none;
    color: inherit;
    font-weight: bold;
    display: inline-block;
    transform-origin: center;
}

@media only screen and (max-width: 1000px) {
  .nav a {
    display: block;
  }
  .suspicious {
    display:none !important;
  }
  body {
    border-width: 10px !important;
  }
  .content {
    padding: 10px;
  }
}


a:hover {
    transform: scale(1.2);
}

h1 {
    text-align: center;
}

.lime {
  color: var(--text-color);
  border: 40px solid var(--text-color);
  background-color: var(--background-color);
  fill: var(--text-color);
}

.white {
  color: var(--white);
  border: 40px solid var(--white);
  background-color: black;
  fill: var(--white);
}

.grey {
  color: var(--grey);
  border: 40px solid var(--grey);
  background-color: var(--background-color);
  fill: var(--grey);
}

.blue {
  color: var(--blue);
  border: 40px solid var(--blue);
  background-color: var(--background-color);
  fill: var(--blue);
}

.red {
  color: var(--red);
  border: 40px solid var(--red);
  background-color: var(--background-color);
  fill: var(--red);
}

.black {
  color: var(--black);
  border: 40px solid var(--black);
  background-color: var(--white);
  fill: var(--black);
}

.yellow {
  color: var(--yellow);
  border: 40px solid var(--yellow);
  background-color: var(--background-color);
  fill: var(--yellow);
}

.purple {
  color: var(--purple);
  border: 40px solid var(--purple);
  background-color: var(--background-color);
  fill: var(--purple);
}

.cyan {
  color: var(--cyan);
  border: 40px solid var(--cyan);
  background-color: var(--background-color);
  fill: var(--cyan);
}

.green {
  color: var(--green);
  border: 40px solid var(--green);
  background-color: var(--background-color);
  fill: var(--green);
}

.orange {
  color: var(--orange);
  border: 40px solid var(--orange);
  background-color: var(--background-color);
  fill: var(--orange);
}

.cream {
  color: var(--cream);
  border: 40px solid var(--cream);
  background-color: var(--background-color);
  fill: var(--cream);
}

.brown {
  color: var(--brown);
  border: 40px solid var(--brown);
  background-color: var(--background-color);
  fill: var(--brown);
}

.gold {
  color: var(--gold);
  border: 40px solid var(--gold);
  background-color: var(--background-color);
  fill: var(--gold);
}

.silver {
  color: var(--silver);
  border: 40px solid var(--silver);
  background-color: var(--background-color);
  fill: var(--silver);
}

.teal {
  color: var(--teal);
  border: 40px solid var(--teal);
  background-color: var(--background-color);
  fill: var(--teal);
}


.ibm {
  font-family: "IBM Plex Mono", monospace !important;
}

.mono {
  font-family: monospace !important;
}

.arial {
  font-family: Calibri, Helvetica, sans-serif !important;
}

.times {
  font-family: 'Times New Roman', Times, serif !important;
}