/* Fix user-agent */


* {
  box-sizing: border-box;
}

html {
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  color:#fff;
}

html, input {
   font-family: 'Montserrat', sans-serif;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;

  background-color: #5800c8;

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='583' height='70' viewBox='0 0 1000 120'%3E%3Cg fill='none' stroke='%23ff4b97' stroke-width='5.2' stroke-opacity='0.24'%3E%3Cpath d='M-500 75c0 0 125-30 250-30S0 75 0 75s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 45c0 0 125-30 250-30S0 45 0 45s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 105c0 0 125-30 250-30S0 105 0 105s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 15c0 0 125-30 250-30S0 15 0 15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500-15c0 0 125-30 250-30S0-15 0-15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 135c0 0 125-30 250-30S0 135 0 135s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3C/g%3E%3C/svg%3E");
}

ul {
  list-style: none;
  word-wrap: break-word;
}

h2{
  font-size:360%;
  color:#FFEC43;
  text-transform: uppercase;
}
/* Pages */

.pages {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

.page {
  height: 100%;
  position: absolute;
  width: 100%;
  /* background-color: #5800C8; */
}

/* Login Page */

.login.page {
  /* display:none; */
  /* background-color: #5800C8; */
}

.login.page .form {
  height: 100px;
  margin-top: -100px;
  position: absolute;
  text-align: center;
  top: 12%;
  width: 100%;
}

.login.page .form Input  {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid #FF60A3;
  outline: none;
  padding-bottom: 15px;
  text-align: center;
  width: 400px;
}

.login.page .title {
  margin-top:8vh;
  font-size: 160%;
  color: #FF60A3;
  font-weight: 700;

}

.login.page Input {
  font-size: 160%;
  color: #FFEC43;
  font-weight: 400;
  /* letter-spacing: 2px; */
}

p {
  color: #fff;
  font-weight: 400;
}

.bgText1{
  top:70vh;
  left:3vw;
  position: absolute;
  z-index: 0;
  font-size:220px;
  font-weight:900;
  letter-spacing:-8px;
  color:transparent;
  -webkit-text-stroke: 4px rgb(255,75,151,0.5);
  -webkit-transform:scale(1,1); /* Safari and Chrome */
}

/* Chat page */
.chat.page {
  display: none;
}





/* Messages */

/* .chatArea {
  height: 100%;
  padding-bottom: 60px;
} */

#chat {
  /* border: 1px solid black; */
  /* height: 70vh; */
  height: 96vh;
  overflow: auto;
  /* overflow: scroll; */
  padding-bottom: 60px;
  font-size:32px;
  color:#FFEC43;
}

.messages {
  font-size: 150%;
}
.messages {
  height: 100%;
  margin: 0;
  overflow-y: scroll;
  padding: 10px 20px 10px 20px;
}

.username {
  font-weight: 700;
  overflow: hidden;
  padding-right: 15px;
  text-align: right;
}

/* Input */

#messageInput {
  color: #fff;
  background-color:#5800C8;
  border: 10px solid #FF60A3;
  bottom: 0;
  height: 80px;
  left: 0;
  outline: none;
  padding-left: 10px;
  position: absolute;
  right: 0;
  width: 100%;
  font-size: 160%;
}
body, html { 
    overflow: hidden;
}



/* button clicky effect credit to "https://schier.co/blog/clicky-3d-buttons-with-css */
.btn {
  /** Offset the Position **/
  position: relative;
  top: 0;
  margin-top: 10vh;
  margin-bottom: 10px;
  z-index:10;
   /* display: block; */
  /** 3D Block Effect **/
  /** Make it look pretty **/
  box-shadow: 0 10px 0 0 #BF3871; 
  background: #FF4B97;
  color: #fff;
  padding: 1em 2em;
  border: 0;
  cursor: pointer;
  font-size: 2em;
  font-weight:700 !important;
  opacity: 1;
  border-radius: 50px;
}
/* .btn span{
  font-weight:700!important;
} */
.btn:active {
  /** Remove 3D Block Effect on Click **/
  box-shadow: none;
  top: 10px;
  margin-bottom: 0;
}

.btn:hover {
  background: #FF60A3;
  box-shadow:#BF487A;
  opacity: 1;
}

.btn:active,
.btn:focus {
  /** Remove Chrome's Ugly Yellow Outline **/
  outline: 0;
}

.info{
  margin-top:20px;
  color: #FFEC43;
}

.sideRight{
  position:absolute;
  z-index:50;
  top:200px;
  right:120px;
  
}
.sideLeft{
  position:absolute;
  z-index:50;
  top:200px;
  left:120px;
  -moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}


.clap{
  font-size:240px;
}

#gifImg{
  position: absolute;
  top:50%;
  left: 20%;
  z-index:20;

}