html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%;  font: inherit; vertical-align: baseline; box-sizing: border-box;}
blockquote, q {quotes: none;}
b, strong {font-weight:700;}


body {
  background: #dcdcdc; 
  color:#111;
  font-family: "IBM Plex Mono", monospace;
  /* box-shadow: 0 0 100px rgba(0,0,0,0.69) inset; */
  font-size: 15px;
  border:10px solid #333;
}


p {line-height: 1.54em; margin-bottom: 0px;
  color:#111;}
p.h3 {font-size: 1.5em;}

.clear {
  clear:both;
}


.container {width:94%; margin: 0px auto; padding: 0px; max-width: 1400px;}
.container-squeeze { max-width: 700px;}

.rotation {cursor: grab; z-index: 2;}

.logo {width:60%; max-width: 100px; margin: 18px 0px 7px 0px; padding: 0px; border:0;}
.logo-home {max-width: 150px; margin:40px 0px;}

.keycap-list img {width: 30%; margin: 0 1.55% 20px 1.55%; padding: 0; border: 1px solid #dcdcdc; float: left;   z-index: 3;}
.keycap-list img:nth-of-type(n + 2) { margin: 0 0% 0 0; padding: 0; border: 1px solid #ff0000; float: left;   z-index: 3;}
.keycap-list img:hover {border: 1px dotted #111;}

i {font-style: italic; font-weight: 300;}
b {font-weight: 800;}
.alink {text-decoration: underline;}

.profile-text {float: left; width: 38%; margin: 0px 0px 0px 0px; padding: 190px 0px 0px 0px; }
.deets_links {font-size: 0.87em; font-weight: 300;}
.profile-text-card {width:90%; padding: 30px 20px 80px 20px; background: #eee;;
-webkit-box-shadow: 12px 12px 34px 6px rgba(0,0,0,0.0); 
box-shadow: 12px 12px 34px 6px rgba(0,0,0,0.0);
border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;
}
.profile-image {float: right; width: 60%; margin: 0px 2% 0px 0px; padding: 0px; z-index: 2; }

.footer {margin-top: 60px; margin-bottom: 0px;}
.footer_logo {max-width: 80px;}

.instructions{
  text-align: center; margin: 0px auto 0px auto ; z-index: 1; font-size: 0.88em; color:#111;
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-duration: 15s;
  animation-direction: alternate;
}

@keyframes fade{
    0% { opacity: 1;margin: 0px 0px 0px 0px;}
    5% {margin: 0px 15px 0px 0px;}
    9% { margin: 0px 0px 0px 15px;}
    15% { margin: 0px 15px 0px 0px;}
    19% { margin: 0px 0px 0px 15px;}
    25% { margin: 0px 15px 0px 0px;}
    29% { margin: 0px 0px 0px 15px;}
    35% { margin: 0px 15px 0px 0px;}
    39% { margin: 0px 0px 0px 15px;}
    45% {margin: 0px 15px 0px 0px;}
    49% { margin: 0px 0px 0px 15px;}
    55% {  margin: 0px 15px 0px 0px;}
    59% {  margin: 0px 0px 0px 0px;}
    65% { margin: 0px 0px 0px 0px;}
    69% { margin: 0px 0px 0px 15px;}
    75% {  margin: 0px 15px 0px 0px;}
    79% {  margin: 0px 0px 0px 0px;}
    85% {  margin: 0px 0px 0px 0px;}
    89% {  margin: 0px 0px 0px 0px;}
    95% { opacity: 0; margin: 0px 0px 0px 0px;}
    100%{  opacity: 0;margin: 0px 0px 0px 0px;}
}

.tossanim{
  animation-name: toss;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-duration: 0.76s;
  animation-direction: alternate;
}

@keyframes toss{
    0% { margin: 830px 0px 0px -300px; transform: rotate(49deg);  opacity: 0.0}
    100% {  margin: -1px 0px 0px 1px; transform: rotate(-1.4deg); opacity: 1}
}



  
.halftone {
  filter: saturate(0) brightness(1.6) contrast(59) opacity(1);
  -webkit-filter: saturate(0) brightness(1.6) contrast(59) opacity(1);
}

.halftone::after {
  content: ' ';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-size: 0px 17px, 18px 17px;
  background-position: 0, 24px 21px;
  background-image: radial-gradient(circle, #404040, rgba(255, 255, 255, 0) 60%), radial-gradient(circle, #404040, rgba(255, 255, 255, 0) 60%);
  mix-blend-mode: multiply;
}




/* ---------------- Mobile ---------------- */
@media only screen and (max-width: 94em) {
  body { border:10px solid #333; }
  .profile-text { width: 40%;  padding: 190px 0px 0px 0px; }
  .profile-image {width: 60%; margin: 0px 0% 0px 0px; }
}

/* ---------------- Mobile ---------------- */
@media only screen and (max-width: 84em) {
  body {border:10px solid #333; }
  .profile-text { padding: 140px 0px 0px 0px; }
    .profile-text-card {width:100%; }
}

/* ---------------- Mobile ---------------- */
@media only screen and (max-width: 74em) {
  body { border:10px solid #333; }
  .profile-text { padding: 100px 0px 0px 0px; }
}

/* ---------------- Mobile ---------------- */
@media only screen and (max-width: 64em) {
  body { border:10px solid #333; }
  .profile-text { float:none; width:100%; max-width: 560px;  padding: 0px 0px 0px 0px;  margin: 0px auto; }
  .profile-image {float: none; width: 100%; margin: 0px 0% 0px 0px; }
}

/* ---------------- Mobile ---------------- */
@media only screen and (max-width: 32em) {
  body { font-size: 14px; border:8px solid #303030; }
  .container {width:90%; }
  .logo { max-width: 90px; margin: 18px 0px 7px 0px; }
  .profile-image {width: 90%;  margin: 20px auto 10px auto;  }
  .keycap-list img {width: 47%; margin: 0 3% 10px 0%; }
}