body { font-family: 'Arial', sans-serif; max-width: 900px; margin: 40px auto; background: #f4f4f4; color: #333; }
h1 { text-align: center; color: #222; }
.container { display: flex; flex-direction: column; gap: 20px; }
.card {
    background: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
    margin-top: 20px;
}
.card:hover { transform: translateY(-5px); }
.endpoint { font-size: 24px; font-weight: bold; color: #007BFF; }
.description { margin: 10px 0; padding-bottom: 40px; font-size: 14px; color: #555; }
pre {
    background: #272822;
    color: #f8f8f2;
    padding: 12px;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 14px;
}
.section-title { font-weight: bold; margin-top: 10px; color: #444; font-size: 26px; }
.section-note { font-weight: bold; margin-top:5px; font-size: 18px; color: #555; }
.content-type { background: #007BFF; color: white; padding: 5px 10px; border-radius: 5px; display: inline-block; font-size: 14px; }
.json {
    background-color: #f4f4f4;
    padding-bottom: 10px;
    border-radius: 8px;
    font-family: 'Arita Dotum', sans-serif;
}
.json-key {
    color: #49e360;
    font-weight: bold;
    font-size: 16px;
    font-family: 'Arita Dotum', sans-serif;
}
.json-value {
    color: #54e7c0;
    font-size: 16px;
    font-family: 'Arita Dotum', sans-serif;
}
.json-string {
    color: #e83e8c;
    font-size: 16px;
    font-family: 'Arita Dotum', sans-serif;
}
.json-comment {
    color: #999999;
    font-style: italic;
    font-size: 16px;
    font-family: 'Arita Dotum', sans-serif;
}
.key {
    color: #ABDFF1;
    font-weight: bold;
}
.value {
    color: #E1DDDB;
}

/* add this style */
.button-container {
    
    text-align: center;
    margin-bottom: 20px;

}
/* .content-type { background: #007BFF; color: white; padding: 5px 10px; border-radius: 5px; display: inline-block; font-size: 14px; } */

.tab-button {
    background-color: rgb(82, 75, 82);
    /* border: black; */
    color: rgb(229, 198, 144);
    /* border: none; */
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
    font-size: 16px;
    padding: 20px 20px; 
    border-radius: 10px;
    font-weight: bold;
}

.tab-button.active {
    /* background-color: black; */
    background-color: rgb(16, 14, 16);
}

.api-section {
    display: none;
}

.api-section:first-of-type {
    display: block;
}