/*
  *  sunrise gradient background
 */
html {
  background: linear-gradient(135deg, hsl(27, 87%, 57%) 0%, hsl(214, 82%, 65%) 100%);
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.scroll-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000;
}

.scroll-text {
  position: absolute;
  color: #ffffff;
  white-space: nowrap;
  pointer-events: none;
  z-index: -100;
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000000;
  background-color: black;
  transition: opacity 1s ease-out;
  pointer-events: none;
}

#scroll-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#tweet-container {
  width: 100vw;
  height: 100vh;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 500px;
  overflow: hidden;
  z-index: 5000;
}

#cilla-tweet {
  width: 320px;
  z-index: 6000;
}