@font-face {
     font-family: "Genshin";
     src: url('font/zh-cn.ttf');
 }

 ::selection {
     color: #2e2c49;
     background-color: #f9f7ea;
 }

 body {
     margin: 0 auto;
     overflow: hidden;
     box-sizing: border-box;
     color: #f9f7ea;
     font-family: "Genshin";
     background-image: url(images/bg_genshin.jpg);
     background-size: cover;
     background-repeat: no-repeat;
     cursor: url('images/mouse.png'), auto;
 }

 main {
    background: linear-gradient(180deg, rgba(42, 123, 155, 0) 0%, rgba(166, 12, 45, 0.1) 80% ,rgba(166, 12, 45, 0.25) 90%, rgba(150, 0, 25, 0.35) 100%);
 }

 a {
     color: inherit;
     text-decoration: none;
 }

 a:hover {
     cursor: url('images/mouse_hover.png'), pointer;
 }

 a:visited {
     color: inherit;
 }

 nav ul {
     list-style-type: none;
     padding-top: 40px;
     text-align: center;
     padding-left: 0;
     margin-left: 16px;
     margin-top: 0;
 }

 nav ul li {
     display: inline;
     margin-left: 35px;
     margin-right: 35px;
 }

 nav .divider {
     background-image: url(images/divider.png);
     width: 100%;
     min-height: 64px;
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
 }

 h1 {
     font-size: 95px;
     margin: 0;
 }

 h2 {
     font-size: 32px;
     margin: 0;
     color: #ffa7a0;
 }

 #splash .blob {
     background-image: url(images/blob_red.png);
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
     height: 400px;
     width: 450px;
 }

 #splash .diluc {
     background-image: url(images/diluc.png);
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
     height: 100%;
     width: 100%;
 }

 #splash {
     gap: 50px;
     min-height: 65vh;
     animation-name: fadeInOpacity;
     animation-iteration-count: 1;
     animation-timing-function: ease-in;
     animation-duration: 0.8s;
 }

 #splash img {
     opacity: 0.7;
     transition: 0.35s ease opacity;
 }

 #splash img:hover {
     opacity: 1;
 }

 .logo_genshin {
     background-image: url(images/genshin_logo.png);
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
     height: 200px;
     width: 250px;
     opacity: 0.7;
     transition: 0.3s ease opacity;
 }

 .logo_genshin:hover {
     opacity: 1;
 }

 .flex-container {
     display: flex;
 }

 .flex-center {
     display: flex;
     justify-content: center;
     align-items: center;
 }


 .icon-button {
     border-radius: 50%;
     background-color: #f9f7ea;
     color: #2e2c49;
     width: 64px;
     height: 64px;
     opacity: 0.7;
     transition: 0.3s ease opacity;
     display: flex;
     font-size: 24px;
     align-items: center;
     justify-content: center;
 }

 .icon-button:hover {
     opacity: 1;
     cursor: url('images/mouse_hover.png'), pointer;
 }

 .icon-button i {
     padding: 20px;
 }

 @keyframes fadeInOpacity {
     0% {
         opacity: 0;
     }

     100% {
         opacity: 1;
     }
 }

 @media (max-width: 1550px) {
     #splash .blob {
         height: 250px;
         width: 300px;
     }

     h1 {
         font-size: 72px;
     }

     h2 {
         font-size: 24px;
     }
 }

 @media (max-width: 1100px) {
     #splash .blob {
         height: 250px;
         width: 300px;
     }

     h1 {
         font-size: 58px;
     }

     h2 {
         font-size: 20px;
     }
 }

 @media (max-width: 960px) {
     body {
         overflow: auto;
     }

     .flex-center {
         flex-direction: column;
     }

     #splash .blob {
         height: 200px;
         width: 250px;
     }

     nav ul li {
         margin-left: 10px;
         margin-right: 10px;
     }

     #splash .text .flex-container {
         justify-content: center;
     }

     h1 {
         font-size: 32px;
     }

     h2 {
         font-size: 20px;
         text-align: center;
         margin-top: 20px;
     }

     .logo_genshin {
         margin-left: 0 !important;
     }
 }