@font-face {
    font-family: '8bitOperatorPlus-Regular';
    src: url("/fonts/8bitOperatorPlus-Regular.eot?#iefix") format("embedded-opentype"), url("/fonts/8bitOperatorPlus-Regular.woff") format("woff"), url("/fonts/8bitOperatorPlus-Regular.ttf") format("truetype"), url("/fonts/8bitOperatorPlus-Regular.svg#8bitOperatorPlus-Regular") format("svg");
    font-weight: normal;
    font-style: normal; 
}
@font-face {
    font-family: '8bitOperatorPlus-Bold';
    src: url("/fonts/8bitOperatorPlus-Bold.eot?#iefix") format("embedded-opentype"), url("/fonts/8bitOperatorPlus-Bold.woff") format("woff"), url("/fonts/8bitOperatorPlus-Bold.ttf") format("truetype"), url("/fonts/8bitOperatorPlus-Bold.svg#8bitOperatorPlus-Bold") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "MesloLGS-Italic";
    src : url("/fonts/MesloLGS-Italic.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "MesloLGS-Regular";
    src : url("/fonts/MesloLGS-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "MesloLGS-Bold";
    src : url("/fonts/MesloLGS-Bold.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Hack-Bold";
    src : url("/fonts/Hack-Bold.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Hack-Regular";
    src : url("/fonts/Hack-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Hack-Italic";
    src : url("/fonts/Hack-Italic.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

:root {
    --main-color : #7E57C2;
}

* {
   
    font-family: "Hack-Regular";
}

.froggit{
    width: 75px;
    height: 75px;
    margin-right: 10px;
}

body {
    background-color: #212121;
    color : #d9d9d9;
    font-size: 14px;
    height: 100%;
    max-width: 800px;
    margin : auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    /* line-height: 1.725; */
    /* text-rendering: geometricPrecision; */
}

span.icon, .social-icon { 
    color: var(--main-color);
    fill: var(--main-color);
    font-size: 1em;
    filter : invert(1)
}

a, a:visited, a:hover, a:active {
    color : var(--main-color);
    text-decoration: none;
}

a:hover { 
    color: #e254cf;
}

div.navbar-container {
    display: flex;
    flex-direction: row;
    border-bottom : solid #4d4d4d 1px;
    padding-bottom: 1em;
    margin-bottom: 0.5em;
    align-items: top;
    align-content: center;
}

div.navbar-brand {
    display: flex;
    flex-direction: column;
    margin-right: 10px ;
}

div.navbar-social { 
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   height: 57px;
   margin-right: 20px;
   margin-left: 5px;
   align-items: center;
   justify-content: center;
}

i.fab, i.fas { 
    margin : 0.3em;
}

html,body {
    height: 100%;
}


h2 {
    transition-duration: 0.2s;
    transition-timing-function: ease;
}
h2:hover::before {
    margin-right: 15px;
}

h2::before { 
    content: ">";
    margin-right: 10px;
    color : var(--main-color);
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

h3 {
    text-decoration: underline;
}

.main-content {
    flex: 1 0 auto;
}

div.navbar-gof {
    border : solid #d9d9d9 1px;
    display: flex;
    flex-wrap: wrap;
    align-content : center;
    align-items: center;
    justify-content: center;
    height: 57px;
    width: 60%;
}

@keyframes cellTransition {
    from {
       background-color: #e254cf;
       border-radius: 100%;
    }
    
    to {
        background-color: var(--main-color);
        border-radius: 0%;
    }
}

.gcell {
    width: 5px;
    height: 5px;
    background-color: #d9d9d9;
    margin: 1px;
}

.alive {
    background-color: var(--main-color);
    animation: 1.7s ease-out cellTransition;
}

.chosen {
    background-color: green;
}

.neighbor {
    background-color: greenyellow;
}

.subtitle {
    font-size: 15px;
    font-weight: lighter;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.fofimg{
    width: 200px;
    height: 200px;
}

.fofcontainer a {
    margin : 10px;
    padding : 5px;
}

.highlight {
    overflow-y: scroll;
    scrollbar-color:var(--main-color) #ffffff00;
    scrollbar-width: thin;
}

@keyframes testPi {
    to {
        color :var(--main-color);
    }
}

#pi {
   background-color: #fff;
}

.logo h1 {
    border : 1px solid #d9d9d9;
    margin : auto;
}

main div.content ul,ol {
    margin-top : 5px;
    margin-bottom : 5px;
    list-style-position: inside;
    list-style-type: square;
}

main div.content li {
    color : #d9d9d9;
}


.hexdumpc {
    padding-top: 10px;
    padding-bottom: 10px;
    border-top : 1px dashed #4d4d4d;
    border-bottom : 1px dashed #4d4d4d;
}
.hexdump {
    margin-bottom: 10px;
    margin-top: 10px;
    transition-duration: 0.2s;
    transition-timing-function: ease;
    border-collapse: collapse;
}

.hexdump .addr {
    padding-right: 0.3em;
    color : var(--main-color);
    cursor: pointer;
    transition-duration: 0.1s;
    transition-timing-function: ease;
}

.hexdump .addr:hover {
    color : #e254cf;
    font-size: 13px;
}

.hexdump .hexval{
    word-spacing: 10px;
    padding-right: 10px;
}

.selectedRow {
    background-color: var(--main-color)46;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.nsubtitle {
    margin-top: 10px;
    letter-spacing: 0.3em;
    font-size: 15px;
}

#footer {
    margin-top : 1em;
    border-top : solid #4d4d4d 1px;
    padding-bottom: 4em;
    color : #4d4d4d;
    flex-shrink: 0;
}

article .heading {
    
}

.heading h1::before {
    content : "<";
    color : var(--main-color);
    margin-right: 10px;
}

.heading h1::after {
    content : "/>";
    color : var(--main-color);
    margin-left : 10px;
}

.heading h1 {
    margin: 5px 5px 0px 0px;
}