/* YUI 3.5.0 reset.css (http://developer.yahoo.com/yui/3/cssreset/) */
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
* {box-sizing: border-box;}
/*.satisfy {font-family: 'Satisfy', cursive;}
.yellowtail {font-family: 'Yellowtail', cursive;}*/
.bad {font-family: 'Bad Script', cursive;}

body {
  font-family: Verdana, sans-serif;
  font-size: 16px;
}

a {
  text-decoration: none;
  color: #35c8da;
}
a:hover {
  color: #35c8ff;
  text-decoration: underline;
}
a:active {
  color: white;
}
a, a * {cursor: pointer;}

#wrap {
  height: 100%; width: 100%;
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  background: url(/new/bg.jpg) center no-repeat;
  background-size: cover;
}

header {
  position: absolute;
  color: white;
  top: 1rem;
  font-size: 4rem;
  left: 50%;
  width: 20vw;
  margin-left: -10vw;
  text-align: center;
  font-weight: bold;
  filter: drop-shadow(0 0 10px rgba(0,0,30,.5));
  cursor: pointer;
}

header {pointer-events: none;}
header span {pointer-events: all;}
header .dreams {position: relative; left: -2vw;}
header .ofthe {position: relative; font-size: 40%; left: 3vw; line-height: 0; top: -1rem;}
header .quill {position: relative; left: 2vw; font-size: 125%; top: -2rem;}
header .quill span {position: relative;}
header .quill span::after {
  content: " ";
  background: url(/new/quill.png) left no-repeat;
  background-size: contain;
  position: absolute;
  height: 4.5rem;
  width: 8rem;
  top: 2rem;
  left: calc(100% - 4px);
  display: inline-block;
  transform-origin: bottom left;
}
header .quill span:hover::after, .dreams:hover + .ofthe + .quill span::after {
  animation: quiver 1.2s infinite;
}
@keyframes quiver {50% {transform: rotate(-4deg);}}

#nap {
  position: absolute;
  color: white;
  bottom: 55%; bottom: 55vh;
  font-size: 1rem; line-height: 1.2rem;
  height: 6rem;
  overflow: hidden;
  transition: height 2s;
  left: 50%;
  width: 240px;
  margin-left: -120px;
  filter: drop-shadow(0 0 10px rgba(0,0,30,.5));
  font-weight: bold;
}
#nap .beneath { text-align: center; }
#nap .thequill { text-align: right; }
@keyframes blink {50% { color: transparent }}
.loader__dot { animation: 2s blink infinite }
.loader__dot:nth-child(2) { animation-delay: 250ms }
.loader__dot:nth-child(3) { animation-delay: 500ms }

#bottom {
  position: absolute;
  color: white;
  top: 50%; top: 50vh;
  text-align: center;
  right: 0; left: 0;
  filter: drop-shadow(0 0 10px rgba(225,225,255,.5));
}

#name {
  font-size: 125%;
  display: inline-block;
  background: black;
  /* background: radial-gradient(rgba(0,0,30,1), rgba(0,0,30,.3)); */
  border-radius: 100%;
  width: 9rem; height: 9rem; line-height: 1.8rem;
  padding: 2rem;
}
#name a {color: #35c8da}
#name a:hover {color: white; text-decoration: none;}
#name .at {line-height: 1rem;}

.sobriquet {
  display: inline-block;
  position: relative;
}
.sobriquet::before, .sobriquet::after {
  position: absolute; top: -4px;
  color: white; background: black;
  padding: 4px 10px;
}
.sobriquet::before {
  content: "Effie L ";
  white-space: nowrap;
  right: 100%;
 border-radius: 8px 0 0 8px;
}
.sobriquet::after {
  content: " Schwartz-Craighill";
  white-space: nowrap;
  left: 100%;
  border-radius: 0 8px 8px 0;
}

#accomplishments {
  /* position: absolute; */
  background: black;
  color: white;
  padding: 1rem 1.6rem;
  border-radius: 8px;
  position: absolute;
  left: 20%; right: 20%;
  margin-top: -1rem;
  font-size: 1rem;
  line-height: 1.6rem;
  text-align: justify;
}

#talents {
  display: none !important;
  color: white;
  position: fixed;
  bottom: 4rem;
  left: 0; right: 0;
  text-align: center;
  filter: drop-shadow(0 0 2px rgba(0,0,30,1)) drop-shadow(0 0 2px rgba(0,0,30,1));
}
#talents span {
  color: #35c8da;
  margin: 16px; padding: 16px;
  border: 2px solid white; border-right: none; border-left: none;
  /* background: rgba(0,0,0,.2); */
}
#talents span:nth-child(even) {
  /* border-top-color: #35c8da; */
}
#talents span:nth-child(odd) {
  /* border-bottom-color: #35c8da; */
}









#bird {
  position: absolute;
  bottom: 16px; right: 16px;
  height: 60px;
  width: 100px;
  background: url(/new/bird.png) left no-repeat;
  background-size: 200%;
  transition: transform .15s;
}
#bird:hover {
  background-position: 100%;
  transform: scale(1.2);
}
#bird:hover::after {
  content: "miss the old DotQ?";
  text-align: center;
  font-size: 12px;
  color: #dfd81c;
  font-family: monospace;
  position: relative;
  top: -10px; left: 4px;
  display: block;
  transform: rotate(5deg);
  transform-origin: top left;
}



@media screen and (max-width: 720px) {
    header {transform: scale(.5); transform-origin: top left;}
    #nap {transform: scale(.7); transform-origin: bottom;}
    #talents {bottom: 1.5rem;}
    #talents span { margin: 8px; padding: 8px;}
    #bottom {top: 45%; top: 45vh; transform: scale(.7); transform-origin: top;}
    #bird {display: none;}
    #accomplishments {
      left: -10%; right: -10%;
    }
}