* {
  box-sizing: border-box;
}

body {
  font-family: monospace;
  font-size: 1.2em;
  line-height: 1.2em;
  background: #eee;
  margin: 0;
}

h1, h2, h3, h4, h5, h6, p { margin-top: 0 }

h1 {
  color: #373fff;
  line-height: 1em;
  font-size: 1.8em;
}

[v-cloak] {
  display: none;
}

button, input, label {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

#app-loading {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin-top: -.6em;
}

#intro {
  background: white;
  padding: 2em;
  margin: 1em auto;
  max-width: 640px;
  position: relative;
}

#intro p.expand {
  margin: -2em;
  margin-bottom: 2em;
  padding: 1.4em 4em 1em;
}

img {
  max-width: 100%;
}

/* Main page flex layout */

.flex-parent {
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  flex-direction: column;
  align-items: center;
  padding: 1em;
}

.flex-top {
  flex-grow: 1;
}

/* Top tweet panel */

#twttr-widget {
  background: white;
  width: 400px;
  text-align: center;
  box-shadow: .5em .5em 1em 0 rgba(0,0,0,.1);
  transform: scale(1);
  position: relative;
  transition: transform .25s ease, opacity .25s;
}

#twttr-widget.loading {
  transform: scale(0);
  transition: none;
}

#twttr-widget.faded {
  opacity: 0;
  pointer-events: none;
}

#twttr-widget.unfollowed {
  transition: transform .25s ease, opacity .25s;
  opacity: 0;
  transform: rotate(-10deg) translate(-25%,200px) scale(.5);
}

#twttr-widget.kept {
  transition: transform .25s ease, opacity .25s;
  opacity: 0;
  transform: rotate(10deg) translate(25%,200px) scale(.5);
}

#iframe-container {
  position:absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right:0;
  overflow-y: scroll;
  -webkit-overflow-scrolling:touch;
}

/* Backup tweet rendering */
#backup-tweets {
  padding: 0;
  margin: 0;
  position:absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right:0;
  overflow-y: scroll;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: .7em;
}
.backup-tweets-banner {
  background: gray;
  color: white;
  text-align: center;
}
.backup-tweet {
  text-align: left;
  padding: 1em; 
  border-bottom: 1px solid #eee;
  padding-left: 4em;
  position: relative;
}
.backup-tweet-avatar {
  position: absolute;
  left: 1em;
  width: 2em;
  height: 2em;
  top: 1em;
  border-radius: 999px;
}
.retweet {
  padding-top: .5em;
  padding-left: 4em;
  margin-bottom: -.8em;
  text-align: left;
}

.backup-tweet-image {
  margin-top: 1em;
}

.backup-tweet .backup-tweet {
  margin-top: 1em;
  border: 1px solid #eee;
}

/* Bottom control panel */

#ctrl {
  position: relative;
  padding: 1.2em;
  min-height: 8em;
  max-height: 50vh;
  width: 640px;
  background: white;
  margin: 1em;
}

#ctrl h3 {
  margin-bottom: .25em;
}

#ctrl h4 {
  margin-bottom: .5em;
}

#ctrl p {
  padding-right: 60px;
}

#btns {
/*   float: right; */
  text-align: center;
  position: absolute;
  bottom: -1.5em;
  left: 0;
  right: 0;
/*   margin-top: .5em; */
}

.button {
  background: white;
  color: blue;
  box-shadow: .25em .5em .5em 0 rgba(0,0,0,.1);
  font-weight: bold;
  padding: .5em 1em;
  margin-bottom: .5em;
  text-align:center;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  text-decoration: underline;
  border:0;
}

#btns .button {
  min-width: 8em;
}

.button:hover {
  text-decoration:none;
}

.button:active {
  background: #eef;
}

.button-menu {
  width: 17em;
  position: absolute;
  left: 50%;
  margin-left: -8.5em;
  bottom: .5em;
  background: white;
  box-shadow: .25em .5em 1em 0 rgba(0,0,0,.1);
}

.button-menu .button {
  box-shadow: none;
  border-bottom: 1px solid #eee;
  margin-bottom: 1px;
}

.button-menu > .button:last-child {
  border: none;
  margin: 0;
}

.button-menu-scrollable {
  max-height: 70vh;
  overflow-y: auto;
}

.input {
  padding: .5em 1em;
  border: 0;
  border-bottom: 1px solid #eee;
  text-align: center;
}

.abs { position: absolute }
.right {
/*   right: -1em; */
  left: 90%;
  transform: rotate(-10deg);
}
.button.right:hover{
  transform: rotate(-5deg);
}
.left {
/*   left: -1em; */
  right:90%;
  transform: rotate(10deg);
}
.button.left:hover{
  transform: rotate(5deg);
}

#logout {
  position: fixed;
  right: 0;
  bottom: 0;
}

#debug {
  display: none;
}

#avvy {
  background-image: url('https://cdn.glitch.com/74263575-5bd6-41c7-8958-90c644fd4514%2Ftokimeki-avvy.gif?1549222068383');
  background-size: 100%;
  width: 160px;
  height: 160px;
  bottom: -2em;
  position: absolute;
  right: -80px;
  pointer-events: none;
}

#avvy.smile {
  background-image: url('https://cdn.glitch.com/74263575-5bd6-41c7-8958-90c644fd4514%2Ftokimeki-avvy-smile.png?1549222141510');
}

#avvy.reading {
  background-image: url('https://cdn.glitch.com/74263575-5bd6-41c7-8958-90c644fd4514%2Ftokimeki-avvy-read.gif?1549222109284');
}

#preload {
  width: 1px;
  height: 1px;
  opacity: .1;
  position: fixed;
  bottom: -1px;
  right: -1px;
  overflow: hidden;
  pointer-events: none;
}

#preload #avvy {
  background-position: -9999px, -9999px;
}


#avvy-intro {
  background-image: url('https://cdn.glitch.com/74263575-5bd6-41c7-8958-90c644fd4514%2Ftokimeki-avvy.gif?1549222068383');
  background-size: 100%;
  width: 160px;
  height: 160px;
  bottom: 0;
  left: 50%;
  margin-left: 240px;
  pointer-events: none;
}

#alert {
  background: white;
  padding: 1em;
  bottom: 1em;
  right: 1em;
  position: fixed;
}

.card {
  background: white;
  box-shadow: .5em .5em 1em 0 rgba(0,0,0,.1);
}

.circle {
  border-radius: 9999px;
  overflow: hidden;
}

.flex { display: flex }
.flex-col { flex-direction: column }
.fixed { position: fixed }
.dib { display: inline-block }
.block { display: block }
.w100 { width: 100% }
.h100 { height: 100% }
.overflow-hidden { overflow: hidden }
.flt-r { float: right }
.just-cent { justify-content: center }

.bold { font-weight: bold }
.notbold { font-weight: normal }
.gray { color:#888 }
.black { color: black }
.logored { color: #f35535 }
.logoredbg { background: #f35535 }
.keepblue { color:blue }
a.keepblue:visited { color: blue }
a:hover { text-decoration: none }
.nodec { text-decoration: none }
a.nodec:hover { text-decoration: underline }

hr {
  border: 1px solid #ccc;
}

/* animations */

/* snowfall: http://pajasevi.github.io/CSSnowflakes/ */
@keyframes snowflakes-fall {
  0% {
    top: -10%
  }
  100% {
    top: 100%
  }
}
@keyframes snowflakes-shake {
  0%, 100%{
    transform: translateX(0)
  }
  50%{
    transform: translateX(80px)
  }
}

.snowflake {
  position: fixed;
  top: -10%;
  user-select: none;
  pointer-events: none;
  animation-name: snowflakes-fall, snowflakes-shake;
  animation-duration:10s,3s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-play-state: running, running;
}
.snowflake img {
  width: 36px;
  height: 36px;
}