main.css

*{
    padding: 0;
    margin: 0;
    /* outline: red 1px dotted; */
    font-family: 'Priori Serif';
}
.main-container{
    height: 5000px;
   position: relative;
}
.main-container .nav{
    top: 0;
    position: sticky;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: black;
   padding-top: 10px;
   padding-bottom: 10px;
   z-index: 1;
}

.main-container .nav .left{
    display: flex; 
    align-items: center;
    justify-content: center;
    list-style-type: none;
}

.main-container .nav img{
    justify-self: center;
}
.main-container .nav .left .link {
    text-align: center;
    position: relative;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

.main-container .nav .link:hover{
    color: white;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    transition: 1s ease-in-out;
}
/* Learn Event bEfore and After*/

.main-container .nav ul li a{
    color: #f78da7;
    padding: 10px;
    font-weight: bolder;
    text-decoration: none;
}

.main-container .nav .right{
    display: flex;
    align-items: center;
    justify-content: center;
    list-style-type: none;
}
.icon:hover{
    color: white;
}
.main-page{
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(Images/Background.jpg);
    background-size: cover;
    height: 100vh;
    width: 100%;
}

.main-page .btn-container-out{
position: absolute;
bottom: 0;
padding-bottom: 6rem;
}
.main-container .btn-container-out button{
 padding: 10px;
 font-size: larger;
 padding-left: 60px;
 padding-right: 60px;
 border-radius: 40px;
 background-color: #d93659;
 border-style: none;
 color:white;
 font-weight: 400;
 transition: 1s ease-in-out;
}
.main-container .btn-container-out button:hover{
   background-color: #f4a7ba;
}


/* Shop Store Styles*/
.Shop-Store{
   position: absolute;
   height: 160vh;
   width: 100%;
   margin-top: 100vh;
   background-color: #f4a7ba; /*BlackPink Color*/
  display: grid;
}
.Shop-Store .title-container{
display: flex;
align-items: center;
padding-left: 30px;
padding-top: 1rem;
}

.Shop-Store .product-container{
    margin-top: 1rem;
    position: relative;
    display: grid;
    grid-template-columns: repeat(4,1fr);   
    align-items: center;
    justify-content: center;
}

.Shop-Store .product-container .jisoo-container{
    position: relative;
display: grid;
align-items: center;
justify-content: center;
padding-left: 11rem;
padding-bottom: 10rem;
}
.Shop-Store .product-container .jennie-container{
display: grid;
align-items: center;
justify-content: center;
padding-left: 1rem;
}

.Shop-Store .product-container .Rose-container{
    display: grid;
    align-items: center;
    justify-content: center;
    padding-bottom: 10rem;
}

.Shop-Store .product-container .Lisa-container{
    display: grid;
    align-items: center;
    justify-content: center;
    padding-right: 11rem;
}


/*Product Styles*/


.Shop-Store .product-container .ExBox-container{
display: grid;
align-items: center;
justify-content: center;
padding-left: 11rem;
padding-bottom: 10rem;
}


.Shop-Store .product-container .Tie-Dye-container{
display: grid;
align-items: center;
justify-content: center;
padding-left: 1rem;
}

.Shop-Store .product-container .Tour-Logo-container{
    display: grid;
    align-items: center;
    justify-content: center;
    padding-right: 2rem;
    padding-bottom: 10rem;
}
.Shop-Store .product-container .Pink-Hoodie-container{
    display: grid;
    align-items: center;
    justify-content: center;
    padding-right: 11rem;
}


.Shop-Store .shop-btn-container{
justify-self: center;
}

.Shop-Store .shop-btn-container button{
    padding: 10px;
    font-size: larger;
    padding-left: 60px;
    padding-right: 60px;
    border-radius: 40px;
    background-color: #cf4764;
    border-style: none;
    color:white;
    font-weight: 400;
    transition: 1s ease-in-out;
}
.Shop-Store .shop-btn-container button:hover{
    background-color: #d93659;
}


.Shop-Store .product-container .jisoo-container .jisoo-pic{
    border-style: solid ;
    border-width: 10px;
    border-color: #f4a7ba;
    transition: 1ms ease-in-out;
}

.Shop-Store .product-container .jisoo-container .jisoo-pic:hover{
border-color:white ;
}

.Shop-Store .product-container .jennie-container .jennie-pic{
    border-style: solid ;
    border-width: 10px;
    border-color: #f4a7ba;
    transition: 1ms ease-in-out;
}
.Shop-Store .product-container .jennie-container .jennie-pic:Hover{
    border-color: whitesmoke;
}

.Shop-Store .product-container .Rose-container .rose-pic{
    border-style: solid;
    border-width: 10px;
    border-color: #f4a7ba;
}
.Shop-Store .product-container .Rose-container .rose-pic:hover{
    border-color: white;
}

.Shop-Store .product-container .Lisa-container .lisa-pic{
    border-style: solid;
    border-width: 10px;
    border-color: #f4a7ba;
}
.Shop-Store .product-container .Lisa-container .lisa-pic:Hover{
    border-color: white;
}


/*Jisoo Section 2 Styles */
.Shop-Store .product-container .jisoo-container .jisoo-description{
    position: absolute;
    display: grid;
    background-color:  hsla(0, 100%, 50%, 0.114);
    padding: 2rem;
    margin-left: 13rem;
    margin-top: 10rem;
    transition: 0.3s ease;

}
.subElement{
    transition: 0.3s ease-in-out;
}

.Shop-Store .product-container .jisoo-container .jisoo-description:hover{
    background-color: white;
}

.Shop-Store .product-container .jisoo-container .jisoo-description:hover .price-container-jisoo{
    padding-bottom: 2rem;
    opacity: 1;
    color: black;
}
.Shop-Store .product-container .jisoo-container .jisoo-description:hover .shop-btn-jisoo{

    opacity: 1;
    color: #f4a7ba ;
}
.Shop-Store .product-container .jisoo-container .jisoo-description:hover .title-container-jisoo h1{
color: black;
}


.Shop-Store .product-container .jisoo-container .jisoo-description .title-container-jisoo{
    text-align: center;
   padding-bottom: 1rem;

}
.Shop-Store .product-container .jisoo-container .jisoo-description .title-container-jisoo h1{
    font-size: 20px;
    color: white;
}

.Shop-Store .product-container .jisoo-container .jisoo-description .price-container-jisoo{
    text-align: center;
    opacity: 0;
    transition: opacity 0.3 ease;
}
/* .Shop-Store .product-container .jisoo-container .jisoo-description .price-container-jisoo:hover{
    opacity: 1;
    color: white;
} */
.Shop-Store .product-container .jisoo-container .jisoo-description .shop-btn-jisoo{
    justify-self: center;
   opacity: 0;
}
/* .Shop-Store .product-container .jisoo-container .jisoo-description .shop-btn-jisoo:hover{
        opacity: 1;
    color:  whitesmoke;
} */



/*Jennie Section 2 Styles*/

.Shop-Store .product-container .jennie-container .jennie-description{
    position: absolute;
    display: grid;
    background-color:  hsla(0, 100%, 50%, 0.114);
    padding: 2rem;
    margin-left: 3.5rem;
    margin-top: 18rem;
    transition: 0.3s ease;
}

.Shop-Store .product-container .jennie-container .jennie-description:hover{
    background-color: white;
}

.Shop-Store .product-container .jennie-container .jennie-description .title-container-jennie{
    text-align: center;
   padding-bottom: 1rem;

}

.Shop-Store .product-container .jennie-container .jennie-description:hover .title-container-jennie h1{
    color: black;
}

.Shop-Store .product-container .jennie-container .jennie-description .title-container-jennie h1{
    font-size: 20px;
    color: white;
}

.Shop-Store .product-container .jennie-container .jennie-description .price-container-jennie{
    text-align: center;
    opacity: 0;
    transition: opacity 0.3 ease;
}

.Shop-Store .product-container .jennie-container .jennie-description:hover .price-container-jennie{
    padding-bottom: 2rem;
    opacity: 1;
    color: black;
}

.Shop-Store .product-container .jennie-container .jennie-description .shop-btn-jennie{
    justify-self: center;
    opacity: 0;
}

.Shop-Store .product-container .jennie-container .jennie-description:hover .shop-btn-jennie{
    opacity: 1;
    color: #f4a7ba ;
}

/*Rose Section 2 Styles*/

.Shop-Store .product-container  .Rose-container .Rose-description{
    position: absolute;
    display: grid;
    background-color:  hsla(0, 100%, 50%, 0.114);
    padding: 2rem;
    margin-left: 1.5rem;
    margin-top: 14rem;
    transition: 0.3s ease;
}

.Shop-Store .product-container  .Rose-container .Rose-description:hover{
    background-color: white;
}

.Shop-Store .product-container  .Rose-container .Rose-description .Rose-Title-container{
    text-align: center;
    padding-bottom: 1rem;
}
.Shop-Store .product-container  .Rose-container .Rose-description .Rose-Title-container h1{
    color: white;
}
.Shop-Store .product-container  .Rose-container .Rose-description:hover .Rose-Title-container h1{
    color: black;
}

.Shop-Store .product-container  .Rose-container .Rose-description .price-container-rose{
    text-align: center;
    opacity: 0;
    transition: opacity 0.3 ease;
}

.Shop-Store .product-container  .Rose-container .Rose-description:hover .price-container-rose{
    padding-bottom: 2rem;
    opacity: 1;
    color: black;
}

.Shop-Store .product-container  .Rose-container .Rose-description .btn-container-rose{
    justify-self: center;
    opacity: 0;
}

.Shop-Store .product-container  .Rose-container .Rose-description:hover .btn-container-rose{
    opacity: 1;
    color: #f4a7ba ;
}




/*Lisa Section2 Container*/

.Shop-Store .product-container .Lisa-container .lisa-description{
    position: absolute;
    display: grid;
    background-color:  hsla(0, 100%, 50%, 0.114);
    padding: 2rem;
    margin-left: 1rem;
    margin-top: 25rem;
    transition: 0.3s ease;
}
.Shop-Store .product-container .Lisa-container .lisa-description:hover{
    background-color: white;
}

.Shop-Store .product-container .Lisa-container .lisa-description .title-container-lisa{
    text-align: center;
    padding-bottom: 1rem;
}
.Shop-Store .product-container .Lisa-container .lisa-description .title-container-lisa h1{
    color: white;
}

.Shop-Store .product-container .Lisa-container .lisa-description:hover .title-container-lisa h1{
    color: black;
}

.Shop-Store .product-container .Lisa-container .lisa-description .price-container-lisa{
    text-align: center;
    opacity: 0;
    transition: opacity 0.3 ease;
}

.Shop-Store .product-container .Lisa-container .lisa-description:hover .price-container-lisa{
    padding-bottom: 2rem;
    opacity: 1;
    color: black;
}
.Shop-Store .product-container .Lisa-container .lisa-description .shop-btn-lisa{
    justify-self: center;
    opacity: 0;
}

.Shop-Store .product-container .Lisa-container .lisa-description:hover .shop-btn-lisa{
    opacity: 1;
    color: #f4a7ba ;
}

/*Tie Dye Styles container 2 */

.Shop-Store .product-container .Tie-Dye-container .img-container-background:hover{
    background-color:  hsla(240, 20%, 96%, 0.415);
}

.Shop-Store .product-container .Tour-Logo-container .img-container-background:hover{
    background-color:  hsla(240, 20%, 96%, 0.415);
}

.Shop-Store .product-container .Pink-Hoodie-container .img-container-background:hover{
    background-color:  hsla(240, 20%, 96%, 0.415);
}

.Shop-Store .product-container .ExBox-container img:hover{
   border-width: 10px;
   border-style: solid;
   border-color: hsla(240, 20%, 96%, 0.415);
}

/*EXBOX DESCRIPTIONS STYLES*/
.Shop-Store .product-container .ExBox-container .Box-description{
    position: absolute;
    display: grid;
    grid-gap: 1rem;
    background-color: hsla(0, 100%, 50%, 0.114);
    margin-left: 12rem;
    margin-top: 16rem;
    transition: 0.3s ease-in-out;
  
}

.Shop-Store .product-container .ExBox-container .Box-description .title-container-ExBox{
    text-align: center;
    color: white;
    padding-top: 1rem;
}

.Shop-Store .product-container .ExBox-container .Box-description .price-container-ExBox{
    text-align: center;
    opacity: 0;
}

.Shop-Store .product-container .ExBox-container .Box-description .shop-btn-exBox{
    text-align: center;
    opacity: 0;
}
.Shop-Store .product-container .ExBox-container .Box-description:hover{
    background-color: white;
   
}

.Shop-Store .product-container .ExBox-container .Box-description:hover .title-container-ExBox{
    color: black;
   
}
.Shop-Store .product-container .ExBox-container .Box-description:hover .price-container-ExBox{
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}
.Shop-Store .product-container .ExBox-container .Box-description:hover .shop-btn-exBox{
    opacity: 1;
    padding-bottom: 2rem;
    color: #f4a7ba;
}
.transitionElement{
    transition: 0.3s ease-in-out;
}


/*TyeDye STyles*/
.Shop-Store .product-container .Tie-Dye-container .Tie-Dye-description{
    position: absolute;
    display: grid;
    grid-gap: 1rem;
    background-color: hsla(0, 100%, 50%, 0.114);
    margin-left: 3.5rem;
    margin-top: 16rem;
    transition: 0.3s ease-in-out;
}

.Shop-Store .product-container .Tie-Dye-container .Tie-Dye-description:hover{
    background-color: white;
}

.Shop-Store .product-container .Tie-Dye-container .Tie-Dye-description .title-container-TieDye{
    text-align: center;
    color: white;
    padding-top: 1rem;
}

.Shop-Store .product-container .Tie-Dye-container .Tie-Dye-description:hover .title-container-TieDye{
    color: black;
}

.Shop-Store .product-container .Tie-Dye-container .Tie-Dye-description .price-container-Tie-Dye{
text-align: center;
opacity: 0;
}

.Shop-Store .product-container .Tie-Dye-container .Tie-Dye-description:hover .price-container-Tie-Dye{
opacity:1;
}

.Shop-Store .product-container .Tie-Dye-container .Tie-Dye-description .shop-btn-TieDye{
text-align: center;
opacity: 0;
}
.Shop-Store .product-container .Tie-Dye-container .Tie-Dye-description:hover .shop-btn-TieDye{
    padding-bottom: 1rem;
    opacity: 1;
    color: #f4a7ba;
}

/*Tour Logo Description STYLES*/
.Shop-Store .product-container .Tour-Logo-description{
    position: absolute;
    display: grid;
    grid-gap: 1rem;
    background-color: hsla(0, 100%, 50%, 0.114);
    margin-left: 2rem;
    margin-top: 16rem;
    transition: 0.3s ease-in-out;
}

.Shop-Store .product-container .Tour-Logo-description:hover{
    background-color: white;
}

.Shop-Store .product-container .Tour-Logo-description .title-container-TourLogo{
    text-align: center;
    color: white;
    padding-top: 1rem;
}
.Shop-Store .product-container .Tour-Logo-description:hover .title-container-TourLogo{
    color: black;
}

.Shop-Store .product-container .Tour-Logo-description .price-container-TourLogo{
text-align: center;
opacity: 0;
}

.Shop-Store .product-container .Tour-Logo-description:hover .price-container-TourLogo{
    opacity: 1;
}

.Shop-Store .product-container .Tour-Logo-description .shop-btn-TourLogo{
text-align: center;
opacity: 0;
}
.Shop-Store .product-container .Tour-Logo-description:hover .shop-btn-TourLogo{
    opacity: 1;
    color: #f4a7ba;
    padding-bottom: 1rem;
}

/*Pink Venom Description STYLES*/
.Shop-Store .product-container .Pink-Venom-Hoodie-description{
    position: absolute;
    display: grid;
    grid-gap: 1rem;
    background-color: hsla(0, 100%, 50%, 0.114);
    margin-left: 3.5rem;
    margin-top: 16rem;
    transition: 0.3s ease-in-out;
    padding: 12px;
}

.Shop-Store .product-container .Pink-Venom-Hoodie-description:hover{
    background-color: white;
}

.Shop-Store .product-container .title-container-Hoodie{
    text-align: center;
    color: white;
    padding-top: 1rem;
}
.Shop-Store .product-container .Pink-Venom-Hoodie-description:hover .title-container-Hoodie{
    color: black;
}

.Shop-Store .product-container .price-container-Hoodie{
text-align: center;
opacity: 0;
}

.Shop-Store .product-container .Pink-Venom-Hoodie-description:hover .price-container-Hoodie{
opacity: 1;
}

.Shop-Store .product-container .shop-btn-Hoodie{
text-align: center;
opacity: 0;
}

.Shop-Store .product-container .Pink-Venom-Hoodie-description:hover .shop-btn-Hoodie{
    padding-bottom: 1rem;
    opacity: 1;
    color: #f4a7ba;
}


/*ListenNowSection*/

.Listen-Now{
    position: absolute;
    height: 110vh;
    width: 100%;
    margin-top:260vh;
    background-color: black; /*BlackPink Color*/
   display: grid;
   grid-template-rows: 1fr 30%;
 
}
.Listen-Now .album-container{
    display: grid;
   justify-self: center;
   align-items: center;
   margin-top: 2rem;
}

.Listen-Now .album-container .pic-container{
width: 500px;
height: 0;
position: relative;
padding-bottom: 70%;
}
.Listen-Now .album-container .pic-container img{
position: absolute;
object-fit: cover;
top: 0;
  left: 0;
  width: 100%; 
  height: 100%; 
}

.Listen-Now .album-container .hover-description-container{
    display: grid;
    width: 100%;
    grid-gap: 1rem;
    color: white;
}

.Listen-Now .album-container .hover-description-container .latest-release{
    text-align: center;
    opacity: 0;
}

.Listen-Now .album-container .hover-description-container .born-pink{
    text-align: center;
    opacity: 0;
}
.Listen-Now .album-container .hover-description-container .listenNow-dropdown{
    opacity: 0;
}


/*Section 4 Videos*/

.website-video{
    margin-top: 370vh;
    display: grid;
    position: absolute;
    height: 100vh;
    width: 100%;
    background-color: #f78da7;
}