:root {
    --transparent_bg: rgba(255,255,255,0.3);
}

body {
    background-image: linear-gradient(hsl(288, 28%, 44%),hsl(300, 38%, 23%));
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
header {
    display: flex;
    flex-direction: column;
    text-align: center;
}
nav {
    display: flex;
    text-align: center;
    flex-direction: column;
}

.toc {
    display: flex;
    flex-direction: column;
    margin: 25px;
}

.toc > *, .toc_setup > * {
    margin: 5px
}

.toc_setup {
    display: flex;
    flex-direction: column;
    padding-left: 50%;
    text-align: left;
}

.transBG {
    padding: 3%;
    background-color: var(--transparent_bg);
    margin: 4%;
    border-radius: 50px;
}

.seperator{
    width: 100%;
    background-color: rgba(62, 9, 84, 0.5);
    min-height: 10px;
    border-radius: 10px;
    --margin_tb: 10px;
    margin-top: var(--margin_tb);
    margin-bottom: var(--margin_tb);
}

.npButton {
   width: 25%;
   height: 40px;
   border-radius: 50px;
   background-position: center;
}
.npButton {
    background-image: linear-gradient(hsl(288, 28%, 44%), hsl(300, 38%, 23%));
}
.npButton:hover {
    cursor: pointer;
    background-image: linear-gradient(hsl(130, 28%, 44%), hsl(109, 38%, 23%));
}

h2, h3 {
    text-align: center;
}
#jsonContainer, #jsonContainer2 {
    background-color: #555;
    padding: 20px;
}
.hljs-string {
    color: orange
}
.perl {
    color: #FFF;
}
.hljs-number {  
    color: #02ab02;
}