/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/* Place in your CSS file at the top of the document */

@import url('https://fonts.googleapis.com/css2?family=Reddit+Sans:wght@600&display=swap');
body {
  background-color: black;
  background-image: url(https://i.ibb.co/jyr6vXZ/write041.gif);
  color: white;
  font-family: 'trebuchet MS', sans-serif;
}
.box {
  border: 1px solid white;
  padding: 25px;
  margin: 5px;
  height: 500px;
  background-color: #0D0D0D;
  border-radius: 25px;
  box-shadow: 0px 0px 20px 9px rgba(255, 255, 255, 0.4);
  position: relative;
}
  


.grid-container {
  display: grid;
  grid-template-areas: "col1 col2 col2 col2 col2 col2";
}

#g1 {
  grid-area: col1;
  overflow-y:scroll 
}

#g2 {
  grid-area: col2;
  overflow-y:scroll 
}


.box:before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );
    transform: translate3d(0px, 20px, 0) scale(0.95);
    filter: blur(20px);
    opacity: 0.7;
    transition: opacity 0.3s;
    border-radius: inherit;
}

/* 
* Prevents issues when the parent creates a 
* stacking context. (For example, using the transform
* property )
*/
.box::after {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: inherit;
    border-radius: inherit;
}
        
.shadow:before,
.shadow:after {
  content: “”;
  position: absolute;
  top: -2px;
  left: -2px;
  background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000);
  background-size: 400% 400%;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  border-radius: 20px;
  z-index: -1;
  animation: animate 3s ease alternate infinite;
}
.shadow:after {
  filter: blur(20px);
}

.glow-box {
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid #00ffe0;
  box-shadow: 0 0 10px #00ffe0, 0 0 20px #00ffe0;
  border-radius: 10px;
  padding: 20px;
}