body {
font-family: sans-serif;
font-size: 16px;
}

h1 {
font-size: 24px;
}

h2 {
font-size: 20px;
}

p {
line-height: 1.5;
}

a {
color: #000;
text-decoration: none;
}

header {
background-color: #fff;
padding: 20px;
}

main {
padding: 20px;
}

section {
margin-bottom: 20px;
}

footer {
background-color: #ccc;
padding: 20px;
}

#table-of-contents ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#table-of-contents li {
    margin-bottom: 8px;
}

#table-of-contents a {
    text-decoration: none;
    display: block;
    padding: 15px;
    border: 2px solid #3498db; /* Ana renk */
    border-radius: 10px;
    color: #333;
    font-weight: bold;
    background-color: #ecf0f1; /* Arkaplan rengi */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease; /* Geçiş efektleri */
    font-size: 14px; /* Adjust the font size */
}

#table-of-contents a:hover {
    background-color: #3498db; /* Hover durumunda arkaplan rengi */
    color: #fff; /* Hover durumunda yazı rengi */
}

#table-of-contents ul ul {
    margin-top: 8px;
    margin-bottom: 5px;
}

#table-of-contents ul ul li {
    margin-left: 20px;
}

#table-of-contents ul ul li a {
    display: block;
    padding: 12px;
    border: 2px solid #95a5a6; /* İkinci düzey sınır rengi */
    border-radius: 8px;
    color: #34495e; /* İkinci düzey yazı rengi */
    font-weight: normal;
    background-color: #ecf0f1; /* İkinci düzey arkaplan rengi */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease; /* Geçiş efektleri */
    font-size: 12px; /* Adjust the font size */
}

#table-of-contents ul ul li a:hover {
    background-color: #95a5a6; /* Hover durumunda ikinci düzey arkaplan rengi */
    color: #fff; /* Hover durumunda ikinci düzey yazı rengi */
}


@media (max-width: 768px) {
body {
font-size: 14px;
}

h1 {
font-size: 22px;
}

h2 {
font-size: 18px;
}

p {
line-height: 1.4;
}

section {
margin-bottom: 16px;
}
}