:root {
--linkbgcolor: rgba(191, 127, 250, 0.637);
--backboardcolor: rgba(0, 0, 0, 0.5);
--pinkishlink: rgb(211, 164, 211);

body {
background-color: rgb(87, 56, 122); 
background-image: url('backgrounds/gothicfence.png'), linear-gradient(rgb(136, 113, 243), rgb(30, 19, 68)); 
background-repeat: repeat-x; 
background-position: bottom; 
background-attachment: fixed;
}

.nametitle {
margin-top: 10px; 
margin-bottom: 7px;
}

.linkbar {
margin: auto; 
padding: 10px; 
background-color: var(--backboardcolor); 
backdrop-filter: blur(5px);  
width: auto;
border-radius: 8px; 
text-align: center;  
margin-top: 5px;
position: sticky;
top: 10px;
z-index: 1;
}

.linkbar > a {
background-color: var(--linkbgcolor); 
color: black; 
padding: 5px; 
border-radius: 6px; 
margin: 3px;
text-decoration: none;
}

.linkbar {
background-color: var(--backboardcolor); 
margin: 10px auto 0px auto; 
padding: 10px; 
list-style: none; 
display: flex; 
width: fit-content;
border-radius: 6px
position: sticky;
z-index: 1;
top: 10px;
backdrop-filter: blur(5px); 
}

.linkbar > li {
background-color: var(--linkbgcolor);
padding: 5px;
border-radius: 6px;
margin: 0px 3px 0px 3px;
}

.linkbar > li a {
text-decoration: none;
color: black;
}

.categorytitle {
margin: auto;
margin-top: 10px;
text-align: center;
background-color: var(--backboardcolor);
width: 150px;
border-radius: 6px;
color: var(--pinkishlink);
}

.aboutpage {
margin: auto;
margin-top: 10px;
text-align: center;
background-color: var(--backboardcolor);
width: 450px;
border-radius: 6px;
color: var(--pinkishlink);
}

.aboutpage > p {
margin: auto;
padding: 10px
}

.aboutpage > p > a {
color:white
}


.fanpage {
background-color: var(--backboardcolor);
width: 310px;
margin: auto;
margin-top: 8px;
padding: 10px;
border-radius: 6px;
text-align: center;
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
justify-content: center;
align-content: center;
gap: 10px
}

.fanpage > a {
background-color: var(--linkbgcolor);
width: 150px;
height: 70px;
text-align: center;
align-content: center;
margin:auto;
border-radius: 6px;
color: black;
text-decoration: none;
}

.shelf {
display: flex; 
flex-wrap: wrap; 
justify-content: center; 
margin-left: 9%; 
margin-right: 9%; 
margin-top: 10px; 
padding: 10px; 
background-color: var(--backboardcolor); 
backdrop-filter: blur(5px); 
border-radius: 8px;
}

.shelf > div {
margin: 4px; 
width: 450px; 
height: auto;
}

.shelf > div a {
color: var(--pinkishlink); 
font-size: small;
}

.videodock {
width:400px; 
padding: 0px; 
padding-bottom: 6px; 
background-color: rgba(189, 119, 255, 0.356); 
text-align: center; 
border-radius: 10px;
}

.videotitle {
text-align: center; 
background-color:rgb(164, 89, 207); 
margin: 0px; 
padding: 5px;
}

.videotext {
text-align: center; 
background-color: rgb(154, 116, 214); 
margin: 0px; 
padding: 5px; 
padding-top: 15px; 
height: 65px;
}

.bskyfeed {
background-color: var(--backboardcolor);
border-radius: 6px;
margin: auto;
margin-top: 10px;
min-width: 370px;
max-width: 700px;
overflow: hidden;
}

.instafeed {
background-color: var(--backboardcolor);
border-radius: 6px;
margin: auto;
margin-top: 10px;
padding-top: 12px;
padding-bottom: 1px;
max-width: 700px;
min-width: 300px;
}