@charset "utf-8";
*{
margin:0 auto;
padding:0;
box-sizing:border-box;
}
@font-face{
font-family:"Genshin";
src:url("Genshin.ttf") format("truetype");
}
html{
font-size:16px;
}
@media screen and (max-width: 1100px){
html{
font-size:14px;
}
}
@media screen and (max-width: 800px){
html{
font-size:10px;
}
}
#container{
width:100%;
height:auto;
}
#headBackground{
width:100%;
height:20rem;
border:none;
/*background-color:#77e0ff;*/
background-image:url('bg.png');/*M27M.png*/
}
#mainContext{
position:absolute;
top:7rem;
left:7rem;
right:7rem;
padding:12rem;
padding-top:7rem;
background-color:#fff;
border-radius:0.5rem;
}
@media screen and (max-width: 1600px){
#mainContext{
padding:7rem !important;
}
}
@media screen and (max-width: 1200px){
#mainContext{
padding:4.5rem !important;
}
}
@media screen and (max-width: 840px){
#mainContext{
top:4rem !important;
left:0rem !important;
right:0rem !important;
border-radius:0;
}
}
h1{
display:inline-block;
font-size:3rem;
font-weight:555;
font-family:"Genshin";
margin-bottom:4rem;
}
h2{
display:inline-block;
font-size:2rem;
font-weight:555;
font-family:"Genshin";
margin-bottom:3rem;
}
p, a{
font-size:1.5rem;
font-family:"Genshin";
text-indent:2em;
}
.line{
width:100%;
height:auto;
float:inline-start;
}
.column{
display:inline-block;
position:relative;
float:inline-start;
width:50%;
min-width:24rem;
max-width:100% !important;
padding-top:2rem;
padding-bottom:2rem;
padding-left:1rem;
padding-right:1rem;
height:auto;
word-wrap:break-word;
}
@media screen and (max-width:1300px){
.column{
width:100%;
padding-top:1.5rem;
padding-bottom:1.5rem;
padding-left:0.7rem;
padding-right:0.7rem;
}
}
input, select, button, a{
margin:0.3rem;
padding:0.75rem;
font-size:1.5rem;
background:none;
border-style:solid;
border-color:#bbb;
border-width:0.25rem;
border-radius:1.75rem;
font-family:"Genshin";
}
input{
padding-left:2.5rem;
padding-right:2.5rem;
}
#submit{
text-align:center;
width:95%;
}
option{
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
padding:0.75rem;
font-size:1.5rem;
border-style:solid !important;
border-color:#bbb !important;
border-width:0.25rem !important;
border-radius:27px !important;
font-family:"Genshin";
}
hr{
margin:1.5rem;
}
a{
display:inline-block;
color:#000;
text-decoration:none;
width:100%;
}
a *{
text-indent:0;
margin-bottom:1rem;
}
a .intro{
font-size:1.125rem;
color:#888;
}
.sTag{
color:#000;
background-color:#ddd;
margin-left:0.125rem;
margin-right:0.125rem;
padding-left:0.5rem;
padding-right:0.5rem;
border-radius:0.5rem;
}
@media screen and (prefers-color-scheme:dark){
body,#mainContext,option,button,a{
background-color:#222;
}
.sTag{
background-color:#444;
}
#headBackground{
background-image:url('Scenes/M27M.png');
}
h1,h2,p,input,select,option,button,a,.sTag{
color:#fff;
}
input,select,option,button,a{
border-color:#444;
}
}
#searchBox{
width:100%;
height:3.8rem;
margin-bottom:32px;
}
#searchBox input{
display:inline-block;
position:relative;
float:left;
width:80%;
margin:0;
}
button{
margin:0;
padding:0;
display:inline-block;
position:relative;
width:20%;
right:0;
top:0;
height:3.8rem;
float:right;
overflow:hidden;
text-align:center;
}
.pyro{color:#FF8C00;text-shadow: #000 0.5px 0 0, #000 0 0.5px 0, #000 -0.5px 0 0, #000 0 -0.5px 0;}
.electro{color:#9400D3;text-shadow: #000 0.5px 0 0, #000 0 0.5px 0, #000 -0.5px 0 0, #000 0 -0.5px 0;}
.hydro{color:#00BFFF;text-shadow: #000 0.5px 0 0, #000 0 0.5px 0, #000 -0.5px 0 0, #000 0 -0.5px 0;}
.cryo{color:#87CEEB;text-shadow: #000 0.5px 0 0, #000 0 0.5px 0, #000 -0.5px 0 0, #000 0 -0.5px 0;}
.anemo{color:#7FFFD4;text-shadow: #000 0.5px 0 0, #000 0 0.5px 0, #000 -0.5px 0 0, #000 0 -0.5px 0;}
.geo{color:#FFD700;text-shadow: #000 0.5px 0 0, #000 0 0.5px 0, #000 -0.5px 0 0, #000 0 -0.5px 0;}
.dendro{color:#ADFF2F;text-shadow: #000 0.5px 0 0, #000 0 0.5px 0, #000 -0.5px 0 0, #000 0 -0.5px 0;}