enter image description here now your code is working perfectly, You used unnecessary position:relative and z-index. Also you need to use

.button-class::before {
    z-index: -1;
}

*{
    background-color: #0f0f2c;
    color: aliceblue;
    font-size: 20px;
}

body{  
    margin: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;    
}
.main-container{
    height: 70vh;
    width: 350px;
    position: relative;
    background-color: #0f0f2c;
    isolation: isolate;
    border-radius: 20px;
     z-index:1;
    
}
.main-container::before{
  content: "";
  position: absolute;
  inset: -1px;
  box-shadow: 0 0 2px #333399,
  0 0 2px #ff00cc,
  0 0 1px #fffb00,
  0 0 2px #00f0ff,
  0 0 15px #333399;
  background-image: conic-gradient(#333399, #ff00cc, #fffb00, #00f0ff, #333399 );
  background-color: #f0c0ff;
  border-radius: 22px;
  z-index:0;  


}

.output-display-container{
  position: relative;
    height: 140px;
    width: 100%;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
}
.display-div{
    height: 100px;
    width: 100%;
    margin: 20px;
    padding: 5px;
    box-shadow: 0 0 5px #ff00cc;
    border-radius: 10px;
    text-align: right;
    /*color: #333;/
    text-align: right;     /* aligns text to the right */
    direction: ltr;        /* keeps the text flow left to right */
    overflow-x: hidden;      /* Dont want a scrollbar */
    white-space: normal;     /*wraps text */
    border: 1px solid #ccc;
}
.buttons-container {
   position:ralative;
    height: calc(70vh - 170px);
    width: calc(100% - 40px);
    /*box-shadow: 0 0 10px #ff00cc;*/
    margin: 20px;
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 10px;
}
.button-class{
  position:relative;
   background-color: #0f0f2c;
   box-shadow: 0 0 3px #ff00cc; 
   border: none;
   border-radius: 8px; 
   cursor: pointer;
   transition: transform 0.2s;
}


.button-class:hover {
    transform: scale(1.05);
    box-shadow: 0 0 5px #ff00cc;
}
.button-class::before{
  content: "";
  position: absolute;
  inset: -1px;
  box-shadow: 0 0 2px #333399,
  0 0 2px #ff00cc,
  0 0 1px #fffb00,
  0 0 2px #00f0ff,
  0 0 15px #333399;
  background-image: conic-gradient(#333399, #ff00cc, #fffb00, #00f0ff, #333399 );
  background-color: #f0c0ff;
  border-radius: 22px;
  z-index: -1;  
}