body {
    font-family: Arial, sans-serif; /* Tüm site için Arial yazı tipi ayarlanıyor */
    margin: 0; /* Sayfa kenar boşluklarını sıfırlıyor */
    padding: 0; /* Sayfa içi boşlukları sıfırlıyor */
    background-color: #f4f4f4; /* Arka plan rengi gri olarak ayarlanıyor */
    color: #333; /* Varsayılan yazı rengi koyu gri olarak belirleniyor */
}

header {
    background-color: #2d3e50; /* Başlık kısmının arka plan rengi koyu mavi-gri yapılıyor */
    color: #fff; /* Yazı rengi beyaz olarak ayarlanıyor */
    text-align: center; /* Yazı ortalanıyor */
    padding: 20px; /* Üst ve alt boşluk 20 piksel yapılıyor */
    position: relative; /* Konumlandırma işlemleri için "relative" kullanılıyor */
}

header .logo {
    width: 90px; /* Logonun genişliği 80 piksel olarak ayarlanıyor */
    height: auto; /* Görüntü oranını korumak için yükseklik otomatik ayarlanıyor */
    position: absolute; /* Konumlandırma için absolute kullanılıyor */
    top: 10px; /* Logonun üstten uzaklığı 10 piksel */
    left: 10px; /* Logonun soldan uzaklığı 10 piksel */
}

header h1 {
    font-size: 2.5em; /* Başlık yazı boyutu büyük yapılıyor */
    margin: 0; /* Kenar boşlukları sıfırlanıyor */
    line-height: 1.5; /* Satır yüksekliği ayarlanıyor */
}

nav {
    display: flex; /* Esnek kutu modeli uygulanıyor */
    justify-content: center; /* Bağlantılar yatayda ortalanıyor */
    align-items: center; /* Bağlantılar dikeyde ortalanıyor */
    background-color: #273748; /* Gezinti çubuğu arka plan rengi koyu mavi-gri yapılıyor */
    padding: 10px 20px; /* Çubuk etrafında boşluk bırakılıyor */
}

nav a {
    color: #FFD700; /* Bağlantıların rengi altın sarısı yapılıyor */
    text-decoration: none; /* Bağlantılardaki alt çizgi kaldırılıyor */
    font-size: 1.2rem; /* Yazı boyutu biraz büyütülüyor */
    margin: 0 15px; /* Bağlantılar arasında boşluk bırakılıyor */
    font-weight: bold; /* Yazı tipi kalın yapılıyor */
    transition: color 0.3s ease-in-out; /* Renk değişimi yumuşatılıyor */
}

nav a:hover {
    color: #fff; /* Fare üzerine geldiğinde yazı rengi beyaz oluyor */
}

.grid {
    display: grid; /* Izgara düzeni uygulanıyor */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Dinamik sütun düzeni oluşturuluyor */
    gap: 20px; /* Kutular arasında boşluk bırakılıyor */
    padding: 20px; /* Izgaranın kenarlarına boşluk ekleniyor */
}

.gezegen {
    border-radius: 8px; /* Kutuların köşeleri yuvarlatılıyor */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Hafif bir gölge ekleniyor */
    padding: 20px; /* Kutuların içi boş bırakılıyor */
    text-align: center; /* Metinler ortalanıyor */
    transition: transform 0.3s ease-in-out; /* Hover sırasında dönüşüm yumuşatılıyor */
    color: #fff; /* Kutuların içindeki yazı rengi beyaz yapılıyor */
}

.gezegen:hover {
    transform: scale(1.05); /* Fare üzerine gelindiğinde kutu büyüyor */
}

.gezegen img {
    width: 100%; /* Görseller kutuyu tamamen dolduruyor */
    height: auto; /* Görüntü oranını koruyor */
    border-radius: 8px; /* Görsellerin köşeleri yuvarlatılıyor */
}

.gezegen h2 {
    font-size: 1.8em; /* Başlık yazı boyutu artırılıyor */
    margin: 10px 0; /* Başlık kenar boşlukları düzenleniyor */
}

.gezegen p {
    font-size: 1em; /* Paragraf yazı boyutu ayarlanıyor */
    line-height: 1.5; /* Satır yüksekliği artırılıyor */
}

.gezegen ul {
    list-style: none; /* Liste işaretleri kaldırılıyor */
    padding: 0; /* Liste iç boşlukları sıfırlanıyor */
}

.gezegen ul li {
    margin: 5px 0; /* Liste öğeleri arasında boşluk bırakılıyor */
}

/* Gezegenlerin Renkleri */
.merkür {
    background-color: #8a8a8a; /* Merkür için gri arka plan rengi */
}

.venus {
    background-color: #e6a400; /* Venüs için turuncu arka plan rengi */
}

.dunya {
    background-color: #1e90ff; /* Dünya için mavi arka plan rengi */
}

.mars {
    background-color: #ff4500; /* Mars için kızıl arka plan rengi */
}

.jupiter {
    background-color: #ff6347; /* Jüpiter için turuncu kırmızı arka plan rengi */
}

.saturn {
    background-color: #f4a300; /* Satürn için sarı arka plan rengi */
}

.uranus {
    background-color: #00ced1; /* Uranüs için mavi-yeşil arka plan rengi */
}

.neptun {
    background-color: #4682b4; /* Neptün için mavi arka plan rengi */
}

.pluton {
    background-color: #4b0082; /* Plüton için mor arka plan rengi */
}

.ceres {
    background-color: #708090; /* Ceres için gri mavi arka plan rengi */
}

.haumea {
    background-color: #8b0000; /* Haumea için koyu kırmızı arka plan rengi */
}

.makemake {
    background-color: #ff1493; /* Makemake için pembe arka plan rengi */
}

.eris {
    background-color: #6a5acd; /* Eris için slate blue arka plan rengi */
}

.sedna {
    background-color: #2f4f4f; /* Sedna için koyu yeşil gri arka plan rengi */
}

.quaoar {
    background-color: #7fff00; /* Quaoar için yeşil sarı arka plan rengi */
}

.orcus {
    background-color: #2e8b57; /* Orcus için orta yeşil arka plan rengi */
}

footer {
    background-color: #2d3e50; /* Alt bilginin arka plan rengi koyu mavi-gri yapılıyor */
    color: #fff; /* Yazı rengi beyaz olarak ayarlanıyor */
    text-align: center; /* Metin ortalanıyor */
    padding: 10px; /* Alt bilgiye içerik boşluğu eklen*/
    position: fixed; /* Alt bilgi sayfanın en altında sabitleniyor */
    bottom: 0; /* Alt bilgiyi sayfanın en altına yerleştiriyor */
    width: 100%; /* Alt bilgi tam genişlikte oluyor */
}