*{
    font-family:'Courier New', Courier, monospace
}

a{
    color: #551a8b;
    
    
}
body {
    background-image: url(background.png);
    background-size: 50% 100%;
      background-color: black;
       image-rendering: pixelated;
       animation: x 5s ease-in-out infinite;
       overflow:scroll;


}

body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(#18023744 50%, rgba(0, 0, 0, 0.5) 50%);
z-index: 2;
background-size: 100% 3px, 2px, 100%;
pointer-events: none;
filter: brightness(40%);
filter:saturate(100%);
filter: opacity(100%);

}

.decoration{
    user-select: none;
}

.t1m{
    animation: t1 2.5s ease-in-out infinite, t1d 5s ease-in-out infinite;
}


.t2m{
animation: t2 2.5s ease-in-out 2.5s infinite, t2d 5s ease-in-out -2.5s infinite;
}

.t1{
    animation: t1 2s ease-in-out infinite, t1d 4s ease-in-out infinite;
}


.t2{
animation: t2 2s ease-in-out 2s infinite, t2d 4s ease-in-out -2s infinite;
}

.twinklestar{
    height: 55px;
    width: 45px;
    position: fixed;
    image-rendering: pixelated;
    opacity: 0%;
}


#header_d{
        margin: auto;
    text-align: center;
    width: 1100px;
    height: 120px;
    border-radius: 20px;
    border-width: 10px;
    background: #000000;
    border-style: double;
    color: #320077;
    margin-top: 2%;
    position: static;
    overflow: visible;
}
#header_t{
     margin: auto;
    text-align: center;
    width: 1098px;
    height: 50px;
    border-top: #00000000;
    border-left: #00000000;
    border-right: #00000000;
    border-radius: 0px;
    border-width: 2px;
    background: #000000;
    border-style: dashed;
    color: #320077;
    margin-top: 1%;
    margin-bottom: 1.5%;
    position: static;
}

#header_d ul{
    margin-bottom: 60%;
    margin-top: 2%;
    margin: auto;

}

#header_d ul li{
    display: inline-block;
    margin-right: 5px;
    font-size: 20px;

}

#header_d ul hr{
    
    display: inline-block;
     margin-right: 25px;
}


#b_column{
    width: 1100px;
    height: 960px;
    background: #000000;
    border-style: double;
    border-radius: 0px;
    border-width: 10px;
    color: #320077;
    margin: auto;
    margin-top: 50px;
    margin-bottom: 5%;
    overflow: hidden;
    animation: float 3s ease-in-out infinite;
        opacity: 100%;
    position: static;
    filter: opacity(85%);
}
#pfp_d{
    margin: auto;
     margin-left: 5%;
     margin-top: 3%;
}

#pfp{
        position: fixed;
    image-rendering: pixelated;
    height: 205px;
    width: 220px; 
    border-style: double;
    color: white;
    animation: glow 3s  ease-in-out infinite;
    

}

#spawn{
    position: fixed;
    image-rendering: pixelated;
    height: 285px;
    width: 300px; 
    color: white;
    margin-left: -3%;
    margin-top: -3%;
    animation: grow 6s ease-in-out infinite ;
}


@keyframes glow {
    0% {
        filter: drop-shadow(0 0 20px rgb(143, 143, 143));
    }

    50%{
        filter: drop-shadow(0 0 30px rgb(255, 255, 255));
    }

       100% {
        filter: drop-shadow(0 0 20px rgb(143, 143, 143));
    }
}

@keyframes grow {
    0%{
         height: 285px;
         width: 300px;
         margin-left: -3%;
         margin-top: -3%;
          transform: rotate(0deg);
          opacity: 20%;
    }

    50% {
         height: 365px;
         width: 380px;
         margin-left: -7%;
         margin-top: -7%;
         transform: rotate(40deg);
          opacity: 60%;
         
    }

    100%{
         height: 285px;
         width: 300px;
         margin-left: -3%;
         margin-top: -3%;
          transform: rotate(0deg);
          opacity: 20%;
    }

}


@keyframes a1{
    from {
        opacity: 0%;
         filter: drop-shadow(0 0 40px #9c99f9);
    }
    to{
        opacity: 80%;
         filter: drop-shadow(0 0 40px #9c99f9);
    }
}

@keyframes a2{
    from {
        opacity: 80%;
         filter: drop-shadow(0 0 40px #9c99f9);
    }
    to{
        opacity: 0%;
         filter: drop-shadow(0 0 40px #9c99f9);
    }
}

@keyframes t1d {
    0% {

    }

    50%{
         opacity: 0%;
    }
    100%{
         opacity: 0%;
    }
}

@keyframes t2 {
    0% {
        transform: scale(100%);
        transform: scaleX(100%);
        opacity: 0%;
        transform: rotate(0deg);
    }
    50%{
        opacity: 100%;
    }

    100%{
        transform: scale(160%);
        transform: scaleX(170%);
        opacity: 0%;
    }
}

@keyframes t1 {
    0% {
        transform: scale(100%);
        transform: scaleX(100%);
        opacity: 0%;
        transform: rotate(0deg);
    }
    50%{
        opacity: 100%;
    }

    100%{
        transform: scale(160%);
        transform: scaleX(170%);
        opacity: 0%;
    }
}

@keyframes t2d {
    0% {

    }

    50%{
         opacity: 0%;
    }
    100%{
         opacity: 0%;
    }
}

@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-15px);
	}
	100% {
		transform: translatey(0px);
	}
}