*{margin: 0;
   padding: 0;  
}
body{
    background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url('bg-image.jpg') ;
   background-repeat: no-repeat;
   background-size: cover;
   background-attachment: fixed;
}
.heading{
    color: rgb(231, 221, 221);
    font-size: 5vmax;
    text-align: center;
    font-weight:900;
}
.container{  
    display:flex;
     justify-content:space-evenly;
     align-items: center;
    flex-wrap: wrap;
    margin-top: 2%;
}
.box1{
    width: 20vw;
    height: 75vh;
    text-shadow: rgba(17, 121, 25, 0.5) 1px 3px 5px,
     rgba(17, 121, 25, 0.5) 1px 2px 7px,
     rgba(17, 121, 25, 0.5) 4px 2px 8px,
     rgba(17, 121, 25, 0.5) 7px 2px 10px;
    color: rgb(4, 137, 4);
    font-size: 1.2rem;
    overflow: hidden;
    padding:0px 2px ;
    background-color: rgba(0,0,0,0.7);
    border: 2px solid rgb(11, 11, 11);
    box-shadow: rgba(0,0,0,0.7) 0px 10px 20px,
    rgba(0,0,0,0.7) 0px 10px 25px,
    rgba(0,0,0,0.7) 0px 10px 35px,rgba(0,0,0,0.7) 0px 10px 15px;
}
.box2{
    width: 20vw;
    height: 75vh;
    overflow: hidden;
    text-shadow: rgba(17, 121, 25, 0.5) 1px 3px 5px,
    rgba(17, 121, 25, 0.5) 1px 2px 7px,
    rgba(17, 121, 25, 0.5) 4px 2px 8px,
    rgba(17, 121, 25, 0.5) 7px 2px 10px;
   color: rgb(4, 137, 4);
   font-size: 1.2rem;
   padding:0px 2px ;
    background-color: rgba(0,0,0,0.7);
    border: 2px solid rgb(15, 15, 15);
    box-shadow: rgba(0,0,0,0.7) 0px 10px 15px,
    rgba(0,0,0,0.7) 0px 10px 15px,
    rgba(0,0,0,0.7) 0px 10px 15px,rgba(0,0,0,0.7) 0px 10px 15px;
}
.main-box{
    width: 40vw;
    height: 75vh;
    background-color: rgba(0,0,0,0.7);
    border: 2px solid rgb(12, 11, 11);
    color: bisque;
    font-size: 20px;
    font-family: monospace ;
    box-shadow: rgba(0,0,0,0.7) 0px 10px 15px,
    rgba(0,0,0,0.7) 0px 10px 25px,
    rgba(0,0,0,0.7) 0px 10px 35px,rgba(0,0,0,0.7) 0px 10px 15px;
}
.username{
      width: 36vw;
      height: 30px;
      background: transparent;
      border-radius: 5px;
      color:red;
      text-shadow: #95030380 1px 3px 5px,
      #95030380 1px 2px 7px,
      #95030380 4px 2px 8px,
      #95030380 7px 2px 10px;
      font-weight: 800;
      font-size: large;
      border: 3px solid green;
}
.info{
    padding: 10px 20px;
    text-shadow: rgba(17, 121, 25, 0.5) 1px 3px 5px,
     rgba(17, 121, 25, 0.5) 1px 2px 7px,
     rgba(17, 121, 25, 0.5) 4px 2px 8px,
     rgba(17, 121, 25, 0.5) 7px 2px 10px;
}
.info h2{
    padding: 10px 10px;
    text-shadow: rgba(161, 174, 162, 0.5) 1px 3px 5px, 
    rgba(161, 174, 162, 0.5) 1px 2px 7px,
    rgba(161, 174, 162, 0.5) 4px 2px 8px,
     rgba(161, 174, 162, 0.5) 7px 2px 10px;
    color: bisque;
    font-size: larger;
    font-family: monospace ;
}
.adjust{
    height: 38vh;
}
.button-div{
  display: flex;
  justify-content: center;
  align-items: center;
}
.pera{
    padding: 10px 25px;
    font-size: 22px;
    color:rgb(4, 137, 4);
    text-shadow: rgba(4, 126, 14, 0.5) 1px 3px 5px, 
    rgba(4, 126, 14, 0.5) 1px 2px 7px,
    rgba(4, 126, 14, 0.5) 4px 2px 8px,
     rgba(4, 126, 14, 0.5) 7px 2px 10px;
}
button{
    width: 100px;
    height: 30px;
    background-color: rgb(4, 137, 4);
    color: bisque;
    font-size: 20px;
    border-radius: 3px;
    border: 2px solid green;
    box-shadow: rgba(4, 126, 14, 0.5) 3px 4px 10px;
}
button:hover{
    cursor: pointer;
    width: 105px;
    color:  rgb(4, 137, 4);
    background-color:bisque;
}
@media (max-width:680px) {
    body{
        background-image:linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.1)), url('phone-bg.jpg') ;
       background-repeat: no-repeat;
       background-size: cover;
       background-attachment: fixed;
    }
    .container{  
        display:flex;
        justify-content:space-evenly;
        align-items: center;
        flex-flow: column;
        height: 90vh;
    }
    .box1{
        width: 70vw;
        height: 15vh; 
        overflow: hidden;
        background-color:  rgba(63, 61, 61, 0.7);
    }
    .box2{
        width: 70vw;
        height: 15vh;
        overflow: hidden;
        background-color: rgba(63, 61, 61, 0.7);
    }
    .main-box{
        width: 70vw;
        height: 40vh;
        font-size: 3vw;
        background-color:  rgba(63, 61, 61, 0.7);
    }
    .username{
        width: 60vw;
        height: 17px;
        background: transparent;
        margin-bottom: 5px;
        border-radius: 5px;
        color:red;
        text-shadow: #95030380 1px 3px 5px,
        #95030380 1px 2px 7px,
        #95030380 4px 2px 8px,
        #95030380 7px 2px 10px;
        font-weight: 800;
        font-size: large;
        border: 3px solid green;
  }
  .info{
    padding: 5px 3px;
    text-shadow: rgba(17, 121, 25, 0.5) 1px 3px 5px,
     rgba(17, 121, 25, 0.5) 1px 2px 7px,
     rgba(17, 121, 25, 0.5) 4px 2px 8px,
     rgba(17, 121, 25, 0.5) 7px 2px 10px;
}
.info h2{
    padding: 10px 10px;
    text-shadow: rgba(161, 174, 162, 0.5) 1px 3px 5px, 
    rgba(161, 174, 162, 0.5) 1px 2px 7px,
    rgba(161, 174, 162, 0.5) 4px 2px 8px,
     rgba(161, 174, 162, 0.5) 7px 2px 10px;
    color: bisque;
    font-size: 17px;
    font-family: monospace ;
}
    .adjust{
        height: 22vh;
    }
    .pera{
        padding: 2px 2px;
        font-size: 15px;
        color:rgb(4, 137, 4);
        text-shadow: rgba(4, 126, 14, 0.5) 1px 3px 5px, 
        rgba(4, 126, 14, 0.5) 1px 2px 7px,
        rgba(4, 126, 14, 0.5) 4px 2px 8px,
         rgba(4, 126, 14, 0.5) 7px 2px 10px;
    }
}