@import "globals.css";

html, body {
    background-color: rgba(214,214,214,1);
}

.header {
    width: 100%;
    height: 200px;
    background-color: rgba(169,169,169,1);
    font-size: 21px;
    color: rgb(255, 255, 255);
    display: flex;
    justify-content: center;
    align-items: center;
}

.doc-contents {
    margin-top: 40px;
    margin-bottom: 40px;
}

.doc-contents .container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.doc-contents p {
    font-size: 11px;
    color: black;
    font-weight: 500;
    line-height: 22px;
}

.doc-contents h2, h3, h6 {
    font-size: 12px;
    font-weight: 600;
}

.doc-contents ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    counter-reset: custom-counter;
}

.doc-contents ul li {
    font-size: 11px;
    color: black;
    font-weight: 500;
    line-height: 22px;
    position: relative;
    padding-left: 2rem;
}

.doc-contents ul li::before {
    content: "●";
    position: absolute;
    top: 0;
    left: 0;
    font-size: 12px;
}

.doc-contents ul.enumerated li::before {
    content: counter(custom-counter) ". ";
}

.doc-contents ul.enumerated li {
    counter-increment: custom-counter;
}

.doc-contents ul.enumerated li ul {
    counter-reset: nested-counter;
    display: block;
}

.doc-contents ul.enumerated li ul li {
    counter-increment: nested-counter;
    position: relative;
    padding-left: 2.5rem; 
}

.doc-contents ul.enumerated li ul li::before {
    content: counter(custom-counter) "." counter(nested-counter) " ";
    position: absolute;
    top: 0;
    left: 10px;
    font-size: 12px;
}