body{
margin:0;
font-family:Inter, Arial;
background:#02161c;
color:#e9f7f8;
}

.nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 40px;
background:#072b33;
}

.nav a{
color:#e9f7f8;
margin-left:20px;
text-decoration:none;
}

.hero{
display:flex;
align-items:center;
justify-content:space-between;
height:90vh;
padding:80px;
}

.heroText h1{
font-size:64px;
margin:0;
}

.btn{
display:inline-block;
margin-top:20px;
padding:12px 24px;
background:#3aa76d;
color:white;
text-decoration:none;
border-radius:6px;
}

#heroPlanet{
width:600px;
height:600px;
}

.explorerLayout{
display:grid;
grid-template-columns:260px 1fr 300px;
grid-template-rows:60px 1fr 140px;
height:100vh;
}

.explorerHeader{
grid-column:1/4;
background:#072b33;
display:flex;
align-items:center;
padding-left:20px;
}

.explorerLeft{
background:#0d2a30;
padding:20px;
}

.explorerRight{
background:#0d2a30;
padding:20px;
}

#planetView{
background:black;
}

.explorerConsole{
grid-column:1/4;
background:#072b33;
padding:15px;
}

.discoveryCard{
background:#0d2a30;
padding:20px;
border-radius:10px;
cursor:pointer;
}

.genesisCard{
background:#0d2a30;
padding:20px;
border-radius:10px;
}