@font-face {
  font-family: valley; /* set name */
  src: url('../res/valley.ttf'); /* url of the font */
}

html {
  height:100%;
}

body {
  margin:0;
  font-family: sans-serif;
  font-family: valley;
  color: #1f1f1f;
}

.bg {
  animation:slide 10s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #598c9e 50%, #000 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:13s;
}

.bg3 {
  animation-duration:15s;
}

h3 {
  font-size: 1.3rem;
  font-weight: 400;
}


.larger {
  font-size: 1.8rem;
}

#logo {
  height:6em;
  margin-top: 5%;
  margin-right: -2em;
}

.code {
  font-family: monospace;
  background-color: #ccc;
  padding: 0.02rem;
  border: 1px solid #aaa;
  color: #333;
} 

.content {
  background-color:rgba(255,255,255,.8);
  border-radius:.4em;
  box-shadow:0 0 .25em rgba(0,0,0,.25);
  box-sizing:border-box;
  left:50%;
  width: 60%;
  margin-top: 12em;
  padding:10vmin;
  padding-top: 5vmin;
  position:fixed;
  text-align:center;
  top:30%;
  transform:translate(-50%, -50%);

  p {
    text-align: justify;
    text-justify: inter-character;
  } 
}

#coffee {
  font-size: 10em;
}

#start-chat {
  margin-top: 1em;
  width: 10em;
  border-radius: 15px;
  height: 3.4em;
  background-color: #577681;
  font-size: 1.4rem;
  border: none;
  color: #fff;
  font-weight: 600;
  
  &:hover {
    background-color: #f00;
  }
  font-family: valley;
}

.larger {
  font-size: 1.2rem;
}



.intro-text {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  text-align: left;
}

h1 {
  font-family:monospace;
}

@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}