body, html {
    margin: 0;
    font-family: 'Poppins', sans-serif; /* Modern bir font kullanımı */
    background: #f9f9f9; /* Daha yumuşak bir arka plan rengi */
    color: #333; /* Genel metin rengi */
}

.container {
    text-align: center;
    padding: 50px;
    margin-top:7%;
}

.profile {
    display: flex; /* flexbox kullanarak içerikleri yan yana alıyoruz */
    flex-wrap: wrap; /* ekran küçüldüğünde alt satıra geçmesini sağlıyoruz */
    align-items: center; /* içerikleri dikey olarak ortalar */
    justify-content: start; /* içerikleri yatay olarak ortalar */
}


.my-text {
    flex: 1.5; /* flex öğelerinin esnekliğini belirler */
    min-width: 300px; /* minimum genişlik belirlenerek ekran küçüldüğünde alt alta düzen sağlanır */
    margin-right: 7%;
}
.my-photo{
    flex: 1; /* flex öğelerinin esnekliğini belirler */
    min-width: 240px; /* minimum genişlik belirlenerek ekran küçüldüğünde alt alta düzen sağlanır */
}
.profile-picture {
    border-radius: 50%;
    width: 100%; /* genişlik yüzde olarak belirlendi */
    max-width: 280px; /* maksimum genişlik */
    max-height: 300px; /* maksimum genişlik */

    border: 4px solid #5bc0de; /* Kenarlık rengini değiştir */
    box-shadow: 0px 4px 10px rgba(0,0,0,0.1); /* Hafif bir gölge ekle */
    margin-bottom: 30px;
    aspect-ratio: 1 / 1; /* genişlik ve yükseklik oranını 1:1 yapar */
}

.intro-text {
    font-size: 1.5em;
    margin-bottom: 20px;
    text-align: left; /* Metni sola yaslar */
    margin-left: 20px ;
}
.buttons .button {
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 50px; /* This creates the rounded buttons */
    border: 2px black solid;
    font:bold;
    transition: background-color 0.5s ease; /* Geçiş özelliği */
}

.resume {
    background-color: #f0ad4e; /* Orange */
}


.projects {
    background-color: #d9534f; /* Red */
}

.contact {
    background-color: #5bc0de; /* Sky Blue */
}
.resume:hover,
.projects:hover,
.contact:hover {
    background-color: rgb(255, 255, 255); /* Beyaz renk */
    color: black;
}
#dynamic-text {
    font-weight: bold;
    color: #333;
    height: 25px;
  }
/* Duyarlı tasarım için medya sorguları */
@media (max-width: 600px) {
    .profile {
        flex-direction: column; /* ekran genişliği 600px altına düştüğünde içerikleri sütun olarak diz */
    }
    
    .my-photo,
    .my-text {
        min-width: 100%; /* tüm genişliği kullan */
    }
    
    .container {
        margin-top: 10%; /* daha az üst boşluk bırak */
    }
}