@import './default.css';
@import './fontFamily.css';
@import './topbar.css';
@import './header.css';
@import './home.css';
@import './sidebar.css';
@import './posts.css';
@import './about.css';
@import './logReg.css';
@import './add.css';
@import './error.css';
/* Mobil cihazlar için (Ekran genişliği 768px ve altı) */
mark {
    background-color: yellow;
    color: black;
    font-weight: bold;
    padding: 2px;
    border-radius: 3px;
}


@media screen and (max-width: 768px) {
    body {
        font-size: 14px; /* Yazıları küçült */
    }

    .container {
        width: 100%; /* İçeriği tam genişlikte yap */
        padding: 10px;
    }

    .sidebar {
        display: none; /* Yan menüyü kaldır */
    }

    .topbar, .header {
        flex-direction: column; /* Üst barları dikey yap */
        text-align: center;
    }

    .post {
        width: 100%; /* Postları tam genişlikte yap */
        margin-bottom: 20px;
    }

    img {
        max-width: 100%; /* Resimleri ekran genişliğine sığdır */
        height: auto;
    }

    button {
        width: 100%; /* Butonları genişlet */
        padding: 12px;
        font-size: 16px;
    }
}
@media screen and (max-width: 768px) {
    .topbar {
        font-size: 12px; /* Yazıları küçült */
        padding: 5px; /* Boşlukları daralt */

    }


    h3 {
        display: none;
    }

    .topbar a {
        padding: 5px 8px; /* Linkler arası mesafeyi azalt */
    }
}

/* Tabletler için (Ekran genişliği 1024px ve altı) */
@media screen and (max-width: 1024px) {
    .container {
        width: 90%; /* İçeriği biraz daha daralt */
    }

    .sidebar {
        width: 200px; /* Yan menüyü biraz küçült */
    }

    .post {
        width: 80%; /* Post genişliğini ayarla */
    }
}