:root {
    --body-bg-image: url(background.jpg);
    --content: #0a09c6;
}

img[onclick] {
       cursor: pointer
}

body {
    font-family: "Space Grotesk", sans-serif;
    margin: 0;
    background: var(--body-bg-image), black;
    background-size: cover;
    color: #d2c4fa;
}
    

* {
    box-sizing: border-box;
}

#container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px;
    margin-left: 100px;
    margin-right: 100px;
    margin-bottom: 100px;
}

#container a {
    color: #6564f5;
    font-weight: bold;
  text-decoration:underline;
}

#title {
    margin-bottom: 10px;
}

#navbar {
    height: 50px;
    background-image:linear-gradient(145deg, #4c51bf 0%, #4b4abe 14.29%, #4a42be 28.57%, #4b3aba 42.86%, #4b35b0 57.14%, #4b30a6 71.43%, #482692 100%), radial-gradient(100% 100% at 50% 100%, #feb2b2 0%, rgba(252, 184, 219, 0.75) 25%, rgba(239, 194, 250, 0.5) 50%, rgba(190, 227, 248, 0) 100%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    margin-bottom: 50px;
    border-radius: 20px;
    filter: drop-shadow(4px 4px 4px black);
    rotate: 358deg;
    border: 4px solid #ab8dff;
}

#navbar ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-evenly;
}

#navbar li {
    padding-top: 10px;
    padding-inline: 10px;
    margin-bottom: 10px;
}

#navbar li a {
    color: #ab8dff;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    filter: drop-shadow(1px 1px 1px black);
    
}

#navbar li a:hover {
    color: #ab8dff;
    text-decoration: underline;
    filter: drop-shadow(1px 1px 1px black);
}

#navbar li img {
  filter: drop-shadow(2px 2px 2px black);
  border-radius: 3px;
}

#navbar li img:hover {
  filter: drop-shadow(2px 2px 2px #6564f5);
}

#contentnav {
    background-image:linear-gradient(145deg, #4c51bf 0%, #4b4abe 14.29%, #4a42be 28.57%, #4b3aba 42.86%, #4b35b0 57.14%, #4b30a6 71.43%, #482692 100%), radial-gradient(100% 100% at 50% 100%, #feb2b2 0%, rgba(252, 184, 219, 0.75) 25%, rgba(239, 194, 250, 0.5) 50%, rgba(190, 227, 248, 0) 100%);
    height: 50px;
    width: 18%;
    display: flex;
    align-items: right;
    padding: 10px 20px;
    margin-bottom: 40px;
    border-radius: 20px;
    filter: drop-shadow(4px 4px 4px black);
    rotate: 358deg;
    border: 4px solid #ab8dff;
}

#contentnav ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-evenly;
}

#contentnav li {
    padding-inline: 10px;
}

#contentnav li a {
    color: #ab8dff;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    filter: drop-shadow(1px 1px 1px black);
}

#contentnav li a:hover {
    color: #ab8dff;
    text-decoration: underline;
    filter: drop-shadow(1px 1px 1px black);
}

#contentnav li img {
  filter: drop-shadow(2px 2px 2px black);
  border-radius: 3px;
}

#contentnav li img:hover {
  filter: drop-shadow(2px 2px 2px #6564f5);
}

#flex {
    display: flex;
    gap: 100px;
}

#buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
  justify-content: center;
  background-image:linear-gradient(145deg, #4c51bf 0%, #4b4abe 14.29%, #4a42be 28.57%, #4b3aba 42.86%, #4b35b0 57.14%, #4b30a6 71.43%, #482692 100%), radial-gradient(100% 100% at 50% 100%, #feb2b2 0%, rgba(252, 184, 219, 0.75) 25%, rgba(239, 194, 250, 0.5) 50%, rgba(190, 227, 248, 0) 100%);
    border: 3px solid #ab8dff;
    padding: 10px;
    border-radius: 10px;
    rotate: 357deg;
    filter: drop-shadow(4px 4px 4px black);
}


aside {
    background-image:linear-gradient(145deg, #4c51bf 0%, #4b4abe 14.29%, #4a42be 28.57%, #4b3aba 42.86%, #4b35b0 57.14%, #4b30a6 71.43%, #482692 100%), radial-gradient(100% 100% at 50% 100%, #feb2b2 0%, rgba(252, 184, 219, 0.75) 25%, rgba(239, 194, 250, 0.5) 50%, rgba(190, 227, 248, 0) 100%);
    width: 300px;
    padding: 20px;
    font-size: smaller;
    border-radius: 20px;
    filter: drop-shadow(4px 4px 4px black);
    rotate: 355deg;
    border: 5px solid #ab8dff;
}

main {
    background-image:linear-gradient(145deg, #4c51bf 0%, #4b4abe 14.29%, #4a42be 28.57%, #4b3aba 42.86%, #4b35b0 57.14%, #4b30a6 71.43%, #482692 100%), radial-gradient(100% 100% at 50% 100%, #feb2b2 0%, rgba(252, 184, 219, 0.75) 25%, rgba(239, 194, 250, 0.5) 50%, rgba(190, 227, 248, 0) 100%);
    flex: 1;
    padding: 20px;
    order: 2;
    border-radius: 20px;
    filter: drop-shadow(4px 4px 4px black);
    rotate: 3deg;
    border: 5px solid #ab8dff;
}

h1,
h2,
h3 {
    color: #ab8dff;
    filter: drop-shadow(1px 1px 1px black);
}

h4 {
    color: #470bbf;
    font-size: 60px;
    -webkit-text-stroke: 7px #ab8dff;
    paint-order: stroke fill;
    border-radius: 20px;
    filter: drop-shadow(4px 4px 4px black);
    rotate: 5deg;
}

h1 {
    font-size: 25px;
}



strong {
    color: #6564f5;
}

.box {
    background-image:linear-gradient(145deg, #4c51bf 0%, #4b4abe 14.29%, #4a42be 28.57%, #4b3aba 42.86%, #4b35b0 57.14%, #4b30a6 71.43%, #482692 100%), radial-gradient(100% 100% at 50% 100%, #feb2b2 0%, rgba(252, 184, 219, 0.75) 25%, rgba(239, 194, 250, 0.5) 50%, rgba(190, 227, 248, 0) 100%);
    border: 3px solid #ab8dff;
    padding: 10px;
    border-radius: 10px;
    rotate: 3deg;
    filter: drop-shadow(4px 4px 4px black);
}


.box li::marker {
  color: #ab8dff;
}


.centered {
  position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  text-align: center;
    
}

#popup {
    position: fixed;
    rotate: 3deg;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: #13092D;
    padding: 20px;
    border-radius: 20px;
    border: 4px solid #6564f5;
    
}

#popup a {
    color:#6564f5;
}

#popup a:hover {
    color:#ab8dff;
}

#albums {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 10px;
  justify-content: left;
}

#albums img {
  border-radius: 20px;
  border: 5px solid #ab8dff;
  margin-bottom: 3px;
}

#albums img:hover {
  filter: drop-shadow(2px 2px 2px #6564f5);
}

#albums > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center; 
}

#albums p, h3 {
  margin: 2px 0;
}

#song {
  display: flex;
  gap: 20px;
  justify-content: center;
}