body{
     min-height:100%;
     margin-top: 4em;
     display:flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     background-color:black;
}

.front-page-box{
     max-height: fit-content;
     max-width: fit-content;
     justify-content: center;
     align-content: center;
     position:relative  
}

@property --angle{
     syntax:"<angle>";
     initial-value: 0deg;
     inherits: false;
}

.front-page-box::after, .front-page-box::before{
     --angle:0deg;
     content: "";
     position: absolute;
     height: 100%;
     width: 100%;
     background-image: conic-gradient(from var(--angle), transparent 50%, red, orange, yellow, green, blue, indigo,violet);
     top:50%;
     left:50%;
     translate: -50% -50%;
     z-index:-1;
     padding: 10px;
     animation: 5s spin linear infinite;
     opacity: 80%;
}

.front-page-box::before{
     filter: blur(4rem);
     box-shadow: 20px 0 50px orange, -20px 0 50px yellow;
}

@keyframes spin{
     from{--angle:0deg} 
     to{--angle:360deg}
}


.normal-page-box{
     max-height: fit-content;
     max-width: fit-content;
     justify-content: center;
     align-content: center;
     position:relative  
}

@property --angle{
     syntax:"<angle>";
     initial-value: 0deg;
     inherits: false;
}

.normal-page-box::after, .normal-page-box::before{
     --angle:0deg;
     content: "";
     position: absolute;
     height: 100%;
     width: 100%;
     background-image: conic-gradient(from var(--angle), transparent 50%, rgba(230, 159, 28, 0.774), orange, rgb(206, 160, 8));
     top:50%;
     left:50%;
     translate: -50% -50%;
     z-index:-1;
     padding: 10px;
     animation: 5s spin linear infinite;
     opacity: 80%;
}

.normal-page-box::before{
     filter: blur(4rem);
     box-shadow: 20px 0 50px orange, -20px 0 50px yellow;
}

@keyframes spin{
     from{--angle:0deg} 
     to{--angle:360deg}
}


.test-box{
     display: flex;
     margin: 1rem;
     height: 540px;
     width: 360px;
     justify-content: center;
     align-items: center;
     background-color: rgb(22, 22, 22);
     border: none;
     color: rgb(221, 216, 216);
     font-family: 'Poppins', 'Segoe UI';
     position:relative;
}

.test-box::after{
     content: '';
     position:absolute;
     height:107%;
     width:107%;
     background-image: linear-gradient(to top right, #008cff, #e100ff);
     z-index: -1;
     box-shadow: 20px 0px 50px #008cff, -20px 0px 50px #e100ff;
}

.test-box:hover{
     z-index:0;
     box-shadow: 10px 0 100px #008cff, -10px 0 100px #e100ff;
}


.media-player-box{
     margin-top: 2rem;
     display:flex;
     justify-content: center;
     align-items: center;
     background:transparent
}

.bio-box{
     justify-content: center;
     align-items: center;
     max-width: 360px;
}

.bio-image{
     padding:10px;
     max-width: fit-content;
     max-height: fit-content;
     border-width: 10px;
     border-style: solid;
     border-color: white;
     box-shadow: 10px 0 50px #008cff, -10px 0px 50px #e100ff;
}

.bio-text-box{
     padding:10px;
     justify-content: justify;
     max-width: 360px;
     border-width: 10px;
     border-style: solid;
     border-color: white; 
     font: 100 "Poppins";
     color: white;
     justify-content: center;
     align-items: center;
     max-width: 360px;
     box-shadow: 10px 0 50px #008cff, -10px 0px 50px #e100ff;
}

.discography-box{
     display: flex;
     flex-direction: column;
     grid-template-columns: repeat(3);
}

.release-box{
     align-items: center;
     max-width: fit-content;
     color: white;
     font: "poppins";
     justify-items: center;
     justify-content: center;
}

.song-art-work-image{
     margin:20px;
     max-width: fit-content;
     max-height: fit-content;
     border-style: solid;
     border-color: white;
     border-width: 10px;
}

.icon-box{
     display:flex;
     margin: 40px;
     gap: 40px;
     justify-items: center;
     align-items: center;
}

.button{
     max-height: fit-content;
     max-width: fit-content;
     justify-content: center;
     align-content: center;
     background: black;
     border: none;
     border-radius:50%;
     color: rgb(221, 216, 216);
     font-family: 'Poppins', 'Segoe UI';
     position:relative;
     display: flex;
     justify-content: center;
     align-items:center;
}

.button::after{
     content:"";
     position: absolute;
     height:120%;
     width:120%;
     border-radius:50%;
     background-image: linear-gradient(to top right, #008cff, #e100ff);
     z-index:-1;
}

.button:hover{
     z-index:0;
     box-shadow: 10px 0 100px #008cff, -10px 0 100px #e100ff;
}

#button-main{
     max-height: fit-content;
     max-width: fit-content;
     justify-content: center;
     align-content: center;
     background: black;
     border: none;
     border-radius:50%;
     color: rgb(221, 216, 216);
     font-family: 'Poppins', 'Segoe UI';
     position:relative;
     display: flex;
     justify-content: center;
     align-items:center;
}

#button-main::after{
     content:"";
     position: absolute;
     height:120%;
     width:120%;
     border-radius:50%;
     background-image: linear-gradient(to top right, #08b37a, #06b823);
     z-index:-1;
}

#button-main:hover{
     content:"";
     z-index:0;
     box-shadow: 10px 0 100px #08b37a, -10px 0 100px #06b823;
}

.footer{
     display: flex;
     position: fixed;
     align-items: baseline;
     bottom: 0;
     width: 100%;
     height: 50px;
}



.site-footer{
     display: flex;
     justify-content: center;
     align-items: baseline;
     margin:20px;
     color: white;
     font-family: "poppins";
}