body {
    font-family: Helvetica, sans-serif;
    background: #000000;
    padding: 0 40px;
    text-align: center;
    color:#fff;
}

h1 {
    font-size: 6em;
    letter-spacing: -2px;
    color: #E0E0E0;
}

.grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    background-color: #000000;
    padding: 10px;
    gap: 10px
  }

.card{
    background-color: gray;
    color: black;
    padding: 10%;
}

.card:hover{
    background-color: #C0C0C0;
}

.card.sun{
    grid-column: 1/3;
    grid-row: 1/3;
    
}

.planet{
    height: 100px;
    width: 100px;
    background-color: #fff;
    border-radius: 50%;
    display: inline-block;
    margin-top: 20%;
}

.planet.sun{
    background-color: gold;
    height: 250px;
    width: 250px;
}

.planet.mercury{
    background-color: #511C29;
}

.planet.venus{
    background-color: #FFA62B;
}

.planet.earth{
    background-color: #06AED5;
}

.planet.mars{
    background-color: #FF3C38;
}

.planet.jupiter{
    background-color: #DE6B48;
}

.planet.saturn{
    background-color: #B5DAB7;
}

.planet.uranus{
    background-color: #0C6291;
}

.planet.neptune{
    background-color: #3423A6;
}