/*

DART 450, Winter 2018
Midterm / Blob Chat
Laura Hernandez

Online communication has become a big part of what the Internet is. And what better way to communicate than through Blobs!

This CSS sets the styling and positioning for the background and blobs, as well as the typeface used.

*/

@import url('https://fonts.googleapis.com/css?family=Roboto');

* {
  margin:0;
  padding: 0;
}

html, body {
  background-color: #202020;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: rgba(245, 245, 245, 1);
  overflow: hidden;
}

img {
  width: 50px;
  height: 50px;
  cursor: pointer;
}

#mainBlob {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, 0);
  cursor: none;
}

#startChatting {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%, 0);
  color: rgba(245, 245, 245, 0.7);
  font-size: 14px;
  cursor: pointer;
}

.blobsHide {
  display: none;
}

#hiBlob {
  position: absolute;
  width: 100px;
  left: 40%;
  transform: translate(-50%, 0);
}

#sadBlob {
  position: absolute;
  width: 100px;
  left: 50%;
  transform: translate(-50%, 0);
}

#worriedBlob {
  position: absolute;
  width: 100px;
  left: 60%;
  transform: translate(-50%, 0);
}

#giftBlob {
  position: absolute;
  width: 100px;
  top: 50%;
  left: 45%;
  transform: translate(-50%, 0);
}

#giftDiv {
  display: none;
}

#winkBlob {
  position: absolute;
  width: 100px;
  top: 50%;
  left: 55%;
  transform: translate(-50%, 0);
}

#winkDiv {
  position: absolute;
  width: 300px;
  top: 70%;
  left: 50%;
  transform: translate(-50%, 0);
  display: none;
}

.winkClass {
  text-align: center;
  font-size: 40px;
}

#sadCloudBlob {
  position: absolute;
  width: 100px;
  top: 50%;
  left: 45%;
  transform: translate(-50%, 0);
}

#river {
  position: absolute;
  width: 100%;
  height:50%;
  bottom:-50%;
  background: linear-gradient(to right, rgba(127,225,250,1) 0%, rgba(2,79,161,1) 100%);
}

#dizzyBlob {
  position: absolute;
  width: 100px;
  top: 50%;
  left: 55%;
  transform: translate(-50%, 0);
}

#dizzyDiv {
  width: 50%;
  text-align: center;
  position: absolute;
  font-size: 30px;
  top:20%;
  left: -100%;
}

#worriedLabel {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#worriedInput {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#worriedButton {
  position: absolute;
  height:20px;
  width: 65px;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#cheerBlob {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#bounceBlob {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#grimaceBlob {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#grimaceDiv {
  text-align: center;
  width: 200px;
  position: absolute;
  padding-top:50px;
  left: 50%;
  transform: translate(-50%, -50%);
}

#source {
  position: absolute;
  bottom: 10px;
  left: 45%;
  transform: translate(-50%, 0);
}

#source a{
  text-decoration: none;
  color: rgba(245, 245, 245, 0.54);
  font-size: 14px;
}

#reload {
  position: absolute;
  bottom: 10px;
  left: 55%;
  transform: translate(-50%, 0);
  cursor: pointer;
  color: rgba(245, 245, 245, 0.54);
  font-size: 14px;
}