body, html
{
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100%;

    background-color: Black;/* something dark-blueish? rgb(6, 5, 23);*/
    color: White;
    font-weight: 1.3em;
    font-family: sans-serif;
}
div
{
    margin: 0;
    padding: 0;
}

#badge
{
    position: absolute;
    top: 10px;
    right: 10px;
}

#introvid
{
    display: none;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 50%;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transform: translateY(-50%);
    z-index: 100;
}

#introacid
{
    display: none;
    position: fixed;
    z-index: 101;
    top: 0;
    bottom: 0;
    animation: videoacid 4s ease-in-out alternate infinite;
    font-weight: bold;
    font-size: 5em;
    font-family: Comic Sans, Comic Sans MS, cursive;
}

#introacid > div
{
    animation: videoacidinner 0.5s linear alternate infinite;
}

@keyframes videoacid
{
    0% { color: #F00; left: 1%; top: 5%; transform: initial; }
    25% { color: #0F0; left: 70%; top: 80%; transform: rotateY(180deg); }
    50% { color: #0FF; left: 1%; top: 80%; transform: rotate3d(0, 0, 1, 180deg); }
    75% { color: #F1F; left: 70%; top: 5%; transform: rotate3d(1, 1, 1, 360deg); }
    100% { color: #FF0; left: 22%; top: 42%; transform: rotate3d(0, 0, 1, 10deg); }
}

@keyframes videoacidinner
{
    0% { font-size: 0.9em; text-shadow: 0 0 10px red, 0 0 50px #f0f, rgba(0, 255, 90, 0.78) 4px 4px 0px; }
    50% { text-shadow: 2px 0 0 rgba(42, 255, 255, .95),
        4px 0 0 rgba(33, 33, 234, .9),
        -2px 0 0 rgba(255, 255, 38, .95),
        -4px 0 0 rgba(245, 12, 12, 7);
    }
    100% { font-size: 1.25em; text-shadow: -10px 0 18px rgb(118, 0, 247), 0 3px 4px rgb(0, 0, 0), 15px 0 10px #F00, #ff0 4px 8px 0px; }
}

#landing
{
    padding: 10px;
    text-align: center;
    background-image: url("../img/oldweb/spacebg.gif");
    /*height: 50%;
    min-height: 50%;*/
}
#landing span
{
    font-weight: bold;
    font-style: italic;
    color: #FF0;
}
#landing h1
{
    cursor: pointer;
    font-size: 400%;
    color: #0F0;
    text-shadow: 0 0 10px red, 0 0 50px #f0f, rgba(0, 255, 90, 0.78) 4px 4px 0px;
    /*animation: rotatotomatoinxdd 1s linear;*/
    transition: all .3s ease-out;
}
#landing h1:hover
{
    /*animation: rotatotomato 1.5s linear;*/
    transform: rotate(360deg) scale(0.8);
    transition: all 1s linear;
    color: #00F;
}
#downloads
{
    padding: 5px;
    background-image: url("../img/oldweb/starsbg.gif");
    /*background-attachment: fixed;*/
}
#grid
{
    border: 1px solid #ccc;
    width: 85%;
    margin: 0 auto;
}
#grid .title
{
    font-weight: bold;
    color: #ff0;
    display: block;
}
#grid .title:hover
{
    color: #0ff;
}
#grid td:first-child img.thumbnail
{
    float: left;
    min-height: 80px;
    max-height: 140px;
    margin: 5px;
}
#grid td:first-child
{
    padding: 5px;
}
#grid tr
{
    border: 1px solid #ccc;
}
#grid td
{
    border: 1px solid lime;
}
#grid td:first-child
{
    border: 1px solid #f0f;
}
#grid td:nth-child(2) img
{
    display: inline;
}
#grid td:nth-child(2) img:hover
{
    animation: rotatotomato .33s linear;
}
#grid a:hover, #grid a:active
{
    color: brown;
}
#grid td.clickable
{
    cursor: pointer;
}
#grid td.clickable:hover
{
    border: 1px dashed #0f0;
}

@keyframes rotatotomato
{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes rotatotomatoinxdd
{
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}

#about
{
    background-image: url("../img/oldweb/starbg.gif");
    /*background-attachment: fixed;*/
}
#aboutdiv
{
    background-color: rgb(3, 0, 3);
    margin: 0 auto;
    padding: 5px;
    text-align: justify;
    width: 50%;
    border: 3px double rgba(0, 0, 255, 0.83);
}
#aboutdiv a:hover, #aboutdiv a:focus
{
    color: #ff0;
}
#aboutdiv ul
{
    /*list-style-image: url("../img/oldweb/point.gif");*/
}
#aboutme
{
    margin: 5px;
    background-color: #010105;
    float: right;
    border: 1px solid #112;
}
#aboutme th
{
    text-align: center;
}
#aboutme td:first-child
{
    font-style: italic;
}

#footer
{
    padding: 5px;
    background-image: url("../img/oldweb/matrix.gif");
}
#footerbuttons
{
    text-align: center;
    margin: 0 auto;
    max-width: 500px;
}
#footerbuttons img
{
}

a
{
    color: #66CDAA;
    text-shadow: 1px 0px 3px #F00;
}
a:hover, a:focus
{
    text-shadow:
        1px 0px 3px #F00,
        0px 0px 10px #00F;
}
#yayiamfun:hover
{
    color: #F00;
    cursor: cell;
}

/* blatantly stolen from http://jowieschulner.neocities.org/
I feel bad.*/
.blurcolorthing
{
    color: #FFF;
    text-shadow:
        2px 0 0 rgba(42, 255, 255, .95),
        4px 0 0 rgba(33, 33, 234, .9),
        -2px 0 0 rgba(255, 255, 38, .95),
        -4px 0 0 rgba(245, 12, 12, 7);
}
.blurcolorthing:hover
{
    color: #FF0;
    text-shadow:
        2px 0 1px rgba(42, 255, 255, .95),
        4px 0 1px rgba(33, 33, 234, .9),
        -2px 0 1px rgba(255, 255, 38, .95),
        -4px 0 1px rgba(245, 12, 12, 7),
        0 0 17px #EDFFA3;
}

@keyframes skeltal
{
    0%
    {
        transform: translate3d(-260%,-100%,0) scale(0.5);
    }
    /*80%
    {
        opacity: 1.0;
    }*/
    70%
    {
        /*opacity: 0;*/
        transform: translate3d(-51%, 0, 0) scale(1);
    }
    75%
    {
        opacity: 1.0;
        transform: translate3d(-51%, 0, 0) rotateZ(90deg);
    }
    100%
    {
        opacity: 0;
        transform: translate3d(-51%, 0, 0) rotateZ(90deg);
    }
}

.x-align
{
    margin: auto;
    width: 50%;
}
.y-align
{
    position: absolute; /* section is relative */
    top: 50%;
    transform: translate(0, -50%);
    width: 100%;
}

#links
{
    z-index: 3;
    position: absolute;
    margin: 0;
}
#links img
{
    image-rendering: pixelated;
    image-rendering:-moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering:-webkit-optimize-contrast;
}
#links img:hover
{
    position: relative;
    top: 5px;
}

/****************
media breakpoints
****************/
/* TABLET LANDSCAPE / DESKTOP */
@media only screen and (min-width: 1024px) {
    #links img
    {
        image-rendering: pixelated;
        width: 32px;
    }
}
/* SOMETHING NOT TOO BIG */
@media only screen and (max-width: 1600px) {
    #aboutdiv
    {
        width: 82%;
    }
}
/* SOMETHING SMALL */
@media only screen and (max-width: 542px) {
    #grid
    {
        width: 96%;
    }
}

.neon
{
    text-shadow: 0 0 3px #f00, 0 0 5px #00f;
}

.fact
{
}

.fact::before
{
    content: "Did you know: ";
    color: #0FF;
    font-style: italic;
}
/****************
inline styling
****************/
.warning
{
    cursor: help;
    font-style: italic;
}
.warning:hover
{
    color: #FFF;
    background-color: #F00;
}
.warning::before
{
    font-style: normal;
    content: "WARNING: ";
    font-weight: bold;
}

#grid code
{
    padding: 0;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    margin: 0;
    border-radius: 3px;
    background-color: rgba(39, 0, 255, 0.48);
}