body {
    background-color: #333; 
	color: #DDD;
	font-size: .9em;
	font-family: "Open Sans", sans-serif;
	padding: 1em 0;
	margin: 0;
}

button {
    background-color: #BBB;
}

p {
	margin-bottom: 0;
	margin-top: 1em;
	padding: 0 2em;
}

p.half {
    margin-top: .33em;
}

a {
    color: #DDD;
    cursor: pointer;
    text-decoration: underline;
}

a:hover {
    color: #FFF;
}

input[type=text],
input[type=text]:active,
input[type=text]:focus,
textarea {   
    background: #272727;
    border: 0;
    color: #DDD;
    font-family: "Open Sans", sans-serif;
    margin: 1em 0 0 1em;
    outline: 0;
    padding: .5em 1em;
    resize: none;
}

textarea#comments {
    height: 50%;
    width: 50%;
}

span {
    display: block;
    padding: 0 2em;
}

#archivesLink {
    bottom: 2em;
    margin-top: 0;
    position: absolute;
}

#centerdot {
    color: #87E0CF;
    left: 50%;
    position: absolute;
    padding: 0;
    text-align: center;
    top: 50%;
}

#closeout {
    background: #333;
    position: fixed;
    right: 2em;
    top: 1em;
}

#elementMeaning {
    font-size: .9em;
    line-height: 2em;
    text-align: justify;
}

#entrypop {
    background: #333;
    padding: 0 25% 0;
    position: absolute;
    text-align: left;
    top: 2em;
    width: 50%;
    z-index: 1;
}

#entrypop p,
#entrypop span {
    padding: 0;
}

#entrypop .indent {
    padding-left: 2em;
}

#entrypop .quote {
    padding: 0 2em;
}

#entrydate {
    text-align: right;
}

#footer {
    bottom: 2em;
    position: fixed;
    right: 2em;
    text-align: center;
}

#inthebeginning {
    position: relative;
    text-align: center;
    top: 10em;
}

#inthebeginning .pixel .pixeldesc {
  visibility: visible;
  opacity: 1;
}

#inthebeginning a {
    text-decoration: none;
    width: 25%;
}

#meaningControl {
    background-image: linear-gradient(to bottom right, #FFF, #CCC);
    border-radius: 0 3px 3px 3px;
    color: #333;
    left: 0;
    position: absolute;
    top: 0;
}

#meaningControl p {
    font-size: .8em;
    margin: 0;
    padding: .4em .8em;
}

#meaningControl p:hover {
    background-color: #000;
    color: #FFF;
    cursor: pointer;
}

#nav {
    height: 70%;
    margin: 2em;
    position: absolute;
    top: 30px;
}

#nav a {
    position: absolute;
    text-decoration: none;
    transition: top 2s, left 2s;
}

#plmmMenu {
    float: left;
    padding-bottom: 1em;
    width: 50%;
}

#plmmMenuWrap p {
    margin-top: 0;
}

#plmmMenuWrap span {
    display: inline;
    padding: 0;
}

#plmmStatus {
    float: right;
    font-size: .8em;
    text-align: right;
    width: 50%;
}

#realityPlane {
    position: relative;
    height: 100%;
    width: 100%;
}

#realitySVG {
    background-color: #333;
}

#rnav {
    height: 70%;
    position: relative;
}

#rnav a,
#rnav .pixel {
    padding: 0;
    position: absolute;
    text-decoration: none;
    transition: top 3s, left 3s;
}

#selectionMask {
    background: black;
    position: absolute;
}

.heading {
    font-weight: bold;
    text-align: center;
}

.hidden {
    opacity: 0;
    transition: visibility 1s, opacity 1s;
    visibility: hidden;
}

#selectionMask.hidden,
#meaningControl.hidden {
    opacity: 0;
    transition: visibility .5s, opacity .5s;
    visibility: hidden;
}

#selectionMask.hidden.visible {
    opacity: .4;
    visibility: visible;
}

#meaningControl.hidden.visible {
    opacity: 1;
    visibility: visible;
}

#chaosMachine {
    text-align: center;
}

#chaosMachine button {
    margin-top: 2em;
    background-color: #EEE;
}

.display_none {
    opacity: 0;
    transition: visibility 1s, opacity 1s;
    visibility: hidden;
}

.hidden.visible {
    opacity: 1;
    visibility: visible;
}

.main-box {
    display: block;
}

.meaning_dot {
    fill: #FFF;
    opacity: 1;
    r: 3;
    stroke: #333;
    stroke-width: 3px;
    transition: visibility 1s, opacity 1s;
    visibility: visible;
}

.meaning_dot.display_none {
    opacity: 0;
    transition: visibility 1s, opacity 1s;
    visibility: hidden;
}

.meaning_dot:hover {
    cursor: crosshair;
}

.meaning_dot.chosen {
    fill: #F00;
}

.photo {
    margin-top: 1em;
    max-width: 100%;
}

.photo.portrait {
    background: #000;
    max-width: 50%;
    padding: 0 25%;
}

.pixel {
    position: relative;
    display: inline-block;
}

.pixel .pixeldesc {
    font-size: .8em;
    visibility: hidden;
    width: 10em;
    background-color: #2A2A2A;
    color: #DDD;
    text-align: center;
    border-radius: .3em;
    padding: .5em 0;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity .5s;
}

.pixel.unfinished,
.pixel.unfinished .pixeldesc,
.pixel.unfinished:hover .pixeldesc {
    color: #5A5A5A !important;
}

.pixel.show .pixeldesc {
    background-color: inherit;
    visibility: visible;
    opacity: 1;
}

.pixel.show:hover .pixeldesc {
    color: #FFF;
}

.life.pixel:hover .pixeldesc {
  visibility: visible;
  opacity: 1;
}

.random_thought {
    opacity: 0;
    position: absolute;
    transition: visibility 1s, opacity 1s;
    visibility: hidden;
    width: 100%;
}

.random_thought.show {
    opacity: 1;
    transition: visibility 1s, opacity 1s;
    visibility: visible;
}

.startposition {
    left: 50% !important;
    top: 50% !important;
}

.subtext {
    font-size: .8em;
    text-align: center;
}

.thinking {

}

.work {
    color: #F77;
}

.story {
    color: #7F7;
}

.scootering {
    color: #77F;
}

.metaphysical {
    color: #FF7;
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.blink {
    animation: blink 1s infinite;
}

.increase {
    animation: increase .3s 6;
}

@keyframes increase {
    0% {
        color: #DDD;
    }

    50% {
        color: #0F0;
    }

    100% {
        color: #DDD;
    }
}

@media only screen and (min-width: 960px) {
    .meaning_dot {
        r: 3;
        stroke-width: 3px;
    }
}

@media only screen and (min-width: 1920px) {
    #entrypop {
        padding: 0 35% 0;
        width: 30%;
    }
}

@media only screen and (min-width: 1600px) {
    #entrypop {
        padding: 0 32% 0;
        width: 36%;
    }
    
    .meaning_dot {
        r: 3;
        stroke-width: 4px;
    }
}

@media only screen and (max-width: 1024px) {
    #entrypop {
        padding: 0 20% 0;
        width: 60%;
    }
}

@media only screen and (max-width: 768px) {
    #entrypop {
        padding: 0 5% 0;
        width: 90%;
    }
    
    #inthebeginning a {
        width: 40%;
    }
}