/*  
 * Copyright (c) 2024 YiDing, all rights reserved. 
 *  
 * This is an example file of the site. You can freely copy,
 * fork, clone and download the file to your local machine.
 * But attention to replace it by your own file before you
 * deploying the site.
 */

/* button_1: 鼠标悬停时有变色动画 */
.button_1 {
    padding: 10px 20px;
    text-transform: uppercase;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 500;
    color: #963fd0bd;
    text-shadow: none;
    background: transparent;
    cursor: pointer;
    box-shadow: transparent;
    border: 1px solid #4309f180;
    transition: 0.5s ease;
    user-select: none;
}

/* .button_1:hover,:focus {
  color: #ffffff;
  background: #0037ffd1;
  border: 1px solid #0037ff;
  text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 20px #ffffff;
  box-shadow: 0 0 5px #0037ff, 0 0 20px #0037ff, 0 0 50px #0037ff,
    0 0 100px #0037ff;
} */

/* button_2: 鼠标悬停时有动画，显示即将下载的文件大小 */

.button_2 {
    --width: 100px;
    --height: 35px;
    --tooltip-height: 35px;
    --tooltip-width: 90px;
    --gap-between-tooltip-to-button: 18px;
    --button-color: #ffffff;
    --tooltip-color: #fff;
    width: var(--width);
    height: var(--height);
    background: var(--button-color);
    position: relative;
    text-align: center;
    border: 1px solid #00000071;
    border-radius: 0.45em;
    font-family: "Arial";
    transition: background 0.2s;
}

.button_2::before {
    position: absolute;
    content: attr(data-tooltip);
    width: var(--tooltip-width);
    height: var(--tooltip-height);
    background-color: var(--tooltip-color);
    font-size: 0.9rem;
    color: #111;
    border-radius: 0.25em;
    line-height: var(--tooltip-height);
    bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) + 10px);
    left: calc(50% - var(--tooltip-width) / 2);
}

.button_2::after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: var(--tooltip-color);
    left: calc(50% - 10px);
    bottom: calc(100% + var(--gap-between-tooltip-to-button) - 10px);
}

.button_2::after,
.button_2::before {
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
}

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

.button_2-wrapper,
.text,
.icon {
    /* .icon定义与组件'?>'冲突，将position由absulote改为了static */
    overflow: hidden;
    position: static;
    width: 100%;
    height: 100%;
    left: 0;
    color: #fff;
}

.text {
    top: 0;
}

.text,
.icon {
    transition: top 0.5s;
}

.icon {
    color: #fff;
    top: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon svg {
    width: 24px;
    height: 24px;
}

.button_2:hover {
    background: #b69bfc60;
}

.button_2:hover .text {
    top: -100%;
}

.button_2:hover .icon {
    top: 0;
}

.button_2:hover:before,
.button_2:hover:after {
    opacity: 1;
    visibility: visible;
}

.button_2:hover:after {
    bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) - 20px);
}

.button_2:hover:before {
    bottom: calc(var(--height) + var(--gap-between-tooltip-to-button));
}

/* button_3: 鼠标悬停展开背景图 */
.button_3 {
    /* 按钮的样式 */
    border: none;
    position: relative;
    width: 200px;
    height: 73px;
    padding: 0;
    z-index: 2;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='868' width='2500' viewBox='0 0 726 252.17'%3E%3Cpath d='M483.92 0S481.38 24.71 466 40.11c-11.74 11.74-24.09 12.66-40.26 15.07-9.42 1.41-29.7 3.77-34.81-.79-2.37-2.11-3-21-3.22-27.62-.21-6.92-1.36-16.52-2.82-18-.75 3.06-2.49 11.53-3.09 13.61S378.49 34.3 378 36a85.13 85.13 0 0 0-30.09 0c-.46-1.67-3.17-11.48-3.77-13.56s-2.34-10.55-3.09-13.61c-1.45 1.45-2.61 11.05-2.82 18-.21 6.67-.84 25.51-3.22 27.62-5.11 4.56-25.38 2.2-34.8.79-16.16-2.47-28.51-3.39-40.21-15.13C244.57 24.71 242 0 242 0H0s69.52 22.74 97.52 68.59c16.56 27.11 14.14 58.49 9.92 74.73C170 140 221.46 140 273 158.57c69.23 24.93 83.2 76.19 90 93.6 6.77-17.41 20.75-68.67 90-93.6 51.54-18.56 103-18.59 165.56-15.25-4.21-16.24-6.63-47.62 9.93-74.73C656.43 22.74 726 0 726 0z'/%3E%3C/svg%3E")
        no-repeat 50% 50%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='868' width='2500' viewBox='0 0 726 252.17'%3E%3Cpath d='M483.92 0S481.38 24.71 466 40.11c-11.74 11.74-24.09 12.66-40.26 15.07-9.42 1.41-29.7 3.77-34.81-.79-2.37-2.11-3-21-3.22-27.62-.21-6.92-1.36-16.52-2.82-18-.75 3.06-2.49 11.53-3.09 13.61S378.49 34.3 378 36a85.13 85.13 0 0 0-30.09 0c-.46-1.67-3.17-11.48-3.77-13.56s-2.34-10.55-3.09-13.61c-1.45 1.45-2.61 11.05-2.82 18-.21 6.67-.84 25.51-3.22 27.62-5.11 4.56-25.38 2.2-34.8.79-16.16-2.47-28.51-3.39-40.21-15.13C244.57 24.71 242 0 242 0H0s69.52 22.74 97.52 68.59c16.56 27.11 14.14 58.49 9.92 74.73C170 140 221.46 140 273 158.57c69.23 24.93 83.2 76.19 90 93.6 6.77-17.41 20.75-68.67 90-93.6 51.54-18.56 103-18.59 165.56-15.25-4.21-16.24-6.63-47.62 9.93-74.73C656.43 22.74 726 0 726 0z'/%3E%3C/svg%3E")
        no-repeat 50% 50%;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    cursor: pointer;
    background-color: transparent;
    transform: translateY(8px);
}

.button_3:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0px 0 0 0 white;
    transition: all 2s ease;
}

.button_3:hover:after {
    box-shadow: 0px -13px 56px 12px #ffffffa6;
}

.button_3 span {
    position: absolute;
    width: 100%;
    font-size: 15px;
    font-weight: 100;
    left: 50%;
    top: 39%;
    letter-spacing: 3px;
    text-align: center;
    transform: translate(-50%, -50%);
    color: black;
    transition: all 2s ease;
}

.button_3:hover span {
    color: white;
}

.button_3:before {
    content: "";
    position: absolute;
    width: 0;
    height: 100%;
    background-color: black;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 1s ease;
}

.button_3:hover:before {
    width: 100%;
}

/* button_4: refresh图标 */

.button_4 {
    color: white;
    background-color: #222;
    font-weight: 500;
    border-radius: 0.5rem;
    font-size: 1rem;
    line-height: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    cursor: pointer;
    text-align: center;
    margin-right: 0.5rem;
    display: inline-flex;
    align-items: center;
    border: none;
}

.button_4:hover {
    background-color: #333;
}

.button_4 svg {
    display: inline;
    width: 1.3rem;
    height: 1.3rem;
    margin-right: 0.75rem;
    color: white;
}

.button_4:focus svg {
    animation: spin_357 0.5s linear;
}

@keyframes spin_357 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Input_1 */

.input__container {
    position: relative;
    background: rgba(255, 255, 255, 0.664);
    padding: 10px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 22px;
    max-width: 300px;
    transition: transform 400ms;
    transform-style: preserve-3d;
    /*  transform: rotateX(15deg) rotateY(-20deg); */ /* 旋转角度 */
    perspective: 500px;
}

.shadow__input {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    z-index: -1;
    filter: blur(30px);
    border-radius: 20px;
    background-color: #999cff;
    background-image: radial-gradient(
            at 85% 51%,
            hsla(60, 60%, 61%, 1) 0px,
            transparent 50%
        ),
        radial-gradient(at 74% 68%, hsla(235, 69%, 77%, 1) 0px, transparent 50%),
        radial-gradient(at 64% 79%, hsla(284, 72%, 73%, 1) 0px, transparent 50%),
        radial-gradient(at 75% 16%, hsla(283, 60%, 72%, 1) 0px, transparent 50%),
        radial-gradient(at 90% 65%, hsla(153, 70%, 64%, 1) 0px, transparent 50%),
        radial-gradient(at 91% 83%, hsla(283, 74%, 69%, 1) 0px, transparent 50%),
        radial-gradient(at 72% 91%, hsla(213, 75%, 75%, 1) 0px, transparent 50%);
}

.input__button__shadow {
    cursor: pointer;
    border: none;
    background: none;
    transition: transform 400ms, background 400ms;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    padding: 5px;
}

.input__button__shadow:hover {
    background: rgba(255, 255, 255, 0.411);
}

.input__search {
    width: 100%;
    border-radius: 20px;
    outline: none;
    border: none;
    padding: 8px;
    position: relative;
}

/* Loading Animation 1*/

.wrapper {
    width: 200px;
    height: 60px;
    position: relative;
    z-index: 1;
}

.circle-load {
    width: 20px;
    height: 20px;
    position: absolute;
    border-radius: 50%;
    background-color: #696868;
    left: 15%;
    transform-origin: 50%;
    animation: circle7124 0.5s alternate infinite ease;
}
@keyframes circle7124 {
    0% {
        top: 60px;
        height: 5px;
        border-radius: 50px 50px 25px 25px;
        transform: scaleX(1.7);
    }

    40% {
        height: 20px;
        border-radius: 50%;
        transform: scaleX(1);
    }

    100% {
        top: 0%;
    }
}
.circle-load:nth-child(2) {
    left: 45%;
    animation-delay: 0.2s;
}
.circle-load:nth-child(3) {
    left: auto;
    right: 15%;
    animation-delay: 0.3s;
}
.shadow {
    width: 20px;
    height: 4px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.9);
    position: absolute;
    top: 62px;
    transform-origin: 50%;
    z-index: -1;
    left: 15%;
    filter: blur(1px);
    animation: shadow046 0.5s alternate infinite ease;
}
@keyframes shadow046 {
    0% {
        transform: scaleX(1.5);
    }

    40% {
        transform: scaleX(1);
        opacity: 0.7;
    }

    100% {
        transform: scaleX(0.2);
        opacity: 0.4;
    }
}
.shadow:nth-child(4) {
    left: 45%;
    animation-delay: 0.2s;
}
.shadow:nth-child(5) {
    left: auto;
    right: 15%;
    animation-delay: 0.3s;
}

/* Loading animation 2 */
.spinner {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
}
.spinner::before,
.spinner:after {
    content: "";
    position: absolute;
    border-radius: inherit;
}
.spinner:before {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(0deg, #ff00cc 0%, #333399 100%);
    animation: spin8932 0.5s infinite linear;
}

.spinner:after {
    width: 85%;
    height: 85%;
    background-color: rgb(255, 255, 255);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes spin8932 {
    to {
        transform: rotate(360deg);
    }
}

/* ==高亮== */
.highl {
    background: #fdefee;
    color: #e95f59;
    font-size: 18px;
    margin: 0 5px;
    font-weight: bold;
}

/* ----------- 自定义Mac风代码块 -------------- */
/*                                             */
/*                                             */
/* ----------- 自定义Mac风代码块 -------------- */