/* ========================================
   PAGE TITLES AND FORMATS 
======================================== */

body {background: #F0F0F0;
      color: #3a3d42;
      font-family: sans-serif;
      margin: 20px;
      --fontSize: 16px;}

@media (max-width: 600px) {body {--fontSize: 10px;}}

.page-title {text-align: center;
    font-size: 6rem;
    font-family: "Segoe UI", Arial, sans-serif;
    font-weight: 700;
    margin: 15px auto;
    color: #3a3d42;
    margin-top: 50px;}

.page-sub-title {text-align: center;
    font-size: 2rem;
    font-family: "Segoe UI", Arial, sans-serif;
    font-weight: 700;
    color: #3a3d42;
    margin-top: 10px;}

.heading-title {text-align: left;
    font-size: 4rem;
    font-family: "Segoe UI", Arial, sans-serif;
    font-weight: 700;
    color: #3a3d42;
    margin-left: 50px;}
    
.cards-title {text-align: left;
    font-size: 2rem;
    font-family: "Segoe UI", Arial, sans-serif;
    font-weight: 700;
    color: #F0F0F0;}
    
.paragraph-text {text-align: left;
    font-size: 2rem;
    font-family: "Segoe UI", Arial, sans-serif;
    font-weight: 700;
    color: #3a3d42;
    margin-left: 50px;}

.dark .page-title {color: #F0F0F0}

.dark .page-sub-title {color: #F0F0F0}

.dark .heading-title {color: #F0F0F0}

.dark .paragraph-text {color: #F0F0F0}

.section-divider {border: none;
                  height: 4px;
                  width: 60%;
                  margin: 30px auto;
                  background: linear-gradient(to right,transparent,#3a3d42,transparent);}

.dark .section-divider {background: linear-gradient(to right,transparent,#F0F0F0,transparent);}

/* ========================================
   BUTTON
======================================== */

.button {font-size: var(--fontSize);
        margin: 5px;
        background: #3a3d42;
        font-family: "Segoe UI", Arial, sans-serif;
        color: white;
        text-decoration: none;
        display: inline-block;
        border-radius: 20px;
        border: 1px solid #6a6d72;
        padding: 10px 20px;
        transition: transform 0.2s ease;
        cursor: pointer;}

.button:hover {background: #4a4d52;transform: translateY(-5px) scale(1.02);}

/* ========================================
   BUTTON CONTAINER
======================================== */

.buttons {text-align: center;width: 100%;}

/* ========================================
   DARK MODE BUTTON
======================================== */

#darkModeBtn {position: fixed;
              top: 20px;
              right: 20px;
              padding: 10px 20px;
              background: #3a3d42;
              font-family: "Segoe UI", Arial, sans-serif;
              color: white;
              border: 1px solid #6a6d72;
              border-radius: 20px;
              transition: transform 0.2s ease;
              cursor: pointer;}

#darkModeBtn:hover {background: #4a4d52;transform: translateY(-5px) scale(1.02);}


/* ========================================
   DARK MODE STYLES
======================================== */

.dark {background: #1C1C1C;color: white;}

/* ========================================
   CARD STYLES
======================================== */

.cards {border-radius: 12px;
        background-color: #3a3d42;
        color: #F0F0F0;
        border: 1px solid #6a6d72;
        padding: 20px;
        margin: 10px auto;
        min-width: 250px;
        max-width: 400px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        transition: transform 0.2s ease;}

.cards:hover {background-color: #4a4d52;transform: translateY(-5px) scale(1.02);}

.cards li {text-align: left; display: flex; justify-content: space-between;font-family: "Segoe UI", Arial, sans-serif;}

.cards ul {padding: 3px 0;padding-left: 0;list-style: none;width: 100%;}

/* ========================================
   CARD CONTAINER
======================================== */

.card-container {display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 20px;
                min-width: 300px;
                max-width: 1300px;
                margin: 0 auto;}
                
/* ========================================
   PROGRESS BAR
======================================== */               

.progress-bar {margin: 10px auto;
              width: 100%;
              width: 1200px;
              height: 20px;
              background-color: #dcdcdc;
              border-radius: 10px;
              overflow: hidden;}

.progress-fill {width: 0%;
                height: 100%;
                background-color: #7BCB8A;
                border-radius: 10px;
                transition: width 0.5s ease;}

.progress-labels {display: flex;
                  justify-content: space-between;
                  font-size: 2rem;
                  font-family: "Segoe UI", Arial, sans-serif;
                  font-weight: 700;
                  color: #3a3d42;
                  margin-bottom: 5px;}

.dark .progress-bar {background-color: #2a2d32;}

.dark .progress-labels {color: #F0F0F0}