/* styles.css */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background-color: grey;
}

.long-rectangle {
    position: relative;
    width: 500px; /* Uzun dikdörtgenin genişliği */
    height: 80vh; /* Uzun dikdörtgenin yüksekliği */
    background-color: #4D4D4D; /* Kapalı gri rengi */
    padding: 20px; /* İçeriklerin kenardan uzaklığı */
    box-sizing: border-box; /* Padding'i toplam genişliğe dahil eder */
    display: flex;
    flex-direction: column; /* İçerikleri dikey olarak düzenler */
    align-items: center; /* İçerikleri ortalar */
    justify-content: space-between; /* İçerikler arasında boşluk bırakır */
    position: relative; /* Yüksekliği ayarlamak için */
    overflow: hidden; /* İçeriklerin taşmasını engeller */
}

.rainbow-strip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px; /* Çubuğun yüksekliği */
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    background-size: 600% 100%; /* Arka plan boyutunu büyütür */
    animation: rainbow 5s linear infinite; /* Animasyon ayarları */
}

@keyframes rainbow {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 0%;
    }
}

.centered-text {
    font-size: 16px; /* Yazı boyutunu artırdım */
    font-family: 'Arial', sans-serif; /* Font ailesi */
    color: white; /* Yazının rengi */
    text-align: left; /* Yazıyı sola hizalar */
    margin-bottom: 10px; /* Üst boşluk */
}

.selection-panel-wrapper {
    position: relative;
    width: 100%;
    height: calc(100% - 60px); /* Butonun yüksekliği kadar boşluk bırak */
    background: #333; /* Arka plan rengi */
    overflow: hidden; /* Scrollbar'ları gizle */
}

.selection-panel {
    display: flex;
    flex-direction: column; /* Seçim kutularını dikey olarak hizalar */
    gap: 10px; /* Seçim kutuları arasında boşluk bırakır */
    color: white; /* Seçim metinlerinin rengi */
    padding: 10px; /* İçerik kenarlarından boşluk */
    margin: 0; /* Margin'i sıfırlar */
    height: calc(110% - 40px); /* Yüksekliği ayarla (buton yüksekliği için) */
    overflow: auto; /* Scrollbar'ları görünür yapar */
}

/* Invisible scrollbar */
.selection-panel::-webkit-scrollbar {
    width: 0px; /* Genişliği 0 yaparak gizler */
}

.selection-panel::-webkit-scrollbar-thumb {
    background: transparent; /* Kaydırıcıyı görünmez yapar */
}

/* Sayı ve oran kısmının konumunu ayarla */
#number-display {
    text-align: left; /* Soldan hizala */
    color: white;
    font-family: 'Arial', sans-serif;
    position: absolute; /* Mutlak konumlandırma */
    top: 20px; /* Üstten boşluk bırakır */
    left: 20px; /* Soldan boşluk bırakır */
    margin: 0; /* Margin'i sıfırlar */
}

#percentage-display {
    text-align: right; /* Sağ hizala */
    color: white;
    font-family: 'Arial', sans-serif;
    position: absolute; /* Mutlak konumlandırma */
    top: 20px; /* Üstten boşluk bırakır */
    right: 20px; /* Sağdan boşluk bırakır */
    margin: 0; /* Margin'i sıfırlar */
}

/* Buton stil ayarları */
#generate-button {
    background-color: #555555;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 20px; /* Üstten boşluk bırakır */
    position: static; /* Butonu normal akışa alır */
}

#generate-button:hover {
    background-color: #666666;
}