/* 暗黑模式 */
 @media (prefers-color-scheme: dark) {
     body {
         background: #333;
         color: #fff;
     }
 }

 /* 浅色模式 */
 @media (prefers-color-scheme: light) {
     body {
         background: #fff;
         color: #555;
     }
 }

 @media screen and (min-width: 320px) and (max-width: 1199px) {
     html {
         font-size: calc(16px + 5 * (100vw - 375px) / 375);
     }

     body {
         background-image: url("https://imgapi.cn/api.php?zd=mobile&fl=fengjing&gs=images");
     }
 }

 @media screen and (min-width: 1200px) {
     html {
         /* 屏幕宽度从1000px往后每增加100px，根字号大小就增加0.5px */
         font-size: calc(32px + 5 * (100vw - 1200px) / 1200);
     }

     body {
         background-image: url('../images/bgi.webp');
     }
 }


 body {
     overflow: hidden;
     margin: 0;
     height: 100vh;
     cursor: wait;
     color-scheme: dark light;
     font-family: "Zhi Mang Xing", cursive;
     font-style: normal;
 }

 @media (hover: hover) {
     h1:hover {
         color: rgb(188, 74, 222);
         transition-duration: 0.5s;
     }
 }

 h1 {
     position: fixed;
     top: 25%;
     left: 0;
     width: 100%;
     text-align: center;
     transform: translateY(-50%);
     color: #d76c25;
     padding: 0 10px;
 }

 h1 span {
     position: fixed;
     left: 0;
     width: 100%;
     height: auto;
     text-align: center;
     margin-top: 30px;
 }

 .f-fc6 {
     color: #666;
 }

 a:hover .f-fc6,
 a.f-fc6:hover,
 a:hover {
     color: #00AD4D;
     text-decoration: none;
 }

 img:hover {
     filter: hue-rotate(90deg);
     transform: translateY(6px);
 }

 .rotateImages {
     -webkit-animation: myRotate 10s linear infinite;
     animation: myRotate 10s linear infinite;
 }

 @-webkit-keyframes myRotate {
     0% {
         -webkit-transform: rotate(0deg);
     }

     50% {
         -webkit-transform: rotate(180deg);
     }

     100% {
         -webkit-transform: rotate(360deg);
     }
 }

 @keyframes myRotate {
     0% {
         -webkit-transform: rotate(0deg);
     }

     50% {
         -webkit-transform: rotate(180deg);
     }

     100% {
         -webkit-transform: rotate(360deg);
     }
 }

 /* #cf-widget {
     display: grid;
     justify-content: center;
     align-items: center;
     height: 100%;
     background-color: lightblue;
 }

 #h1,
 canvas {
     display: none;
     text-align: center;
     margin-top: 20px;
 }*/