hexo-theme-particlex 1.0.0

package/source/css/particlex.css

@@ -0,0 +1,1215 @@
+@keyframes into {
+    0% {
+        opacity: 0;
+        transform: scale(1.1);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+@keyframes loading {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+@keyframes loop1 {
+    0% {
+        transform: rotate(30deg);
+    }
+    100% {
+        transform: rotate(390deg);
+    }
+}
+@keyframes loop2 {
+    0% {
+        transform: rotate(60deg);
+    }
+    100% {
+        transform: rotate(420deg);
+    }
+}
+@keyframes loop3 {
+    0% {
+        transform: rotate(90deg);
+    }
+    100% {
+        transform: rotate(450deg);
+    }
+}
+@keyframes loop4 {
+    0% {
+        transform: rotate(120deg);
+    }
+    100% {
+        transform: rotate(480deg);
+    }
+}
+body {
+    width: 100%;
+    background: #f6f8fa;
+    color: #000000d9;
+    font-family: "Lexend", "Noto Sans SC", sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    overflow-x: hidden;
+}
+* {
+    margin: 0;
+    padding: 0;
+    word-wrap: break-word;
+    scrollbar-width: thin;
+    scrollbar-color: #8ab5ff #e6efff;
+}
+ul {
+    margin-top: 15px !important;
+    margin-bottom: 10px !important;
+    line-height: 1.7;
+}
+ul li {
+    margin: 8px auto;
+}
+ol {
+    margin-top: 15px !important;
+    margin-bottom: 10px !important;
+    line-height: 1.7;
+}
+ol li {
+    margin: 8px auto;
+}
+h1 {
+    margin: 15px 0;
+    font-weight: bold;
+    font-family: "Lexend", "Noto Sans SC", sans-serif;
+    color: #1e3e3f;
+    font-size: 30px;
+}
+h2 {
+    margin: 15px 0;
+    font-weight: bold;
+    font-family: "Lexend", "Noto Sans SC", sans-serif;
+    color: #1e3e3f;
+    font-size: 27px;
+}
+h3 {
+    margin: 15px 0;
+    font-weight: bold;
+    font-family: "Lexend", "Noto Sans SC", sans-serif;
+    color: #1e3e3f;
+    font-size: 24px;
+}
+h4 {
+    margin: 15px 0;
+    font-weight: bold;
+    font-family: "Lexend", "Noto Sans SC", sans-serif;
+    color: #1e3e3f;
+    font-size: 21px;
+}
+h5 {
+    margin: 15px 0;
+    font-weight: bold;
+    font-family: "Lexend", "Noto Sans SC", sans-serif;
+    color: #1e3e3f;
+    font-size: 18px;
+}
+p {
+    margin: 15px 0;
+    line-height: 1.7;
+}
+a {
+    text-decoration: none;
+}
+a:hover {
+    opacity: 0.8;
+}
+img {
+    border-radius: 10px;
+}
+hr {
+    border-style: dashed;
+    border-width: 2px;
+    border-left: none;
+    border-right: none;
+    border-bottom: none;
+}
+blockquote {
+    padding: 0.1px 15px;
+    margin: 15px 0;
+    border-radius: 3px;
+    border-left: 3px solid #1e3e3f;
+    background: #d9e8ff6b;
+}
+button,
+img,
+iframe,
+#home-head,
+#menu,
+.math,
+.go-post,
+.page-current,
+.categories-tags span a,
+.friend-link a,
+pre .language,
+pre .copycode {
+    user-select: none;
+}
+#home-posts-wrap,
+#archives,
+.article,
+footer .footer-wrap {
+    box-sizing: border-box;
+}
+.fa-icon {
+    width: 1em;
+    height: 1em;
+    vertical-align: -0.125em;
+}
+.icon {
+    margin-right: 5px;
+    color: #5c6b72;
+}
+.into-enter-active {
+    animation: into 0.6s;
+}
+.into-leave-active {
+    animation: into 0.6s;
+}
+.slide-enter-active,
+.slide-leave-active {
+    transition: margin-top 0.3s, opacity 0.3s;
+}
+.slide-enter-from,
+.slide-leave-to {
+    margin-top: -300px;
+    opacity: 0;
+}
+#home-head {
+    width: 100vw;
+    height: 100vh;
+    position: relative;
+    display: flex;
+}
+#home-head .home-info {
+    position: relative;
+    margin: auto;
+}
+#home-head .home-info .info {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    color: #333;
+    border-radius: 50%;
+}
+#home-head .home-info .info h1 {
+    word-break: keep-all;
+}
+#home-head .home-info .loop:nth-child(1) {
+    border-radius: 38% 62% 63% 37%/41% 44% 56% 59%;
+    background: #fff;
+    opacity: 0.3;
+    transform: rotate(30deg);
+    animation: loop1 10s linear infinite;
+}
+#home-head .home-info .loop:nth-child(2) {
+    border-radius: 38% 62% 63% 37%/41% 44% 56% 59%;
+    background: #fff;
+    opacity: 0.45;
+    transform: rotate(60deg);
+    animation: loop2 15s linear infinite;
+}
+#home-head .home-info .loop:nth-child(3) {
+    border-radius: 38% 62% 63% 37%/41% 44% 56% 59%;
+    opacity: 0.3;
+    background: #fff;
+    transform: rotate(90deg);
+    animation: loop3 10s linear infinite;
+}
+#home-head .home-info .loop:nth-child(4) {
+    border-radius: 38% 62% 63% 37%/41% 44% 56% 59%;
+    opacity: 0.45;
+    background: #fff;
+    transform: rotate(120deg);
+    animation: loop4 15s linear infinite;
+}
+#home-background {
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+#home-posts-wrap {
+    position: relative;
+    display: flex;
+    margin: auto;
+    padding: 20px;
+    background: transparent;
+    border-radius: 10px;
+}
+#home-posts {
+    position: relative;
+    margin: auto;
+}
+#home-posts .post-title {
+    text-align: center;
+    color: #66afef;
+    text-decoration: none;
+}
+#home-posts .post {
+    position: relative;
+    border-radius: 20px;
+    background: #fff;
+    box-shadow: 0 0 20px #d9d9d980;
+    transition: all 0.25s;
+}
+#home-posts .post:hover {
+    box-shadow: 0 0 5px #d9d9d9;
+    transform: translate(-5px, -5px);
+}
+#home-posts .post a {
+    text-decoration: none;
+}
+#home-posts .post .category-and-date {
+    width: 100%;
+    margin-top: 15px;
+    color: #5c6b72;
+    text-align: center;
+}
+#home-posts .post .category-and-date .category {
+    display: inline-block;
+    margin-right: 25px;
+}
+#home-posts .post .category-and-date .category a {
+    color: #5c6b72;
+}
+#home-posts .post .category-and-date .date {
+    display: inline-block;
+}
+#home-posts .post .excerpt {
+    color: #1e3e3f;
+}
+#home-posts .post .post-tags a {
+    color: #ffbbf4;
+    font-size: 14px;
+}
+#home-posts .post .post-tags .tag {
+    display: inline-block;
+    margin-right: 10px;
+    font-weight: bold;
+}
+#home-posts .post .go-post {
+    background: linear-gradient(120deg, #9abbf7 0%, #ffbbf4 100%);
+    border: 0;
+    padding: 10px 24px;
+    color: #fff;
+    font-weight: bold;
+    border-radius: 20px 0;
+    font-size: 14px;
+    position: absolute;
+    bottom: -5px;
+    right: -5px;
+    transition: all 0.25s ease-out;
+    box-shadow: 2px 2px 10px 0 #ffbbf47a;
+}
+#home-posts .post .go-post:hover {
+    right: -7px;
+    box-shadow: -2px -2px 10px 0 #9abbf77a;
+}
+#home-posts .page-current {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    color: #999;
+    margin-top: 50px;
+}
+#home-posts .page-current .prev {
+    width: 50px;
+    text-align: center;
+}
+#home-posts .page-current .next {
+    width: 50px;
+    text-align: center;
+}
+#home-posts .page-current .page-index {
+    width: 300px;
+    text-align: center;
+    font-weight: bold;
+}
+#home-posts .page-current .current {
+    color: #da0a51;
+    display: inline-block;
+    width: 35px;
+    height: 35px;
+    border-radius: 5px;
+    line-height: 35px;
+    padding: 5px;
+    margin: 0 7px;
+}
+#home-posts .page-current a {
+    color: #999;
+    text-decoration: none;
+}
+#home-posts .page-current .page-num {
+    display: inline-block;
+    width: 35px;
+    height: 35px;
+    border-radius: 5px;
+    line-height: 35px;
+    padding: 5px;
+    margin: 0 7px;
+}
+#home-posts .page-current .page-num:hover {
+    background: #92cafa;
+    color: #fff;
+}
+#home-posts .page-current .page-omit {
+    display: inline-block;
+    width: 35px;
+    height: 35px;
+    border-radius: 5px;
+    line-height: 35px;
+    padding: 5px;
+    margin: 0 7px;
+}
+#home-card {
+    position: relative;
+    width: 300px;
+}
+#card-div {
+    position: sticky;
+    top: 80px;
+}
+#home-card .card-style {
+    padding: 25px 0;
+    background: #fff;
+    border-radius: 10px;
+    text-align: center;
+    border: none;
+    box-shadow: 0 0 20px #d9d9d980;
+}
+#home-card .card-style .avatar {
+    text-align: center;
+    margin: auto;
+    width: 140px;
+    height: 140px;
+    border-radius: 50%;
+    border: #f1f1f1 solid 3px;
+    transition: all 0.25s;
+}
+#home-card .card-style .avatar:hover img {
+    transform: rotate(360deg);
+}
+#home-card .card-style .avatar img {
+    border-radius: 50%;
+    width: 100%;
+    height: 100%;
+}
+#home-card .card-style .name {
+    margin: 20px auto;
+    font-size: 16px;
+    font-weight: bold;
+    color: #1e3e3f;
+    text-transform: uppercase;
+}
+#home-card .card-style .descriptions {
+    margin: 20px auto;
+    width: 85%;
+}
+#home-card .card-style .icon-links {
+    width: 85%;
+    margin: 10px auto;
+    padding: 8px 15px;
+    border-top: #cdcdcd solid 1px;
+    border-bottom: #cdcdcd solid 1px;
+}
+#home-card .card-style .icon-links a {
+    color: #5c6b72;
+    font-size: 18px;
+    padding: 3px 5px;
+    border-radius: 5px;
+}
+#home-card .card-style .icon-links a:hover {
+    color: #fff;
+    background: #66afef;
+}
+#home-card .card-style .icon-links .icon-link {
+    margin: 5px;
+}
+#home-card .card-style .friend-links {
+    margin: 20px auto;
+}
+#home-card .card-style .friend-links .friend-link {
+    margin: 5px auto;
+    text-align: center;
+}
+#home-card .card-style .friend-links .friend-link a {
+    display: inline-block;
+    width: 140px;
+    line-height: 3;
+    color: #5c6b72;
+    font-size: 16px;
+    border-radius: 15px;
+    background-blend-mode: darken;
+}
+#home-card .card-style .friend-links .friend-link a:hover {
+    color: #fff;
+    background: #66afef;
+}
+#menu {
+    z-index: 10005;
+    position: fixed;
+    width: 100%;
+    line-height: 50px;
+    font-weight: bold;
+    transition: all 0.25s ease-out;
+    box-shadow: 0 -1px 10px 0 #9e9e9e4d;
+    top: 0;
+    background: #92cafa;
+}
+#menu .desktop-menu {
+    height: 50px;
+}
+#menu .desktop-menu .title {
+    display: inline-block;
+    margin-left: 30px;
+    margin-right: 20px;
+    font-family: "Lexend", "Noto Sans SC", sans-serif;
+    text-transform: uppercase;
+    color: #555;
+}
+#menu .desktop-menu a {
+    display: inline-block;
+    margin-left: 30px;
+    text-decoration: none;
+    color: #555;
+}
+#menu .desktop-menu a span {
+    display: inline-block;
+    position: relative;
+}
+#menu .desktop-menu a span img {
+    position: relative;
+    top: 3px;
+    width: 20px;
+    height: 20px;
+}
+#menu .desktop-menu a span:nth-child(1) {
+    margin-right: 5px;
+}
+#menu .phone-menu {
+    min-height: 50px;
+    text-align: center;
+}
+#menu .phone-menu .title {
+    z-index: 10004;
+    cursor: pointer;
+    color: #555;
+}
+#menu .phone-menu .items {
+    padding: 10px 0 20px;
+    z-index: 10003;
+}
+#menu .phone-menu .items a {
+    color: #555;
+}
+#menu .phone-menu .items .item {
+    min-width: 200px;
+    width: 80%;
+    margin: auto;
+    display: flex;
+    justify-content: center;
+}
+#menu .phone-menu .curtain {
+    position: fixed;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+.hidden-menu {
+    top: -70px !important;
+}
+.menu-color {
+    background: #00000033 !important;
+    box-shadow: 0 -1px 10px 0 #ffffff00 !important;
+}
+.menu-color .title {
+    color: #fff !important;
+}
+.menu-color a {
+    color: #fff !important;
+}
+.content {
+    transition: all 0.5s;
+}
+.content code {
+    font-family: "Fira Code", "Noto Sans SC", monospace;
+    background: #bddcf76b;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 14px;
+    color: #4b616b;
+}
+.content pre {
+    box-shadow: 0 2px 12px 0 #0000001a;
+    border: 1px solid #ebeef5;
+    margin: 25px 0;
+    border-radius: 15px;
+    position: relative;
+}
+.content .code-content {
+    overflow: auto;
+    padding: 50px 30px 20px;
+}
+.content pre code {
+    background: none;
+    padding: 0;
+}
+.content h1 {
+    text-align: left !important;
+    margin: 18px 0;
+}
+.content h2 {
+    text-align: left !important;
+    margin: 18px 0;
+}
+.content h3 {
+    text-align: left !important;
+    margin: 18px 0;
+}
+.content h4 {
+    text-align: left !important;
+    margin: 18px 0;
+}
+.content h5 {
+    text-align: left !important;
+    margin: 18px 0;
+}
+.content a {
+    color: #66afef;
+    text-decoration: none;
+}
+.content b {
+    line-height: 2.5;
+    font-weight: bold;
+}
+.content strong {
+    line-height: 2.5;
+    font-weight: bold;
+}
+.content img {
+    display: block;
+    max-width: 70%;
+    margin: 0 auto;
+}
+.content table tr th {
+    padding: 8px 20px;
+    color: #1e3e3f;
+}
+.content table tr th:nth-child(2n) {
+    background: #a3ddfb;
+}
+.content table tr th:nth-child(2n-1) {
+    background: #a3ddfb;
+}
+.content table tr td {
+    padding: 8px 20px;
+}
+.content table tr td:nth-child(2n) {
+    background: #c7e0fb4d;
+}
+.content table tr td:nth-child(2n-1) {
+    background: #d9e8ff4d;
+}
+.content table tbody tr {
+    border-top: 2px solid #fff;
+}
+.content .markdownIt-Anchor {
+    display: none;
+}
+.content .language {
+    font-family: "Fira Code", "Noto Sans SC", monospace;
+    position: absolute;
+    top: 0;
+    left: 30px;
+    padding: 10px 15px;
+    background: linear-gradient(to right, #ed6ea0 0, #ec8c69 100%);
+    box-shadow: 1px 1px 0.75rem #ed6ea14d;
+    color: #fff;
+    font-weight: bold;
+    font-size: 12px;
+    border-radius: 0 0 10px 10px;
+}
+.content .copycode {
+    position: absolute;
+    top: 0;
+    right: 0;
+    color: #5c6b72;
+}
+.content .copycode:hover {
+    opacity: 0.8;
+}
+.content .copycode svg {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 15px;
+    transition: transform 0.25s;
+}
+.content .copycode.copied svg:first-child {
+    opacity: 0;
+}
+.content .copycode:not(.copied) svg:last-child {
+    opacity: 0;
+}
+.content .copycode.copied svg {
+    transform: scale(1.25);
+}
+.content .hljs {
+    font-family: "Fira Code", "Noto Sans SC", monospace;
+    background: none;
+    line-height: 2;
+    font-size: 13px;
+}
+.content .hljs .hljs-built_in {
+    color: #42a4d6;
+}
+.content .hljs .hljs-keyword {
+    color: #e24279;
+}
+.content .hljs .hljs-literal {
+    color: #ff9800;
+}
+.content .hljs .hljs-number {
+    color: #ff9800;
+}
+.content .hljs .hljs-doctag {
+    color: #009688;
+}
+.content .hljs .hljs-string {
+    color: #009688;
+}
+.content .hljs .hljs-comment {
+    color: #9e9e9e;
+}
+.content .hljs .hljs-quote {
+    color: #9e9e9e;
+}
+.content .hljs .hljs-attribute {
+    color: #f00;
+}
+.content .hljs .hljs-name {
+    color: #f00;
+}
+.content .hljs .hljs-attr {
+    color: #525252;
+}
+.content .hljs .hljs-class {
+    color: #3f51b5;
+}
+.content .hljs .hljs-title {
+    color: #3f51b5;
+}
+.content .hljs .hljs-type {
+    color: #3f51b5;
+}
+.content .hljs .hljs-params {
+    color: #458;
+}
+.content .hljs .hljs-variable {
+    color: #458;
+}
+#main {
+    margin-right: calc(100% - 100vw);
+}
+footer {
+    position: relative;
+    font-size: 14px;
+    width: 100%;
+    text-align: center;
+    top: 150px;
+    padding-bottom: 20px;
+}
+footer .footer-wrap {
+    border-top: 1px solid #aaa;
+    width: 900px;
+    margin: auto;
+    color: #5c6b72;
+}
+footer .footer-wrap div {
+    margin: 15px;
+}
+footer .footer-wrap a {
+    text-decoration: none;
+    color: #66afef;
+}
+footer .footer-icon {
+    display: inline-block;
+    margin: 0 10px;
+    color: #66afef;
+    font-size: 18px;
+}
+#archives {
+    position: relative;
+    top: 100px;
+    margin: auto;
+    padding: 20px;
+}
+#archives a {
+    color: #5c6b72;
+    text-decoration: none;
+}
+#archives .tag-icon {
+    color: #5c6b72;
+    text-decoration: none;
+}
+#archives .category {
+    margin-right: 20px;
+}
+#archives .tags .tag {
+    margin-right: 10px;
+}
+#archives h3 {
+    margin: 10px 0;
+}
+#archives .item-time {
+    color: #5c6b72;
+}
+#archives .categories-tags {
+    text-align: center;
+    max-width: 900px;
+    width: 100%;
+    margin: auto;
+    margin-bottom: 50px;
+}
+#archives .categories-tags span {
+    display: inline-block;
+    margin: 10px;
+}
+#archives .categories-tags span a {
+    padding: 10px 15px;
+    color: #fff;
+    text-decoration: none;
+    border-radius: 10px;
+    transition: all 0.25s;
+    border: #ffffff80 1px solid;
+}
+#archives .categories-tags span a:hover {
+    border: #a5c2f5 1px solid;
+    background: #fff !important;
+    color: #5c6b72;
+}
+#archives .categories-tags span a:hover .icon {
+    color: #5c6b72;
+}
+#archives .categories-tags span .icon {
+    margin-left: 0;
+    margin-right: 10px;
+    color: #fff;
+}
+.article {
+    margin: auto;
+    padding: 20px;
+    position: relative;
+    top: 100px;
+    color: #1e3e3f;
+    font-size: 15px;
+}
+.article h1 {
+    font-weight: bold;
+    margin: 20px 0;
+}
+.article .info a {
+    color: #5c6b72;
+    text-decoration: none;
+}
+.article .info .date {
+    color: #5c6b72;
+    display: inline-block;
+    margin-right: 20px;
+}
+.article .info .date .tag {
+    margin-right: 10px;
+}
+.article .info .category {
+    color: #5c6b72;
+    display: inline-block;
+    margin-right: 20px;
+}
+.article .info .category .tag {
+    margin-right: 10px;
+}
+.article .info .tags {
+    color: #5c6b72;
+    display: inline-block;
+    margin-right: 20px;
+}
+.article .info .tags .tag {
+    margin-right: 10px;
+}
+.article .content {
+    margin: 50px 0;
+}
+.page-num,
+.icon-link a,
+.friend-link a {
+    transition: all 0.25s;
+}
+.timeline {
+    position: relative;
+    margin-bottom: 30px;
+    transition: margin-top 0.5s, opacity 0.25s;
+}
+.timeline-content {
+    margin-left: 17.5px;
+    padding: 24px;
+    background: #fff;
+    border: 1px solid #0002;
+    border-radius: 3px;
+    transition: box-shadow 0.5s;
+}
+.timeline-content:hover {
+    box-shadow: 0 2px 8px #00000017;
+}
+.timeline-tail {
+    position: absolute;
+    width: 7px;
+    height: 7px;
+    background: #fff;
+    border: 2px solid #a5c2f5;
+    border-radius: 50%;
+}
+input.ipt {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 50px;
+    text-indent: 20px;
+    color: #000;
+    background: #f6f8fa;
+    box-sizing: border-box;
+    border: 1px solid #d0d7de;
+    border-radius: 50px;
+    font-family: "Fira Code", "Noto Sans SC", monospace;
+    font-size: 15px;
+    transition: all 0.25s;
+}
+input.ipt:hover {
+    background: #fff;
+}
+input.ipt:focus {
+    outline: none;
+    background: #fff;
+    border-color: #0969da;
+    box-shadow: 0 0 0 3px #0969da4d;
+}
+input.crypto {
+    margin: 50px auto 0;
+}
+input.crypto.fail {
+    color: #ea4a5a;
+    border-color: #ea4a5a;
+}
+input.crypto.fail:focus {
+    box-shadow: 0 0 0 3px #ea4a5a4d;
+}
+input.crypto.success {
+    color: #34d058;
+    border-color: #34d058;
+}
+input.search-bar {
+    margin: 0 auto 50px;
+}
+.search-mask {
+    position: relative;
+    margin: auto;
+    margin-top: -125px;
+    margin-bottom: -25px;
+    width: 100%;
+    height: 150px;
+    background: #f6f8fa;
+}
+.gt-container *:not(.gt-header-textarea) {
+    font-family: unset !important;
+}
+.gt-header-textarea {
+    font-family: "Fira Code", "Noto Sans SC", monospace;
+}
+.gt-container .gt-comment-content {
+    border: 1px solid #0000001a;
+    border-radius: 5px;
+}
+.gt-container .gt-comment-content:hover,
+.gt-container .gt-header-textarea:hover,
+.gt-container .gt-header-textarea:focus {
+    box-shadow: 0 2px 8px #00000017 !important;
+    background-color: #fbfbfb;
+}
+.gt-container .gt-header-textarea:focus {
+    background-color: #fbfbfb;
+}
+.gt-container .gt-avatar img {
+    border-radius: 50% !important;
+}
+.gt-container .gt-popup {
+    border-radius: 10px;
+}
+.gt-container .markdown-body {
+    color: unset !important;
+}
+.gt-container .markdown-body p {
+    margin: 10px 0 !important;
+}
+.gt-container .markdown-body blockquote {
+    border-left: unset !important;
+    padding: 1px 20px !important;
+    border-left: 3px solid #1e3e3f !important;
+    color: unset !important;
+}
+.gt-container .markdown-body code {
+    font-family: "Fira Code" !important;
+    background: #bddcf76b;
+    border-radius: 4px;
+    font-size: 14px;
+    color: #4b616b;
+}
+.gt-container .markdown-body pre {
+    font-family: "Fira Code" !important;
+    font-weight: 500;
+    border: 1px solid #ebeef5;
+    padding: 20px;
+    margin: 25px 0;
+    border-radius: 15px !important;
+}
+#showimg {
+    position: fixed !important;
+    display: flex;
+    z-index: 10006;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #fffc;
+    opacity: 0;
+    transition: all 0.25s;
+    align-items: center;
+    justify-content: center;
+    visibility: hidden;
+}
+#showimg-content {
+    position: relative;
+    margin: auto;
+    max-width: 95%;
+    max-height: 95%;
+    box-shadow: 0 0 50px 10px #d9d9d980;
+}
+::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+}
+::-webkit-scrollbar-track {
+    background: #e6efff;
+    border-radius: 100px;
+}
+body::-webkit-scrollbar-track {
+    border-radius: 0;
+}
+::-webkit-scrollbar-thumb {
+    background: #8ab5ff;
+    border-radius: 100px;
+    border: 3px solid #e6efff;
+    background-image: linear-gradient(
+        45deg,
+        rgba(255, 255, 255, 0.4) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(255, 255, 255, 0.4) 50%,
+        rgba(255, 255, 255, 0.4) 75%,
+        transparent 75%,
+        transparent
+    );
+}
+::selection {
+    background-color: #3392ff2a;
+    color: unset;
+}
+@media (min-width: 900px) {
+    #menu .desktop-menu {
+        display: block;
+    }
+    #menu .phone-menu {
+        display: none;
+    }
+    #home-head .home-info {
+        width: 500px;
+        height: 500px;
+    }
+    #home-head .home-info .loop {
+        position: absolute;
+        width: 500px;
+        height: 500px;
+        display: inline-block;
+    }
+    #home-head .home-info .info {
+        width: 500px;
+        height: 500px;
+    }
+    #home-head .home-info .info .wrap {
+        padding: 25px;
+    }
+    #home-head .home-info .info .wrap h1 {
+        font-size: 52px;
+        font-weight: bold;
+        margin-bottom: 10px;
+    }
+    #home-head .home-info .info .wrap h3 {
+        font-size: 24px;
+        margin: 10px 0;
+    }
+    #home-head .home-info .info .wrap h5 {
+        font-size: 16px;
+        margin: 20px 0;
+    }
+    ul {
+        padding-left: 40px;
+    }
+    ol {
+        padding-left: 40px;
+    }
+    #home-posts-wrap {
+        max-width: 1150px;
+        padding: 30px 0;
+    }
+    #home-posts {
+        width: 900px;
+        margin-left: auto;
+        margin-right: 50px;
+    }
+    #home-posts .post {
+        padding: 50px 50px;
+        margin: 0 0 25px;
+    }
+    #home-posts .post .excerpt {
+        padding: 20px 0;
+    }
+    .home-posts-wrap-no-card #home-posts {
+        margin: auto;
+    }
+    #home-card {
+        margin-right: auto;
+    }
+    .article {
+        width: 900px;
+    }
+    #archives {
+        width: 900px;
+    }
+    footer .footer-wrap {
+        width: 900px;
+    }
+}
+@media (min-width: 900px) and (max-width: 1200px) {
+    #home-posts-wrap {
+        width: 800px;
+    }
+    #home-posts {
+        margin: auto;
+        width: 100%;
+    }
+    #home-card {
+        display: none;
+    }
+    #archives {
+        width: 800px;
+    }
+}
+@media (max-width: 900px) {
+    #menu .desktop-menu {
+        display: none;
+    }
+    #menu .phone-menu {
+        display: block;
+    }
+    #home-head .home-info {
+        width: 350px;
+        height: 350px;
+    }
+    #home-head .home-info .loop {
+        position: absolute;
+        width: 350px;
+        height: 350px;
+        display: none;
+    }
+    #home-head .home-info .info {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: auto;
+        width: 350px;
+        height: 350px;
+        background: #ffffffa6;
+    }
+    #home-head .home-info .info .wrap {
+        padding: 50px;
+    }
+    #home-head .home-info .info .wrap h1 {
+        font-size: 46px;
+        font-weight: bold;
+        font-family: "Lexend", "Noto Sans SC", sans-serif;
+        margin-bottom: 10px;
+    }
+    #home-head .home-info .info .wrap h3 {
+        font-size: 20px;
+        margin: 10px 0;
+    }
+    #home-head .home-info .info .wrap h5 {
+        font-size: 14px;
+        margin: 20px 0;
+    }
+    ul {
+        padding-left: 20px;
+    }
+    ol {
+        padding-left: 20px;
+    }
+    #home-posts-wrap {
+        width: 100%;
+    }
+    #home-card {
+        display: none;
+    }
+    #home-posts {
+        margin: auto;
+        width: 100%;
+    }
+    #home-posts .post {
+        padding: 20px 30px;
+        margin: 0 0 30px;
+    }
+    #home-posts .post .post-tags {
+        padding-right: 69px;
+    }
+    #home-posts .post .excerpt {
+        padding: 20px 0;
+    }
+    .article {
+        width: 100%;
+    }
+    #archives {
+        width: 100%;
+    }
+    footer .footer-wrap {
+        width: 100%;
+    }
+}