body {
    background-color: #121212;
}

h1 {
    color: #ffffff;
    margin: 36px auto;
    cursor: default;
}

h2 {
    font-size: larger;
    font-weight: bold;
    color: #ffffff;
    padding: 0 16px;
    margin-top: 24px;
}

h3 {
    font-size: medium;
    font-weight: bold;
    color: #ffffff;
    padding: 0 16px;
}

p {
    color: #DDDDDD;
}

.text {
    padding: 0 16px;
}

.btn {
    background-color: #36FF36;
    margin-bottom: 12px;
}

.btn:hover {
    background-color: #00CB00;
}

.sort-btn {
    margin-top: 24px;
}

.custom-component {
    width: 90%;
    height: 40px;
}

.errorlist {
    color: #FF9136;
}

.icon {
    padding: 0 32px 24px 16px;
}

.icon-twitter {
    color: #121212;
    margin-right: 16px;
}

.icon-peing {
    color: #121212;
    margin-right: 16px;
}

.postID {
    color: #36FF36;
}

.postText {
    color: #ffffff;
    font-size: larger;
    margin: 8px 0;
}

.postDate {
    color: #ffffff;
    font-size: larger;
}

.title {
    color: #ffffff;
    font-size: larger;
}

.url {
    color: #ffffff;
    word-wrap: break-word;
}

hr {
    color: #DDDDDD;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0 16px;
}

.container {
    display: flex;
    margin-bottom: 12px;
}

.left-container {
    width: 80%
}

.right-container {
    width: 20%
}

.btn-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 16px;
}

.sort-btn-container {
    display: flex;
    justify-content: right;
    align-items: center;
    padding-right: 16px;
}

.history-btn-container {
    display: flex;
    gap: 16px;
    padding: 0px 16px;
}

.btn-history {
    margin-bottom: 12px;
}