@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@500&display=swap');
html, body {
  height: 100%;
  width: 100%;
}
*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
body{
  /* background-image: url("https://m.media-amazon.com/images/I/81iVhz6Rt6L._SL1000_.jpg"); */
  background-image: url(hacker_background.jpg);
  background-color: black;
  background-position: center;
  background-repeat: no-repeat;
  font-family: 'Noto Sans Mono', monospace;
}
#target{
  border:1px solid white;
  background:none;
  color: #f60404;
  font-size:16px;  
  height:23px;
  width:86%;
  z-index:2;
  padding-left:10px;
}
.heading{
  font-size:8vh;
  color:#009912;
  text-shadow: 2px 2px 4px lime;
  text-align:center;
  
}
.container{
  display:flex;
  justify-content:space-around;       
  align-items: center;
  width:100vw;
  height:100vh;
}
.side{
   position:relative;
  width:20%;
  background:rgba(0,0,0,0.8);
  border:1px solid grey; 
  border-radius: 8px;
  height:80%;
  padding:2vh;
  color:#009912;
  text-shadow: 0px 0px 10px lime;
  overflow:hidden;
}
.main{
  position:relative;
  width:50%;
  background:rgba(0,0,0,0.8);
  border:1px solid grey; 
  border-radius: 8px;
  height:80%;
  padding:2vh;
}
.side1{
  font-size:2vh;
  position:absolute;
  height:90%;
  width: 90%;
  word-wrap: break-word;
  text-align: center;
}
.hack-btn{
  display:flex;
  justify-content:space-around;
  align-items: center;
  position:absolute;
  bottom:11%;
  left:45%;
  height:4%;
  width:10%;
  background:rgba(0,156,0,0.7);
  border-radius: 8%;
  color:rgba(255,255,255,0.5);
  text-align:center;
  cursor:pointer;
  transition: all 100ms ease-in-out;
  font-size:2.5vh;
  padding:0.5vh;
}
.hack-btn:hover{
  transform:scale(1.06)
}
.hack-btn:active{
  transform:scale(0.96)
}
.text{
  font-size:2vh;
  color:#009912;
  text-shadow: 0px 0px 8px lime; 
}
input{
  margin:2px;
  accent-color:#009912; ;
}
label{
  font-size:1rem;
  color:#009912; ;
}