
<style>

	.krona-one-regular {
	  font-family: "Krona One", sans-serif;
	  font-weight: 400;
	  font-style: normal;}

	 .krona-one-regular2 {
	  font-family: "Krona One", sans-serif;
	  font-weight: 900;
	  font-style: normal;
	  margin-bottom:0px ;	}

	  .great-vibes-regular {
	  font-family: "Great Vibes", cursive;
	  font-weight: 400;
	  font-style: normal;
	}


html, body {overflow-x: hidden;
scroll-behavior: smooth;}
	body {
		  font-family: 'MyCustomFont', sans-serif; }
	body, section, h1, h2, h3, p, ol, ul, p2 {margin: 0; padding: 0px}
	
	ul {list-style: none;}

	ul li a {	text-decoration: none ;
				display: block;
				color: black;
				padding:8px 12px;
				font-size: 1.1rem}

	ul li a:hover{background-color: gray;
				  transition: all 1s;
				  color: white;}
 
h1{	font-size: 2.3rem;
		padding: 3px 5px;
		cursor: pointer;}

h2 {margin: 100px;
		text-align: center;
		}
.songs  {
		text-align: center;
		}
		.songs h {
		text-align: center;
		color: white;
		background-color: black;
		}

h4 {margin: 10px;
		position: fixed;}

h5 {text-align: center;
		padding-bottom: 0px;
		font-size: 4rem;
		padding-top: 50px}

h6 {padding-left:30px ;
		font-size: 4rem}

.P1 {font-size:4.3rem;
		font-weight: 600;
		padding-top: 20px}

p2 {padding-left: 40px}

p3 {text-align: center;
		position: absolute;}

footer {font-size: 1.6rem;
		padding-left: 30px ;
		padding-top: 30px;
		padding-right: 1px;}

	
    .flex{ padding-top: 10px;
    		padding-right: 3px;
    		display: flex; 
    		justify-content: space-between;}

		.wrap-flex{
    			display: flex;}

    .scroll-behavior {
        overflow-y: scroll;
        scroll-behavior: smooth;}
    

		.PRIME {padding-bottom: 50px;
						width: 100%;	}

 		.beber { padding-right: 30px;
	 		width:59%; 
	 		height:80%;
	 		object-fit: cover;
	 		padding-bottom: 100px;}

		.navigesyen {background-color: black;
				color: white;
				border-radius: 70px}
		.navigesyen:hover{
						background-color: red;}

		@keyframes fadeIn {
		  0% {
		    opacity: 0; 
		  }
		  100% {
		    opacity: 1; 
		  }}

		
		#grad1 {
		  height: 70px;
		  background-color: red;
			background-image: linear-gradient(to bottom, red, white);
			}

#grad2 {
		  height: 110px;
		  background-color: white;
			background-image: linear-gradient(to top, black, white);
			padding-top: 80px}
#grad3{
		  height: 110px;
		  background-color: white;
			background-image: linear-gradient(to bottom, black, white);
			padding-bottom: 80px}

 		.tahun {font-family: 'Krona One';
 			font-weight: 9000;
 			font-size: 9rem;
 			color: red;
 			text-shadow: 2px 2px 8px rgba(0,0,0,3.5);}

 		.page1 {width: 1290px;
 			margin: 0 auto;}

 		.nostalgia {font-family: 'Great Vibes';
 			font-weight: 200;
 			font-size: 3rem;
 			color: red;}

 		.laki {width:70%;
	 		height: 70%;
	 		margin: auto;
	 		display: block;
	 		padding-top: 10px;
	 		padding-bottom: 200px}

 		
		.hero-section {
		  position: relative;
		  width: 100%;
		  height: 100vh; 
		  background: #ffffff; 
		  overflow: hidden;}
		

		.hero-bg {
						  position: absolute;
						  inset: 0;
						  pointer-events: none;

  background:
    radial-gradient(circle at left center, 
    	rgba(40, 40, 40, 0.8), 
    	rgba(255,255,255,0) 20%),

    radial-gradient(circle at right center, 
    	rgba(40, 40, 40, 0.8), 
    	rgba(255,255,255,0) 20%),

    radial-gradient(circle at center, 
    	rgba(0,0,0,5.5), 
    	rgba(255,255,255,0) 45%);
    
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	  filter: blur(1px);}
	

		.content {
						  position: relative;
						  text-align: center;
						  top: 45%;
						  color: white;}
						
		.audio {margin: auto;
						display: block;}

		.jatuh  {text-align: center;
						padding-bottom: 20px;
						line-height: 3.5;
						font-weight:bold ;}

		.logo {height: 100px;
					display: flex;
					align-items: center;
					justify-content: center;
					}

		
.kotak {
	width: 100%;
	height: 90vh;
	background-color: black;
	display: flex;
	align-items: center;
	justify-content: center;

}

.gallery {
	display: flex;
	align-items: center;
	justify-content: center;
}

.img-box {
    width: 100px;
    height: 500px;
    margin: 10px;
    border-radius: 20px; 
    background: url(letmeloveu.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    transition: width 0.9s;
	   }

.img-box:nth-child(2)
{
	background-size: cover;
	    background: url(wedonttalkanymore.jpg);
	background-position: center;
}

.img-box:nth-child(3)
{
	background-size: cover;
	    background: url(closer.jpg);
	background-position: center;
}
.img-box:nth-child(4)
{
	background-size: cover;
	    background: url(zaynpillow.jpg);
	background-position: center;
}
.img-box:nth-child(5)
{
	background-size: cover;
	    background: url(starboy.jpg);
	background-position: center;
}
.img-box:nth-child(6)
{
	background-size: cover;
	    background: url(wfh.jpg);
	background-position: center;
}
.img-box:nth-child(7)
{
	background-size: cover;
	    background: url(adele.jpg);
	background-position: center;
}
.img-box:nth-child(8)
{
	background-size: cover;
	    background: url(side2side.jpg);
	background-position: center;
}



.img-box h3 {
	color: white;
	position: absolute;
	bottom: 0;
	left: 30px;
	opacity: 0;
	transition: bottom  0.5s, opacity 1s;
}

.img-box:hover{
	width: 300px;
	cursor: pointer;
}

.img-box:hover h3{
	opacity: 1;
	bottom: 25PX;
}

---------------------------------------------------------------
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;

}

.kingkylie  {
	margin: 100px auto;
    display: flex;
    align-items: flex-start;
    padding: 40px;
    padding-bottom: 0px;
    padding-top: 100px;
    justify-content: center;
    max-width: 1200px;
}

.bigtittle {
    font-size: 170px;
    font-weight: bold;
    color:red;
    line-height: 165px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin-right: 50px;
    font-family: 'Krona One';
}

.ayat {
    max-width: 694px;
    position: relative;
}

.description {
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 33px;
    color:black;
}

.duagambar  {
    display: flex;
    gap: 20px;
}

.kylie1 {
    width: 300px;
    height: auto;
    border-radius: 5px;
}

.kylie2 {
    width: 200px;
    height: 190px;
    border-radius: 5px;
}
----------------------------------------------------------------


.cardtajuk {
    width: 100%;
    display: flex;
    justify-content: flex-start; 
    margin-top: 50px;
}


.card {
    width: 800px; 
    background: lightgrey;
    border-radius: 100px;
    padding: 95px 210px; 
    margin: 0 auto; 
    
    
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    gap: 50px; 
}

.card-content { 
   
    text-align: left; 
}


.card h {
    margin-top: 0;
    font-size: 50px;
    font-weight: bold;
    color: white;
    margin: 30px 0 30px 0; 
    text-align: left;
}

.card p {
    font-size: 30px;
    color: white;
    max-width: 550px;
    margin: 60px 0 60px 0; 
    text-align: left;
}


.button {
    margin-top: 15px;
    display: inline-block;
    padding: 10px 18px;
    background: red;
    color: white;
    border-radius: 20px;
    text-decoration: none;
    margin-left: 0;
}


.bgcard {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: white;
    padding: 10px 20px;
    border-radius: 0;

 .card-content3 p {
 	font-size: 25px;
 	max-width: 800px;
 }
}-------------------------------------------------------------

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

.description2 {
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 33px;
    color: white;
    margin-left: 100px;
}


.loren {
    display: block;
    align-items: flex-start;
    padding: 40px;
    padding-bottom: 30px;
    padding-top: 100px;
    padding-left: 170px;
      justify-content: center;
    max-width: 1200px;
margin: 100px auto;
}

.bigtittle2 {
    font-size: 120px;
    font-weight: bold;
    color:red;
    line-height: 110px;
    writing-mode: vertical-rl;
   	position: absolute;
    right: -230px;
   	top: 0px;
    font-family: 'Krona One';
}


.duagambar2  {
    display: flex;
    align-items: center;
    gap: 20px;
}

.loren2 {
    width: 200px;
    height: 190px;
    border-radius: 10px;
    padding-left: 150px;
}
.loren1 {
    
    width: 100px; 
    height: 100px;
    border-radius: 10px;
}
--------------------------------------------------------------

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}
.justinbieber  {
	margin: 100px auto;
    display: flex;
    align-items: flex-start;
    padding: 40px;
    padding-bottom: 0px;
    padding-top: 80px;
    margin-bottom: 10px;
       justify-content: center;
    max-width: 1200px;
}

.justin {
    display: block;
    align-items: flex-start;
    padding: 0;
    padding-bottom: 100px;
    padding-top: 80px;
    padding-left: 100px;
}

.bigtittle3 {
    font-size: 120px;
    font-weight: bold;
    color:red;
    line-height: 130px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin-right: 50px;
    font-family: 'Krona One';
}


.duagambar3  {
    display: block;
    gap: 20px;
}
.ayat3 {max-width: 694px}

.back {background-color: red;
				color: white;
				border-radius: 70px;
				padding: 20px;
				width: 47px;
				margin-left: 1000px;
				}

.back2 {
  background-color: red;
  color: white;
  border-radius: 70px;
  padding: 20px;
  width: 47px;

  margin-left: 1100px ;
  margin-right: 0;
  margin-top: 40px;

  display: block;
}

---------------------------------------------------------------
.trend {
  max-width: 1200px;
  margin: 100px auto;
  text-align: center;  
}

#TREND {
  max-width: 1200px;
  margin: 0 auto;  
  padding-top: 120px;  
}

#TREND h1 {font-size: 6rem}

#TREND h1,
#TREND p {
  text-align: left;  
}

.video-wrapper {
  display: flex;
  gap: 10px;
  margin-top: 30px;
}

	
</style>