:root {
    --page-min-width: 1024px;
    font-weight: 200;
}

.message-box {
    position: fixed;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    background-color: red;
    color: white;
    font-size: 14px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
    max-width: 80%;
    word-wrap: break-word;
}

.message-box.show {
    opacity: 1;
}

.icon {
width: 1em;
height: 1em;
}

body {
      font-family:
  "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei",
  "WenQuanYi Micro Hei", "Helvetica Neue", "Arial", "sans-serif", serif;
}

*, ::before, ::after { 
    box-sizing: border-box;
}

.no-select {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE 10+ */
    user-select: none;         /* 标准语法 */
}

a {
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: black;
}

.link {
    cursor: pointer;
}

.menu {
   margin:  0em  .5em;
   padding: .3em .3em;
}


.one-input-text {
    height: 3.5em;
    width: 100%;
    padding: 0em 1em;
    border-radius: 10px;
    border: 2px solid #eee;
}

.one-input-textarea {
    height: 10em;
    width: 100%;
    padding: 1em 1em;
    border-radius: 10px;
    border: 2px solid #eee;
}

.one-input-button {
    padding: .8em 2.5em;
    border-style: none;
    border-radius: 3px;
    background-color: skyblue;
    color: #111;
    font-size: 1.2rem;
}

.content-item {
    position: relative;
    border-bottom: 1px solid #eee;
    padding: .5em 2em .5em 1em;
}


.content-item:hover {
    background-color: #f0ffff;
}

/* @media screen and (min-width: 1024px) { */
/*     body { */
/*         background-color: #eee; */
/*     } */
/*     .world { */
/*         width: 1024px; */
/*         margin: 0 auto; */
/*         border: 1px solid #eee; */           
/*         box-shadow: 0 2px 4px rgba(0,0,0,0.1); */
/*     } */
/*     #footer { */
/*         width: 1024px; */
/*         margin: 0 auto; */
/*     } */
/* } */

/* .world { */ 
/*     background-color: white; */ 
/*     min-height: 100vh; */
/* } */



.form {
    padding: 1em .3em;
}

.form input {
    height: 2.5em;
    width: 50vh;
    border: 2px solid #eee;
}
.form textarea {
    border: 2px solid #eee;
    width: 100%;
    height: 50vh;
}
.form textarea:placeholder {
    color: black;
}

.footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 1.5em;
    background-color: #f5f5dc;
    text-align: center;
}

.footer a {
    font-weight: bold;
    text-decoration: none;
}

.http-error {
    text-align: center;
    position: absolute;
    top: calc( 100vh / 2 );
    left: calc( 100vw / 2.05  );
}