/*

DART 450, Winter 2018
Fremmy / Final
Laura Hernandez

Complete CSS for all Fremmy pages, including navigation, index, dashboard, messages and profile.

*/


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

* {
  margin:0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'VT323',monospace;
}

/* NAV */

#nav {
  position: fixed;
  top: 0;
  width: auto;
  height: 60px;
  left: 50%;
  transform: translate(-50%,0);
}

#nav a {
  float: left;
  padding: 20px 40px;
  width: 20px;
  height: 20px;
}

/* WELCOME CSS */

#welcome {
  position: absolute;
  top: 40%;
  width: 40%;
  left: 50%;
  text-align: center;
  transform: translate(-50%,0);
}

#welcome p{
  padding-bottom: 15px;
}

.headerText {
  font-size: 30px;
  display:block;
  padding-bottom: 10px;
}

/* DASHBOARD CSS */

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

#fremmyStatus {
  background-color: rgb(57, 57, 57);
  text-align: center;
  padding-top: 50px;
  padding-bottom: 50px;
  color: white;
}

.myStatus {
  background-color: rgb(212, 211, 211);
  text-align: center;
  margin-top: 25px;
  padding-top: 30px;
  padding-bottom: 30px;
  color: black;
  line-height: 30px;
  font-size: 18px;
}

#keepTalking {
  text-align: center;
  color: rgb(110, 107, 109);
  padding-top: 5px;
}

/* CHAT CSS */

#chat {
  position: absolute;
  bottom: -510px;
  right: 5%;
  width: 35%;
  height: 450px;
  background-color: white;
  box-shadow: 0 0 10px 5px rgba(176, 176, 176, 0.6);
}

#chattop {
  padding: 10px;
  background-color: white;
  box-shadow: 0 0 5px 3px rgba(176, 176, 176, 0.4);
}

#start {
  color: gray;
  cursor: pointer;
}

#end {
  color: gray;
  cursor: pointer;
}

.them {
  padding: 15px;
  text-align: right;
  color: rgb(5, 181, 165);
  display: none;
}

.answer {
  padding: 15px;
  color: rgb(181, 5, 127);
  cursor: pointer;
  display: none;
}

#profile {
  position: absolute;
  top: 600px;
  background-color: red;
  width: 100px;
  height: 100px;
}

/* CAMERA CSS */
#my_camera {
  position: relative;
  top: 120px;
  margin: 0 auto;
}

#my_result img {
  position: absolute;
  top: 120px;
  left: 50%;
  transform: translate(-50%,0);
  border-radius: 70px;
}
#snapshot {
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translate(-50%,0);
  top: 100px;
}

#about {
  font-size: 30px;
  position: absolute;
  top: 420px;
  left: 50%;
  text-align: center;
  width: 50%;
  transform: translate(-50%,0);
}