/* Main Stuff Start */
body { 
  background-image: url("images/back2.png");
  background-position: bottom center, top center;
  background-size: 20%;
  font-family: "LGgothic";
  color:rgb(205, 205, 205);
  font-weight: lighter;
  text-align: center;
  text-shadow: -1px 0 3px #1C2430, 0 1px 0px #1C2430, 1px 0 5px #1C2430, 0 -1px 5px #1C2430;
  }

p {
font-family: "LGgothic";
font-weight: lighter;
font-size : 19px;
text-align : left;
margin-left: 20px;
margin-right: 5px;
    }
a {
color: #b87dc9;
transition: all 0.2s ease;
text-decoration:none;
}
a:hover {
        background: linear-gradient(to right, #f93b3b, #3bf961, #0072fe);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        display: inline-block;
        filter: drop-shadow(4px 4px 5px rgba(0, 0, 0));
        text-shadow: none;
        }
h1 {
text-align : center;
font-family: "PressStart";
font-weight: lighter;
font-size : 16px;
margin:0px;
color:#cfb5d3;
letter-spacing : 2px;
text-transform: uppercase;
font-weight:bold;
        }
        
h2 {
text-align : center;
font-family: "PressStart";
font-weight: lighter;
font-size : 8px;
color:#ac78a8;
letter-spacing : 1px;
margin-top:4px;
text-transform: uppercase;
font-weight:lighter;  
        }

#content {
        width:auto;
        float:center;
        text-align:center;
        margin-top:10px;
     }

.columns {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin: auto;
}
/* Main Stuff End*/


/* Containers & Buttons Start */
#container {
        width:1041px;
        overflow:hidden;
           background-color:rgba(16, 11, 16, 0.85);
           background-position: bottom center, top center;
           background-repeat: no-repeat, repeat-y;
           border: 3px solid #a341a2;
           border-radius: 15px;
        padding-bottom:5px;
        box-shadow: 0px 0px 10px #948c8e;
        background-size:contain;
        margin: 0 auto;
        }

 #box {
            width: 600px;
            height: 250px;
            background: #3A3A3A;
            background-color:rgb(14, 10, 22);
            background-attachment: local;
            text-align: center;
            border: 5px outset #d4c3d2;
            border-radius: 300px;
            margin: auto;
            margin-bottom: 60px;
            margin-top: 30px;
            padding-left: 15px;
            padding-right: 15px;
            padding-top: -50px;
            position: relative;
            box-shadow: 0px 0px 30px #919191;
            }
 #header {
                background-image: url(images/reblasted_logo.png) ;
             width:auto;
             height:400px;
             margin-top: -60px;
             margin-left: -10px;
             background-position: center;
             background-repeat: no-repeat;
             background-size:600px;
             }

 #greeting {
    width: fit-content;
    height:43px;
    background-color:rgb(100, 44, 106);
    background-attachment: local;
    text-align: center;
    border-radius: 10px;
    margin: auto;
    margin-bottom:10px;
    margin-top:-18px;
    padding-top:10px;
    box-shadow: 0px 4px 0px #3d063d;
    z-index: 2;
    position: relative;
    }
#updates {
        width: fit-content;
        height:25px;
        background-color:rgb(44, 106, 46);
        background-attachment: local;
        text-align: center;
        border-radius: 10px;
        margin: auto;
        margin-bottom:10px;
        margin-top:-33px;
        padding-top:10px;
        box-shadow: 0px 4px 0px #063d0b;
        z-index: 2;
        position: relative;
        }
#todo {
        width: fit-content;
        height:25px;
        background-color:rgb(44, 45, 106);
        background-attachment: local;
        text-align: center;
        border-radius: 10px;
        margin: auto;
        margin-bottom:10px;
        margin-top:-35px;
        padding-top:10px;
        box-shadow: 0px 4px 0px #15084d;
        z-index: 2;
        position: relative;
        }
/* Containers & Buttons End */

/* Fonts and Text Decor Start */
@font-face {
        font-family: Upheaval; 
        src: url(fonts/upheavtt.ttf);
              }
@font-face {
        font-family: Daydream; 
        src: url(fonts/Daydream\ DEMO.otf);
         }
@font-face {
        font-family: PressStart; 
        src: url(fonts/PressStart2P.ttf);
        }
@font-face {
        font-family: LGgothic; 
        src: url(fonts/LGGothic.ttf);
        }

 .rainbow {
        background: linear-gradient(to right, #fe4f4f, #feb600, #f0ff53, #0cd251, #0090fe,#cf00fe);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        display: inline-block;
        filter: drop-shadow(4px 4px 5px rgba(0, 0, 0));
        text-shadow: none;
        }
/* Fonts and Text Decor End */