@import url('https://fonts.googleapis.com/css2?family=Inria+Serif:ital,wght@1,300&family=VT323&display=swap');


html { max-width: 100%; margin: 0 auto }

.hidden {display:none !important}

.invisible {visibility:hidden}

body, input {
  font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue LT,Helvetica Neue,Segoe UI,Helvetica,Arial,sans-serif;
  line-height: 1.5rem;
  color: #434548; 
  background-color:#F3EDD6;
}

header {
  display:flex;
  justify-content: space-between;
  max-width:1200px;
  margin:auto;
}

.logoHeader {
  font-family: 'VT323',courier,monospace;
  font-size:20px;
}

.byline {
  font-size:12px;
  margin-top:18px;
}

.logoHeader a {
  color:black;
}

.logo {
  
  font-family: 'VT323',courier,monospace;
  font-size:40px;
  margin-top:0px;
}

.tagline {
  font-family:"Inria Serif",serif;
  font-size:20px;
}

.description {
  font-size:14px;
  line-height:1.1;
  color:#bebebe;
}

@media (max-width: 450px) {
  .description {
    font-size:12px;
  }
}

.homepage {
  max-width: 60%;
  margin: auto;
  position: absolute;
/*   top: 70%; */
  -ms-transform: translate(-50%); 
  transform: translate(-50%); 
  bottom:40px;
  text-align: center;
  left: 50%;
  width:500px;
  border: 2px dotted #000000;
  background-color:white;
  z-index:5;
  border-radius:40px;
  padding:40px;
}

@media (max-width: 450px) {
  .homepage {
    padding:30px;
  }
}

.video {
  max-width: 1200px;
  width: 80%;
  margin: auto;
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translate(-50%);
  -ms-transform: translate(-50%); 
  z-index: -1;
  border-radius:1000px;
}

button { display: block; }

section input, section button, main.error button, main.end button {
  display: block;
  margin: 1rem auto;
}

img.emoji {
  height: 1em;
  width: 1em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.1em;
}
.shrink {
  margin: 20px auto;
  width: 60%;
  text-align: center;
  max-width: 500px;
}

.end {
  width:100%;
}

.end p {
  margin-bottom:40px;
}

.signup {
  margin: auto;
  width: 100%;
}

.tweet-crumbs {
  display:flex;
  flex-wrap:wrap;
}

.end h3 {
  margin-top:40px;
}

main.error p, main.error h1, main.error h4, main.error button, .end p, .end h1, .end h4, .end button, {
  display: block;
  margin: 4rem auto;
  text-align: center;
}

main.error p, main.end p {
  font-size: 10em;
}

main.end h1 {
  font-family:"Inria Serif",serif;
  font-style:italic;

}

.convo-container {
  max-width:1180px;
  margin:auto;
  margin-bottom:250px;
}

h1, h2, h3, h4 {
  font-weight: 700;
  color: #14171a;
  line-height:1.1;
}

a {
  color: #1da1f2;
  text-decoration: none;
}

a:hover{
  text-decoration: underline;
}

form {
  margin-bottom: 25px;
}

button {
  padding: .25em 1em;
  margin: 0;
  border: 2px solid #1da1f2;
  background-color: #1da1f2;
  cursor: pointer;
  color: white;
  font-weight: 700;
  font-size: .87rem;
  line-height: 1.5rem;
  letter-spacing: 0;
  border-radius: 3rem;
  text-align: center;
  outline: 0;
}

button[disabled] {
  border: 2px solid lightgrey;
  background-color: lightgrey;
}

button:active {
  box-shadow: none;
}

li {
  margin-bottom: 5px;
  line-height: 1.5rem;
}

footer {
  margin-top: 50px;
  padding-top: 25px;
  border-top: 1px solid lightgrey;
}

.script {
  display:flex;
  position: fixed;
  width: 480px;
/*   height: 200px; */
  left: 50%;
  transform: translateX(-50%); /* Negative half of width. */
  text-align:left;
  padding:10px 20px;
  border: 2px dotted #000000;
  background-color:white;
  z-index:5;
  border-radius:40px;
  font-family:"Inria Serif",serif;
  font-style:italic;
  bottom: 20px;
  font-size:18px;
  max-width:80%;
}

.scriptText {
  flex-grow:1;
}

.script .tweet-url-container {
  flex-grow:1;
}

.script .tweet-url-container button {
  width:100%;
}

@media (max-width: 450px) {
  .script {
    font-size:14px;
  }


}



.name, .username {
  font-size:10px;
  line-height:12px;
}

.replies {
  display: flex;
}

.replies > p:nth-child(2) {
  flex-grow: 2;
}

.replies small,
.end-hide small {
  min-width: 4.5rem;
  display: inline-block;
  color: grey;
}

.replies p a.tweet-link {
  display: block;
  font-size: 0.8rem;
}

/* .flexContainer {
  display:flex;
} */

/* .tweetEmbedContainer {
  display:flex
} */

.conversation {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  align-content: stretch;
}

main.tweet {
  cursor: pointer;
  width: 290px;
/*   display: block; */
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.metadata {
  font-size:10px;
}

.flex-img-container {
  display:flex;
  flex-wrap:wrap;
}

.tweet-photo {
  flex: 1 1 14%;
  margin: 5px;
  height: 70px;
  background-color: blue;
  object-fit:cover;
  max-width:95%;
}

.carousel {
/*   background: #EEE; */
  width:100%;
/*   display:flex;
  flex-grow:1;
  flex-basis:100%;
  flex-shrink:1; */
  height:100%;
}

.carousel-cell {
  width: 100%;
  height: 100%;
  margin-right: 10px;
  background: #8C8;
  border-radius: 5px;
  counter-increment: carousel-cell;
  background-size:cover;
  background-position:center;
}

/* cell number */
.carousel-cell:before {
  display: none;
  text-align: center;
  content: counter(carousel-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}

.flickity-button {
  background: #333333;
}
.flickity-button:hover {
  background: #F90000;
}

.flickity-prev-next-button {
  width: 30px;
  height: 30px;
  border-radius: 5px;
}
/* icon color */
.flickity-button-icon {
  fill: white;
}
/* position outside */
.flickity-prev-next-button.previous {
}
.flickity-prev-next-button.next {
}

/* position dots in carousel */
.flickity-page-dots {
  bottom: 4px;
}
/* white circles */
.flickity-page-dots .dot {
  width: 5px;
  height: 5px;
  opacity: 1;
  background: transparent;
  border: 2px solid white;
}
/* fill-in selected dot */
.flickity-page-dots .dot.is-selected {
  background: white;
}




.twitter-tweet {
  padding:5px;
  margin:10px auto;
}

.singleTweetContainer {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
}

/* .singleTweet {
  flex:50%;
  flex-wrap:wrap;
  display:flex;
  padding:5px;
} */

input[type=url], input[type=url]:focus {
  border-radius: 0.2rem;
  padding: 0.5rem;
  width: 60%;
  border: 1px solid #d3d3d3;
  font-size: 1.5rem;
  line-height: 2rem;
  outline: none;
  margin: 1rem auto;
}

#tweet-url.error {
  border-color: red;
}



/* main.tweet {
  width: 50%;
  margin: 0 auto 3rem;
}
 */
/* @media (hover: hover) {
  .tweet-wrapper:hover {
    background-color:yellow;
  }
} */


main.tweet .tweet-wrapper {
  font-family: 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
/*   border: 1px solid #d3d3d3;
  border-radius: 0.5rem; */
  padding: 15px;
  display:flex;
  flex-direction:column;
  outline: 1px solid #7F51E1;
  margin-top: 1px;
  margin-left: 1px;
  height: 356px;
}



main.tweet h1 { 
  line-height: normal;
  font-size:18px;
  font-weight:normal;
  flex-grow:1;
  font-family: 'VT323',courier,monospace;
}

main.tweet div.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

main.tweet div.flex-container.hidden {display:none}

main.tweet div.flex-container > div.grow {
  flex-grow: 2;
}


main.tweet img.profile-pic { width: 30px;height: 30px; margin-right: 0.5rem;border-radius: 32px;}
main.tweet .name { font-weight: bold;}
main.tweet .annotations-controls {margin: 0.5rem}
main.tweet .related-label {line-height:2.2rem}



.convo-container .pagination {width: 50%; margin: 0 auto}

div.pagination.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

div.pagination.flex-container > div.grow {
  flex-grow: 2;
}

div.pagination h4 {
  line-height: 0rem;
}

/* Flickity fullscreen v1.0.1
------------------------- */

.flickity-enabled.is-fullscreen {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: hsl(0 0% 0% / 90%);
  padding-bottom: 35px;
  z-index: 1;
}

.flickity-enabled.is-fullscreen .flickity-page-dots {
  bottom: 10px;
}

.flickity-enabled.is-fullscreen .flickity-page-dots .dot {
  background: white;
}

/* prevent page scrolling when flickity is fullscreen */
html.is-flickity-fullscreen {
  overflow: hidden;
}

/* ---- flickity-fullscreen-button ---- */

.flickity-fullscreen-button {
  display: block;
  right: 10px;
  top: 10px;
  width: 24px;
  height: 24px;
  border-radius: 4px;
}

/* right-to-left */
.flickity-rtl .flickity-fullscreen-button {
  right: auto;
  left: 10px;
}

.flickity-fullscreen-button-exit { display: none; }

.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit { display: block; }
.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view { display: none; }

.flickity-fullscreen-button .flickity-button-icon {
  position: absolute;
  width: 16px;
  height: 16px;
  left: 4px;
  top: 4px;
}