@font-face {
    font-family: PixelMplus12;
    src: url(../data/fonts/PixelMplus12-Regular.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
}
body {
    background-color: rgb(246, 240, 218);
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Ctext x='10' y='100' font-size='26' fill='rgba(0,0,0,0.1)' transform='rotate(-30 10,100)'%3EHello world%3C/text%3E%3C/svg%3E");
    background-repeat: repeat;
    animation: flow 10s linear infinite;
    padding: 20px;
    font-family: "PixelMplus12", serif;
    line-height: 1.6;
}
.motto {
    font-size: xx-large;
}
body.about-bg {
    background-color: rgb(246, 240, 218) !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Ctext x='10' y='100' font-size='26' fill='rgba(0,0,0,0.1)' transform='rotate(-30 10,100)'%3EAbout%3C/text%3E%3C/svg%3E") !important;
    background-repeat: repeat;
    animation: flow 10s linear infinite !important;
    padding: 20px !important;
    font-family: "PixelMplus12", serif !important;
    line-height: 1.6 !important;
}
.about {
    font-size: 30px;
}
.github-url {
    font-size: 20px;
}
body.Help-bg {
    background-color: rgb(217, 143, 142) !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Ctext x='10' y='100' font-size='26' fill='rgba(0,0,0,0.1)' transform='rotate(-30 10,100)'%3EHelp%3C/text%3E%3C/svg%3E") !important;
    background-repeat: repeat;
    animation: flow 10s linear infinite !important;
    padding: 20px !important;
    font-family: "PixelMplus12", serif !important;
    line-height: 1.6 !important;
}
body.News-bg {
    background-color: rgb(210, 206, 124) !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Ctext x='10' y='100' font-size='26' fill='rgba(0,0,0,0.1)' transform='rotate(-30 10,100)'%3ENews%3C/text%3E%3C/svg%3E") !important;
    background-repeat: repeat;
    animation: flow 10s linear infinite !important;
    padding: 20px !important;
    font-family: "PixelMplus12", serif !important;
    line-height: 1.6 !important;
}
body.download-bg {
    background-color: rgb(148, 148, 255) !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Ctext x='10' y='100' font-size='26' fill='rgba(0,0,0,0.1)' transform='rotate(-30 10,100)'%3EDowloads%3C/text%3E%3C/svg%3E") !important;
    background-repeat: repeat !important;
    animation: flow 10s linear infinite !important;
    padding: 20px !important;
    font-family: "PixelMplus12", serif !important;
    line-height: 1.6 !important;
}

h1 {
    color: rgb(38, 237, 65);
    border-bottom: 2px solid #ffd700;
}
.Last-Update {
    position: fixed;
    bottom: 10px;
    right: 10px;
    font-family: PixelMplus12;
    font-size: small;
    color: black;
    display: inline-block;
    animation: last-update 1s infinite;
}
a {
    color: rgb(9, 25, 249);
    text-decoration: none;
}
a:hover {
    color: #f3b123;
    text-decoration: underline;
}
.wrapper {
    display: flex;
    max-width: 1000px;
    margin: 20px auto;
    gap: 20px;
}
.sidebar {
    flex: 1;
    min-width: 200px;
    border: 1px solid #ccc;
    padding: 15px;
    text-align: center;
    background: rgba(255, 255, 255, 0.7)
}
.main-content {
    flex: 3;
    background: #fff;
    border: 1px solid #ccc;
    padding: 20px;
}
.news-list {
    list-style: none;
    padding: 0;
}
.article {
    background-color: rgba(255, 255, 255, 0.8);
    color: black;
    border: 2px solid #ffd700;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 5px 5px 0px #888;
    margin-bottom: 20px
}
.News {
    background-color: rgb(43, 250, 95);
    opacity: 0.7;
    color: rgb(255, 255, 255);
    font-size: xx-large;
    display: inline-block;
    animation: just-rotate 3s infinite linear;
}
.detail-body {
    background: #fff;
    padding: 30px;
    line-height: 1.8;
}
.detail-body h2 {
    color: #003399;
    border-left: 5px solid #ffd700;
    padding-left: 10px;
}
@keyframes last-update {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes flow {
    from { background-position: 0 0;}
    to { background-position: 200px 200px;}
}
@keyframes just-rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}