@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

body{
  background: #f8f8f8;
 font-family: 'VT323', monospace;
height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background: black url(bg.jpg)  no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;


}

.wrapper{
	width:280px;
	height:370px;
	position:absolute;
	left:50%;
	top:45%;
	margin:-185px 0 0 -140px;
  text-align:center;
  background-color:rgba(4,39,7,0.8);
border: thin solid #3fb234;

}

.teldata{
	width:280px;
	height:50px;
	position:absolute;
	left:50%;
	top:45%;
	margin:-250px 0 0 -140px;
  text-align:center;
  background-color:rgba(4,39,7,0.8);
  border: thin solid #3fb234;


}
.callon{
	width:280px;
	height:60px;
	position:absolute;
	left:50%;
	top:45%;
	margin:200px 0 0 -140px;
  text-align:center;



}
.chattype {
	width:90%;
	height:90%;

	color: #3fb234;
	  background-color:rgba(4,39,7,0.8);
	  border:0;
	font-size:26px;
	text-align:center;
	font-family: 'VT323', monospace;
}
.chat {
	width:100%;
	height:100%;
	border:0;
	color: #3fb234;
	background-color:rgba(4,39,7,0.8);
	border: thin solid  #3fb234;
	font-size:22px;
	letter-spacing:2px;
	font-family: 'VT323', monospace;
}


.dtmf-interface{
  width:280px;
  margin:0;
  padding:0;
  overflow:hidden;
}

.dtmf-interface li{
  float:left;
  margin:10px;
  list-style:none;
  width:70px;
  height:70px;
  text-align:center;
  line-height:70px;
  font-size: 28px;
  border: thin solid  #3fb234;
  border-radius:3px;
  padding:0px;
  transition: all 0.5s;
  color:#3fb234;
   

}

.dtmf-interface li:hover{
  color: #4efd3c;
  border-color:#4efd3c;
  transition-duration:0s;
  cursor:pointer;
}

.dtmf-interface li:active{
  color: #F60;
  border-color:#F60;
  transition-duration:0s;
}