*{
    font-family: Tahoma,Arial,Verdana,Helvetica;
    max-width: 2000px;
}
body {
        background-image: url('stars.jpg');
        background-size: cover;
        padding: 0;
        height: 100vh;
        font-family: Tahoma,Arial,Verdana,Helvetica;
        color: white;
}

p {
        font-size: 13px;
        margin-top: 10px;
        color: white;
}

h1 {
    margin-top: 40px;
    text-align: center;
}


 /* Style for dropdown */
         /* DROPDOWN */
        nav ul {
            list-style: none;
            background: #392169;
            margin: 0;
            padding: 0;
        }
        
        nav ul li {
            display: inline-block;
            position: relative;
        }
        
        nav ul li a {
            display: block;
            padding: 20px 25px;
            color: #FFF;
            text-decoration: none;
            text-align: center;
            font-size: 20px;
            font-family: Tahoma,Arial,Verdana,Helvetica;
        }
        
        ul li ul.dropdown li {
            display: block;
        }
        
         ul li ul.dropdown {
            width: 100%;
            background: #504466;
            position: absolute;
            z-index: 999;
            display: none;
        }
        
         ul li a:hover {
            background: #6d30e9;
        }
        
        ul li:hover ul.dropdown {
            display: block;
        }
        
        nav {
            font-family: Tahoma,Arial,Verdana,Helvetica;
        }
        



/* VIDEO  */
/* to make this videobackground image i followed this youtube video https://youtu.be/-unASUgYtVI?si=G_VF7ymLXbdFS1h2*/
.container-video {
    width: 100vw;
    height: auto;
    background-color: rgba(0, 0, 0, 0.4);
    display: block;
    align-items: center;
    justify-content: center;
}
                    
.content {
    text-align: center;
}
                    
.content h1{
    font-size: 50px;
    color: #fff;

}
                    
.background-clip {
    position: relative;
    right: 0;
    bottom: 0;
    z-index: -1;
    width:100vw;
    height:auto;
}

/* chat gpt helped me to put the image(right side) beside the paragraph because when i was trying it kept glithching and going ontop of the*/
.text-content{
    max-width:100px;
    width:auto;
    margin:120px;
}
.container-bst {
    display: flex;
    justify-content: center;
    align-items: flex-start; 
    margin-left: 80px;
    gap: 20px;
}

.text-content-bst {
    flex: 1;
    max-width: 500px;
    padding: 0 10px; 
}

.image-container-bst img {
    max-width: 100%;
    height: auto;
}

.container {
    display: flex;
    align-items: center; 
    right: 0;
}

.text-content-bst {
    width: 50%; 
}

.image-container-group {
    width: 50%; 
    margin-left: 20px; 
}


    /* RANKS */
.box{
    margin-left: 500px;
}

.box .list {
    position: relative;
    padding: 10px;
    border-radius: 10px;
    margin-left:6px ;
    margin-bottom: 6px;
    cursor: pointer;
    transition: 0.5s;
    overflow: hidden;
    background: #fff;
}

.box .list .imgbx {
    position: relative;
    width: 250px;
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
}
    /* on hover effects*/
.box:hover .list {
    opacity: 0.25;
}

.box .list:hover {
    box-shadow: -10px 20px 35px rgba(0, 0, 0, 0.15);
    transform: scale(1.4);
    opacity: 100%;
}
/* image */
.box .list .imgbx img {
    position: relative;
    width: 56%;
    height: 100%;
    object-fit: cover;
    justify-content: center;
}

.box .list .content {
    position: absolute;
    text-align: right;
}

.box .list .content .rank {
    font-size: 25px; 
    font-weight:bold ;
    color: blueviolet;
    text-justify: cen;
}

.box .list .content h4 {
    font-size: 12px;
    color: #333;
    margin-top: 80px;
    margin-left: 140px;
}

.rank-container {
    display: flex;
    flex-wrap: nowrap;
    width: 80%;
    height: auto;
}


/* ALBUM PAGE */
/* Banner adjustments */
.container-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    grid-gap: 5px; 
}

.container-nonalbum {
    width: 100%; 
}

.image-container {
text-align: center; 
}

.image-container img {
    width: 100%; 
    height: auto; 
    max-width: 450px; 
    max-height: 450px; 
 }

h2 {
    margin-top: 10px;
}

.image-container-non {
    position: relative;
    width: 100%;
    height: 600px; 
    background-image: url('scans/4948_001.jpg');
    background-size: cover;
    background-position: center;
    color: white; 
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity:60%;
}

h3{
    font-size: 50px;
    font-family: Tahoma,Arial,Verdana,Helvetica;
}

/* flip cards got the inspiration from actual albums having the track list on the back. https://youtu.be/OE4MsGlzxxc?si=NtaEV4JH2dsh9Zpu
followed this tutorial but made adjustments as i went along */
.container-image-rose{
    width: 100%;
    height: calc(100vh - 300px);
}

.full-screen-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
}

.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 1;
}

.container-albums {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
}

.flip-card {
     margin: 10px;
}

.flip-card-inner {
      position: relative;
      width: 450px;
      height: 450px;
      text-align: center;
      transition: transform 0.8s;
      transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.flip-card-front {
    background-color: #bbb;
    color: black;
}
.flip-card-back {
    background-color: #7cabf7;
    color: white;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.back-content {
    padding: 20px;
    text-align: center;
}
li {
    list-style: none;
    text-align: center;
    line-size: 8px;
    font-size: 15px; 
}
.caption {
    position: relative;
    bottom: 0;
    width: 97.5%;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0px;
    text-align: center;
}
.column {
    flex: 1;
    margin: 10px;
    text-align: center;
}
.column img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px;
}
.column h2 {
    font-size: 18px;
    margin-bottom: 5px;
}
.column ul {
    list-style-type: none;
    padding: 0;
}
.column li {
    font-size: 16px;
}

/* rose and melreose, representing the different album versions */
/* used chatpt to help me centre images*/ 
.container-drawing {
    width: 480px;
    height: 210px;
    margin: 4px;
    overflow: hidden;
}

.image-container-drawing {
    position: relative;
    text-align: center;
    margin: 5px 
    width: 500px; 
    height: auto; 
}

.image-container-drawing img {
    width: 95%; 
    height: 100px; 
}

.image-container-drawing p {
    position: absolute;
    top: calc(50% - 10px); 
    left: 50%;
    transform: translate(-40%, -60%);
    padding: 5px;
    word-spacing: 20px;
    font-size: 17px; 
    white-space: nowrap; 
}

.center-images {
    display: flex;
    justify-content: center;
    align-items: center;
}
.container{
    justify-content: center;
}

.center-images img {
    margin-right: 15px; 
}

/* photocard template */
/* banner */
.image-container-ALBUM {
    position: relative;
    width: 100%;
    height: 400px; 
    background-image: url('pic/4946_001.jpg');
    background-size: cover;
    background-position: center;
    color: white; 
    text-align: center;
    justify-content: center;
    align-items: center;
}

.text-overlay-ALBUM {
    position: relative;
    top: 50%; 
    transform: translateY(-50%); 
    width: 100%;
}

.text-overlay-ALBUM h9 {
    font-size: 36px;
}





/* pc tracker page */

/* old container replaced with filterable cards

.container-pc {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh; 
    max-width: 1200px;
    width: 100%;
    padding: 5px;
    margin: 20px auto;
    background:yellow;
    }*/

/* was struggling to get my images in the right place deb helped my by creating parent card to make each section own unit */
.parent-cards{
    margin:auto;
    width:50vw;
    justify-content: center;
}

.filterable_cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.card {
    background-color: #503b7a;
    padding: 3px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    margin-right: 10px;
    margin-bottom: 10px;
    transition: opacity 0.3s ease; 
}
.card_checkbox {
    display: none; 
}
.card_checkbox:checked.img {
    opacity: 0.7; 
}
.card:hover .img {
    opacity: 0.7; 
}
.card:active .img {
    opacity: 0.7; 
}
.card .img {
    width: 100%;
    height: 200px;
    border-radius: 9px 9px 0 0;
    opacity: 1; 
    transition: opacity 0.3s ease; 
}
.card_body {
    padding: 15px 20px 20px;
    padding-bottom: 10px;
}
.card_title {
    font-size: 12px;
    color: whitesmoke;
    margin-top:0;
    margin-bottom:3px;
}
.card_text {
    font-size: 20px;
    color: black;
}

h6{
    text-align: center;
}