@font-face {
    font-family: symbols;
    src: url(/fonts/Symbolic-Regular.ttf);
}


:root{
    --background: rgb(27, 27, 27);
    --entities: black;
    --highlight: whitesmoke;
    --font-title: sans-serif;
    --font-body: monospace;
    --font-symbols: symbols;
}

body{
    font-family: monospace;
    margin: 0;
    overflow: hidden;
    background-color: var(--background);
}


.comic {
    width: 200px;
    height: 200px;
    margin: 0;
    padding: 0%;
    border-right: 2pt solid black;
}

.symbol{
    font-family: var(--font-symbols);
    font-size: 1.7em;
    margin: 0;
}

.comic img{
    width: 100%;
}

.title{
    font-family: monospace;
    font-size: 20pt;
}

a{
    color: black;
    text-decoration: underline 2pt dotted black;
}

.header {
    position: absolute;
    border-top: 2pt solid black;
    display: nones;
    flex-flow: row wrap;
    width: 40%;
    margin:0;
}

.tab {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    border-bottom: 2pt solid black;
    margin: 0;
    width: 200%;
    padding-top: 5pt;
    padding-bottom: 5pt;
    padding-left: 10pt;
    padding-right: 10pt;
    background-color: white;
}

#legend-show{
    margin: 0;
    width: 100%;
}


.info{
    width: 30%;
    display: block;
    background: white;
}

p {
    text-indent: 10pt;
    margin: 0;
}

h2{
    margin: 0;
    margin-left: 15pt;
    width: 80%;
}

h3{
    margin: 0;
    margin-left: 15pt;
    width: 80%;
}


/* SVG */
.wave{
    position: absolute;
    z-index: -100;
    width: 100%;
    margin: 0;
}

path{
    cursor: pointer;
    fill:none;
    stroke: transparent;
    mix-blend-mode: multiply;
    stroke-width:5;
    stroke-linecap:round;
}

ellipse{
    fill:none;
    stroke: transparent;
    stroke-width:5;
    stroke-linecap:round;
    mix-blend-mode: multiply;
}

text{
    font-size: 20pt;
    font-family: sans-serif;
}

#one path:hover{
    stroke:#fd2bda;
}

#two path:hover{
    stroke: cornflowerblue;
}

#three path:hover{
    stroke: rgb(119, 119, 119);
}

#three ellipse:hover{
    stroke: rgb(119, 119, 119);
}

#four path:hover{
    stroke: rgb(241, 36, 36);
}

#five path:hover{
    stroke: rgb(35, 187, 86);
}