@font-face {
    font-family: 'United Colony Gradient';
    src: url('fonts/UnitedColonyGradientItalic.woff2') format('woff2'),
        url('fonts/UnitedColonyGradientItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Bauhaus Bernard 1926';
    src: url('fonts/BauhausBernard1926Bold.woff2') format('woff2'),
        url('fonts/BauhausBernard1926Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
body {
    background-color: black;
    color: yellow;
    font-family: monospace;
    font-size: 100%
}
h2 {
    font-family: 'Bauhaus Bernard 1926';
    font-size: 300%;
    margin: 20px;
}
div {
  background-color: rgb(166, 166, 166);
  width: 400px;
  border: 10px solid hsl(239, 87%, 34%);
  padding: 20px;
  margin: 20px;
}
#supes {
    width: 52px;
    height: 40px;
}
#losh {
    width: 40px;
    height: 40px;
}
#faves {
    margin-left: 500px;
}
#agender {
    width: 150px;
    height: 20px;
    position: absolute;
    margin: -10px 0px 0px 20px;
}
#legionnaire {
    width: 150px;
    height: 20px;
    position: absolute;
    margin: -10px 0px 0px 170px;
}
#geekalert {
    width: 150px;
    height: 20px;
    position: absolute;
    margin: -10px 0px 0px 330px;
}
#pmlist {
    font-size: 270%;
    position: absolute;
    margin: -696px 0px 10px 1000px;
}
#physicalmedia {
    position: absolute;
    padding: 10px;
    margin: -644px 0px 0px 1000px;
}
ol {
    list-style-image: url("images/bluestarlist.gif");
    list-style-type: square;
    font-size: 130%;
}
#p {
    position: absolute;
    padding: 10px;
    margin: -482px 0px 0px 1000px;
}