@font-face {
    font-family: 'Monocraft';
    src: url('https://cdn.jsdelivr.net/gh/IdreesInc/Monocraft@main/dist/Monocraft-ttf/Monocraft.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
a {
    text-decoration: none;
}
* {
    font-family: "Monocraft";
    margin: 0;
    padding: 0;
}
body {
    background-color: black;
    height: 100vh;
}
.header {
    width: 100%; 
    background-color: rgb(0, 132, 255);
    box-shadow: 0 0 20px 10px rgb(0, 132, 255);
    display: flex;
}
.header h1 {
    margin: 5px 50% 5px 20px;
}
.header h3 {
    margin-top: 10px;
    margin-left: 15px;
    margin-right: 15px;
}
.main {
    margin: 5% 20%;
    border: 3px solid gray;
    border-radius: 20px;
    color: gray;
}
.main h3{
    margin-left: 25px;
    margin-bottom: 15px;
    margin-top: 15px;
}
.main p {
    margin-left: 15px;
    margin-bottom: 15px;
}
a:link {
  color: black;
}
a:visited, a:hover, a:active {
    color: #4a4a4a;
    font-size: 110%;
}
.shop {
    margin: 5% 15%;
    border: 3px solid gray;
    border-radius: 20px;
    color: gray;
}
.shop h2 {
    margin-left: 25px;
    margin-bottom: 15px;
    margin-top: 15px;
}
.shop h3 {
    margin-left: 30px;
    margin-bottom: 15px;
    margin-top: 15px;
}
.shop h4 {
    margin-left: 35px;
    margin-bottom: 15px;
    margin-top: 15px;
}
.shop p {
    margin-left: 15px;
    margin-bottom: 15px;
}
.shop li {
    margin-left: 55px;
}
#knight_tag {
    color: green;
}
#noble_tag {
    color: cyan;
}
#jester_tag1 {
    color: yellow;
}
#jester_tag2 {
    color: purple;
}
#ruler_tag {
    color: gold;
}
#particleCanvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}