/* 宇宙超级无敌美化框 */
.fancy-bg-container {
    border-radius: 0.5em;
    color: #555555;
    margin: 0.6em 0;
    padding: 1em;
}

/** 顺序：
background-color: ; - 基色，旧版浏览器可识别
background-image: linear-gradient(); - 在这里开始你的创意
background-image: radial-gradient(); - 若使用新技术，确保放在最后，越新越靠后，确保旧版浏览器可兼容
*/

/*迷幻紫*/
.fancy-bg-purple {
    box-shadow: 0.4em 0 0.75em -0.3em #bec4fc, -0.4em 0 0.75em -0.3em #bdc4fc;
    background-color: #8EC5FC;
    background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
}

/*西瓜红*/
.fancy-bg-red {
    box-shadow: 0.4em 0 0.75em -0.3em #ffb0ac, -0.4em 0 0.75em -0.3em #ffa1ae;
    background-color: rgba(255, 154, 139, 0.4);
    background-image: linear-gradient(220deg, #FF9A8B 0%, rgba(255, 106, 136, 0.22) 55%, #FF99AC 100%);
    background-image: -webkit-linear-gradient(220deg, rgba(255, 154, 139, 0.5) 0%, rgba(255, 106, 136, 0.67) 55%, rgba(255, 153, 172, 0.5) 100%);
}

/*华为P30 天空之境*/
.fancy-bg-dreamy {
    box-shadow: 0.4em 0 0.75em -0.3em #fddfea, -0.4em 0 0.75em -0.3em #d7f0f3;
    background-color: #FFDEE9;
    background-image: linear-gradient(0deg, rgba(255, 222, 233, 0.75) 0%, rgba(181, 255, 252, 0.5) 100%);
}

/*小宇宙*/
.fancy-bg-cosmos {
    color: #eeeeee;
    box-shadow: 0.4em 0 0.75em -0.3em #0c558d, -0.4em 0 0.75em -0.3em #0a3a5d00;
    background-color: #0c4974;
    background-image: radial-gradient(circle 16.4em at 100% 3%, #0c558d 31.1%, #cdb55d 36.4%, #f4665a 50.9%, #c7cebb 60.7%, #f98c45 72.5%, #0c4974 72.6%);
}

/*橄榄绿*/
.fancy-bg-olive {
    color: #eeeeee;
    box-shadow: 0.4em 0 0.75em -0.3em #446e5c, -0.4em 0 0.75em -0.3em #9ab782;
    background-color: #446e5c;
    background-image: linear-gradient(102deg, #446e5c 17.4%, #6b9c78 49.3%, #9ab782 83.4%, #f7edbf 110.3%);
}

/*小太阳*/
.fancy-bg-sun {
    color: #ffffff;
    box-shadow: 0.4em 0 0.75em -0.3em #fddfea, -0.4em 0 0.75em -0.3em #d7f0f3;
    background-color: #131e25;
    background-image: linear-gradient(90deg, #ff7c00 0%, #ff7c00 15.9%, #ffa34d 15.9%, #ffa34d 24.4%, #131e25 25%, #131e25 66%);
    background-image: radial-gradient(circle farthest-corner at -8.9% 51.2%, #ff7c00 0%, #ff7c00 15.9%, #ffa34d 15.9%, #ffa34d 24.4%, #131e25 25%, #131e25 66%);
}

/*优雅紫*/
.fancy-bg-lavender {
    color: #ffffff;
    box-shadow: 0.4em 0 0.75em -0.3em #afa0d0, -0.4em 0 0.75em -0.3em #5f75e3;
    background-color: #5f75e3;
    background-image: radial-gradient(circle farthest-corner at 10% 20%, #5f75e3 0%, #bca7cd 90%);
}

/*深邃黑*/
.fancy-bg-deepdark {
    color: #c7c7c7;
    box-shadow: 0.4em 0 0.75em -0.3em #9baab9, -0.4em 0 0.75em -0.3em #404040;
    background-color: #404040;
    background-image: radial-gradient(circle farthest-corner at 10% 20%, #000000 0%, #404040 90%);
}