/* تعريف متغيرات الألوان */
:root{
    --bg:#102F38; --surface:#0E2D36; --text:#fdd21a; --muted:#A7B6BC; --shadow:#07364299;
    --primary:#2AA6E3; --primary-700:#0E5A8A; --primary-200:#ccf;
    --accent-orange:#F39A1E; --accent-orange-700:#C96A0A; --accent-yellow:#ffffcd;
    --accent-green:#cdffcc; --accent-green-700:#2F7A3A;
    --accent-red:#F0642F; --accent-red-700:#A93E1E;
}
/* تغيير لون زر btn-primary */
.btn-primary {
    background-color: #0093b2 !important;
    border-color: #0093b2 !important;
}
/* تغيير لون زر btn-success */
.btn-success {
    background-color: #ed7718 !important;
    border-color: #ed7718 !important;
}
/* تغيير لون كتابة الـ navbar */
.navbar .navbar-nav .nav-link,
.navbar .navbar-brand {
    color: #fdd21a !important;
}
body{
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
}
    .navbar {
        background-color: var(--surface);
        box-shadow: 0 2px 5px var(--shadow);
        transition: background-color 0.3s ease;
    }


.card {
    background: var(--surface);
    color: var(--text);
    border-radius: 8px;
    box-shadow: 0 2px 5px var(--shadow);
    padding: 20px;
    margin-bottom: 20px;

.card-container {
  justify-content: center;
  align-items: center;
  
}

@media (max-width: 600px) {
  .card-container {
    min-height: 100vh;
    padding: 10px;
  }
}


}
.footer-text {
    text-align: center;
    color: var(--text);
    font-size: 14px;
    background-color: var(--surface);
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 -2px 5px var(--shadow);
    transition: background-color 0.3s ease;
}

.rtl-form {
    direction: rtl;
    text-align: right;
}

/* تكبير الممرر في جميع الصفحة */
::-webkit-scrollbar {
    width: 30px; /* عرض الممرر العمودي */
    height: 30px; /* عرض الممرر الأفقي */
}

::-webkit-scrollbar-thumb {
    
    border-radius: 8px;
}

::-webkit-scrollbar-track {
    background: #e0e0e0; /* لون خلفية الممرر */
}

/* لمتصفحات فايرفوكس */
html {
    scrollbar-width: thick;
 
}

/* ...existing code... */

/* تنسيقات الذكريات فقط */
.memories-list {
    overflow: hidden;
    padding: 3em;
}

.memories-list li {
    text-decoration: none;
    color: var(--surface);
    background: #f5df8a;
    display: block;
    height: 16em;
    width: 16em;
    margin: 1em;
    float: left;
    padding: 1em;
    box-shadow: 5px 5px 7px var(--shadow);
    transition: transform .15s linear;
}

.memories-list li {
    transform: rotate(-6deg);
}

.memories-list li:nth-child(even) {
    transform: rotate(4deg);
    position: relative;
    top: 5px;
    background: #edbab9;
}

.memories-list li:nth-child(3n) {
    transform: rotate(-3deg);
    position: relative;
    top: -5px;
    background: #afcfda;
}

.memories-list li:nth-child(5n) {
    transform: rotate(5deg);
    position: relative;
    top: -10px;
}

.memories-list li:hover, .memories-list li:focus {
    box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);
    transform: scale(1.25);
    position: relative;
    z-index: 5;
}

/* ...existing code... */