@charset "utf-8";

body{
	background-image:url("images/bg_star.png");
	background-color:#151226;
	 scroll-behavior: smooth;
font-family: 'Space Grotesk', sans-serif;
	margin:0px;
	
}

.NAvb{
	width:15px;
	height: 25px;
}
a{text-decoration:none;
color:#9d8ff2;
	
}
a:hover{
	text-decoration:none;
color:#9d8ff2;
}

.NAV{
	margin-right: 50px;
	background-color:#151226;
}



/*-------------------------BOOK___________-----------------------------*/

.Card_ON{
	border-radius: 15px 15px 30px 30px;
	margin: auto;
	 width: 300px;
	height: 350px;
	background-image:url("images/Kepler-425b.png");
	background-size:360px;
	background-repeat: no-repeat;
	background-color: white;
}

.BK_info h3{
	padding-top: 2px;
}


h4{
	color:white;
}
.PER_P{
	font-size:12px;

}

h6{
	font-size:12px;
	color:white;
}

.BK_info{
	background-color:#8F82DD;
border-radius: 25px 25px 30px 30px;
	 position: relative;
  top: 60px;
padding-left:15px;
	padding-top: 30px;
	padding-bottom: 15px;
	transform: translateY(140px);
}



.BK{
margin-top:10px; 
	padding: 5px;
	border-radius: 3.5px;
	border:none;
	background: none;
	color:white;
	font-weight: 600;
background-color: #664aff;	
}


.PRICE{

	transform: translateY(15%);
	padding-right: 10px; 
	text-align: right;
}

.gy-ovy{
	background-color: #8C8C8C; 
	
	
}

.LINe{
	
	background-color:rgba(255,255,255,0.47);
}

#BK_NT{
	text-align: left;
}

.Card_ON1{
	border-radius: 15px 15px 30px 30px;
	margin: auto;
	 width: 300px;
	height: 350px;
	background-image:url("images/Kepler 22b.png");
	background-size:400px;
	background-repeat: no-repeat;
	background-color: white;
}

.Card_ON2{
	border-radius: 15px 15px 30px 30px;
	margin: auto;
	 width: 300px;
	height: 350px;
	background-image:url("images/HD 189733b_1.png");
	background-size:400px;
	background-repeat: no-repeat;
	background-color: white;
}

.BK_info2{
	background-color:rgba(191,184,227,1.00);
border-radius: 25px 25px 30px 30px;
	 position: relative;
  top: 60px;
padding-left:15px;
	padding-top: 30px;
	padding-bottom: 15px;
	transform: translateY(140px);
}

.BK2{
margin-top:10px; 
	padding: 5px;
	border-radius: 3.5px;
	border:none;
	background: none;
	color:white;
	font-weight: 600;
background-color: #443F60;	
}

.TXT2 h3 h4 h6{
	color:#E2E2E2;
}

.PER_P2{
	font-size:12px;
color:#443F60;
}



/*-----------------------------Exoplanet-----------------------------------*/



.CARD{
	justify-content: flex;
border-radius: 20px;
	height: 250px;
	marign: 20px;
	/*box-shadow: 3px 3px 25px #664aff;*/
	overflow: hidden;
	
}


.CARDTXT{
	justify-content: flex;
	width: 420px;
	bottom: 400px;
	height: 60px;
	border-radius: 20px;
padding:4px;
	box-sizing: border-box;
	position:absolute;
	background-color:rgba(143,130,221,.50);
	transition: .5s;
}
.CARDTXT h2{
	marign:41px;
	color:white;
}

.CARDTXT h6{
	color:#664aff;
}
.CARDTXT  p{color:white;}


.CARD img{
	height: 350px;
	width: 510px;
	border-radius:3px;
		
}

.SIZE{
	
	height: 70vh;

}

h2{
	font-size:40px;
	margin: 10px;
}


h6{
	font-size:20px;
	font-weight: 900;
	margin: 5px;
visibility: hidden;
	opacity: 0;
	
	
}
p{
	font-size:15px;
	margin: 20px;
	visibility: hidden;
	opacity: 0;
}



.CARD:hover .CARDTXT{
	height: 320px;
	bottom: 230px;
	cursor: pointer;
	background-color:#8F82DD; 
	
}


.CARD:hover h6 {
	opacity: 1;
	visibility: visible;
	
}

.CARD:hover p{
	opacity: 1;
	visibility: visible;
	
}