body{

background:#0b0b0b;

color:white;

font-family:Verdana;

margin:0;

}

#wrapper{

width:1100px;

margin:auto;

}

header{

background:#2a003f;

padding:30px;

text-align:center;

border:3px solid #6d38a8;

margin-top:20px;

}

nav{

background:#1a1a1a;

padding:15px;

text-align:center;

margin:15px 0;

}

nav a{

color:white;

padding:15px;

text-decoration:none;

font-weight:bold;

}

nav a:hover{

color:#bb8cff;

}

.container{

display:flex;

gap:20px;

}

.left{

width:75%;

}

.right{

width:25%;

}

.row{

display:flex;

gap:20px;

}

.half{

width:50%;

}

.box{

background:#171717;

border:2px solid #6d38a8;

margin-bottom:20px;

}

.title{

background:#33004d;

padding:10px;

font-size:20px;

font-weight:bold;

}

.content{

padding:15px;

line-height:1.6;

}

.sidebar{

background:#171717;

border:2px solid #6d38a8;

padding:15px;

margin-bottom:20px;

text-align:center;

}

.profile{

width:150px;

border:3px solid #6d38a8;

display:block;

margin:auto;

margin-bottom:10px;

}

.cd{

width:160px;

border-radius:50%;

animation:spin 8s linear infinite;

margin-bottom:15px;

}

audio{

width:100%;

}

footer{

background:#2a003f;

padding:20px;

text-align:center;

margin-top:20px;

border:2px solid #6d38a8;

}

@keyframes spin{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}