attempting-diffraction/style.css

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


:root{
    --background: #252525;
    --entities: black;
    --highlight: #e4e5e2;
    --font-title: sans-serif;
    --font-body: monospace;
    --font-symbols: symbols;
    --white: #e4e5e2;
    --light-yellow: #ffffcc;
    --silver: #999999;
    --links-color: #3366ff;
    --body-text-color: #3b3b3b;
    --permeable: #66cc66;
    --rumination: #3366ff;
    --tool: #999999;
    --dear: #ffcc66;
    --questions: #cc3333;
    --brief: #ff6633;
}

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

.show-on {display:block;}

.comic {
    width: 124px;
    height: 124px;
    margin: 0;
    padding: 0%;
    border-right: 2pt solid black;
    border-bottom: 2pt solid black;
    border-left: 2pt solid black;
    background-color: var(--white);

}

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

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

.comic img{
    width: 100%;
}

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

.header {
    display:flex;
    position: absolute;
    flex-flow: row wrap;
    width: 40%;
    margin:0;
}

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

.tab:hover {
    -moz-box-shadow:    inset 0 0 5px var(--background);
    -webkit-box-shadow: inset 0 0 5px var(--background);
    box-shadow:         inset 0 0 5px var(--background);
}

.tab-info {
    display: none;
    border-bottom: 2pt solid black;
    border-right: 2pt solid black;
    margin: 0;
    width: 150%;
    padding-top: 5pt;
    padding-bottom: 5pt;
    padding-left: 10pt;
    padding-right: 10pt;
    background-color: var(--white);
}

#diffraction{
    position: absolute;
    width: 500px;
    top:0px;
    right: 0px;
    padding-top: 5pt;
    padding-bottom: 5pt;
    padding-left: 10pt;
    padding-right: 10pt;
    border-bottom: 2pt solid black;
    border-left: 2pt solid black;
    border-right: 2pt solid black;
    background-color: var(--white);
    z-index: 1;
}

#diffraction a{
    font-size: 13.5pt;
    color: blue;
}

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

a{
    color: black;
    text-decoration: none;
}

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


h1 {
    font-size: 13pt;
}

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

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


/* SVG */
.wave{
    position: absolute;
    z-index: -100;
    width: 100%;
    margin: 0;
    -moz-box-shadow:    inset 0 0 10px var(--entities);
    -webkit-box-shadow: inset 0 0 10px var(--entities);
    box-shadow:         inset 0 0 10px var(--entities);
}

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;
}

.permeable {
    color: #66cc66;
}

.rumination {
   color: #3366ff;
}

.tool {
    color: #999999;
}

.dear {
    color: #ffcc66;
}

.questions {
    color: #cc3333;
}

.brief {
    color: #ff6633;
}

#permeable path:hover{
    stroke:#66cc66;
}



#rumination path:hover{
    stroke: #3366ff;
}

#tool path:hover{
    stroke: #999999;
}

#dear ellipse:hover{
    stroke: #ffcc66;
}

#questions path:hover{
    stroke: #cc3333;
}

#brief path:hover{
    stroke: #ff6633;
}

@media screen and (min-width: 1400px) {
    #diffraction {
      font-size: 11pt;
    }

    .tab-info{
        font-size: 10pt;
    }

    .tab-info p{
        margin-bottom: 2.5%;
    }

    #diffraction a{
        font-size: 10pt;
    }
  }