*{
     margin: 0;
     padding:0;
}

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


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

.bio-box{
     display: grid;
     justify-content: center;
     align-items: center;
     max-width: 360px;
     gap: 2em;
}

.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 #109c85, -10px 0px 50px #e100ff;
}

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


.icon-box{
     display:block;
     margin: 40px;
     gap: 30px;
     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);
     position:relative;
     display: flex;
     justify-content: center;
     align-items:center;
}

.button img{
     max-height: 50px;
     max-width: 50px;
}

.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-items: center;
     align-items: center;
     background: black;
     border: none;
     border-radius:25%;
     color: rgb(221, 216, 216);
     position:relative;
     display: flex;
     justify-content: center;
     align-items:center;
}

.button-main img {
     max-height: 80px;
     max-width: 80px;
}

.button-main::after{
     content:"";
     position: absolute;
     height:120%;
     width:120%;
     border-radius:25%;
     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: sticky;
     align-items: baseline;
     bottom: 0;
     width: 100%;
     height: 30px;
}

.site-footer{
     display: flex;
     justify-content: center;
     bottom: 0;
     margin-top:10px;
     color: white;
     font-family: "poppins";
}