header {
}

body.gallery {
    /* background: hsl(200,60%,70%);*/
}

body .wrapper {
    /*background-color: hsla(0,0%,80%,0.5);*/
}

section#sites>.background {
    background-image: url(img/vigeland4.jpg);
}

section#games>.background {
 /* background: #333; */
}

section#apps>.background {
    background-image: url(img/tahoeSS3.jpg);
    background-image: url(img/whitetower.jpg);
    background-image: url(img/glendalough1.jpg);
}

section#other>.background {
    background: #458;
}

#games .background svg {
    /*background: rgba(128,128,128,0.5); */
    stroke: #111;
    stroke-width: 2;

    -webkit-transition-property: left, top; /* fill */
    -moz-transition-property: left, top; /* fill */
    -o-transition-property: left, top; /* fill */
    transition-property: left, top; /* fill */
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-timing-function: linear;
    -moz-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    transition-timing-function: linear;
/* namely for position -- so, gotta uhm destinate svg to 1s worth of travel's loc fwd (redo per animate
call), back up to where they stopped if they stop.. (i.e. revert to current location/orientation per
frame, then update to 1s fwd if moving.)   */
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    position: absolute;
}

#games .background svg .dot {
    opacity: 0.2;
    display: none;
}

#games svg.tank {
    top: 39%;
    left: 11%;
}

#games svg.lasertank {
    top: 49%;
    left: 26%;
}

#games svg.destroyer {
    top: 39%;
    left: 41%;
}

#games svg.bomber {
    top: 49%;
    left: 56%;
}

#games svg.corvette {
    top: 39%;
    left: 71%;
}

#games svg .bevel {
    stroke: rgba(0,0,0,0.3);
    stroke-width: 3px;
}

/*
ok, so ... instead use transition and set the transition-duration
(or the correct one, if used for multiple cases)
to whatever's appropriate for amount of turning..
(could add a 'turn' class of course)
*/
#games .background svg * {
    -webkit-transform-origin: 50px 50px 0px;
    -moz-transform-origin: 50px 50px 0px;
    -ms-transform-origin: 50px 50px 0px;
    -o-transform-origin: 50px 50px 0px;
    transform-origin: 50px 50px 0px;
}

#games svg.tank .turret {
    /*transition: transform 1s linear;*/
    stroke-linejoin: round;
}

#games svg.tank .chassis {
/*    transition: transform 1s linear; */
    /* TBD: maybe only charge time for transformation while tank's officially moving? (when correcting
       position after stopping, jump to correct spot, eh?) */
/*
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
*/
}

#games svg.tank .propulsion {
    stroke: #333;
    stroke-width: 10px;
    stroke-dasharray: 4,1;
    /* opacity: 0.8; */

    /*stroke-dashoffset: 0;*//*to be individually set per propulsion style*/
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/* a better pseudo-class than ..-of-type ? (..-of-class or something?) oh, internet... */
#games svg.tank.ccw .propulsion:nth-of-type(2),
#games svg.tank.cw .propulsion:first-of-type,
#games svg.tank.forward .propulsion {
    animation-name: ftread;
}

#games svg.tank.cw .propulsion:nth-of-type(2),
#games svg.tank.ccw .propulsion:first-of-type,
#games svg.tank.reverse .propulsion {
    animation-name: rtread;
}

@keyframes ftread {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: 10; }
}

@keyframes rtread {
    from { stroke-dashoffset: 10; }
    to { stroke-dashoffset: 0; }
}

#games svg.tank .bevel {
    stroke-width: 5px;
}

#games svg.lasertank .propulsion {
    stroke: rgba(255,192,203,0.5); /* in lieu of animation */
    stroke-width: 9px;
    stroke-linecap: round;

    animation-name: hoverglow;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}

@keyframes hoverglow {
/* maybe stroke width too? */
    from { stroke: rgba(200,200,200,0.4); }
    to { stroke: rgba(200,200,200,0.8); }
}

#games svg.destroyer .bevel {
    stroke: rgb(0,0,0);
}

#games svg.bomber .propulsion {
    stroke-width: 7px;
    stroke-linecap: round;
    stroke: #222;
}

/* TODO: set bomber turret stroke to radial gradient so only barrel is opaque */

#games svg.corvette .turret {
    /* this "turret" doesn't turn (corvettes drop mines), so this represents a cabin. */
    stroke: none; /* TBD: or dashes or dots or something (maybe still not opaque) */
    fill: rgba(0,0,0,0.666);
}

#games svg.corvette .propulsion {
    stroke: rgba(192,203,255,0.5); /* in lieu of animation */
    stroke-width: 9px;
    stroke-linecap: round;

    animation-name: thrustglow;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}

@keyframes thrustglow {
/* maybe stroke width too? */
    from { stroke: rgba(200,200,200,0.4); }
    to { stroke: rgba(200,200,200,0.8); }
}


#games .green { fill: green; color: green; }
#games .red { fill: crimson; color: crimson; }
#games .yellow { fill: gold; color: gold; }
#games .purple { fill: purple; color: purple; }

#games .pink { fill: pink; color: pink; }
#games .cyan { fill: skyblue; color: skyblue; }
#games .blue { fill: navy; color: navy; }
#games .indigo { fill: indigo; color: indigo; }
#games .orange { fill: orange; color: orange; }

#games .debug {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    padding: 4px;
    text-shadow: 0 0 18px #222;
    font-weight: bold;
}

#games .debug .cell {
    display: inline-block;
    width: 10em;
    max-width: 10%;
    min-width: 5em;
    border: 1px solid #222;
    background: rgba(10,10,10,0.7);
}

#games .debug .header.cell {
    color: #eee;
}