h1,
h2,
h3,
h4,
h5,
p,
a,
small {
    /*设定文字为白色并且居中*/
    color: white;
    text-align: center;
}

body {
    background-color: #4a4b4b;
}

a {
    text-decoration: none;
    color:#00F0FF;
}

img {
    height: 230px;
    width: auto;
}

ul,li{
    color: white;
}

.show_div {
    transition: 0.7s;
    -webkit-transition: 0.7s;
    bottom: 2px solid white;
    border-radius: 30px;
}

.show_div:hover {
    font-size: 1.25em;
}

.div1 {
    min-width: 250px;
    min-height: 250px;
    max-width: 500px;
    max-height: 500px;
    margin: 10px 10px;
    border: 2px solid lightblue;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    box-shadow: 0 4px 8px #bcbcbc;
    text-align: center;
}

@keyframes playwhenin {
    0% {
        /* background-color: #4a4b4b; */
        /* background-image: linear-gradient(#4a4b4b,#4a4b4b); */
        background-position: 0% 0%;
    }

    /* 50% {
        /* background-color: #00aaff; */
        /* background-image: linear-gradient(#4a4b4b,#00aaff); */
        /* background-position: 500% 500%; 
    } */

    /* 50% {
        /* background-color: #00F0FF; */
        /* background-image: linear-gradient(#00F0FF,#00F0FF); */
        /* background-position: 0% 0%;
    }  */

    /* 75% {
        background-position: 1000% 1000%;
    } */

    99% {
        background-position: 100% 200%;
    }
    100% {
        background-image: linear-gradient(45deg,#4a4b4b 10%,#00aaff,#00F0FF 80%);
        background-size: 200%;
        background-position: 100% 200%;
    }
}

/* @keyframes div_animatable {
    0% {
        background-position: 0% 0%;
    }

    99% {
        background-position: 100% 100%;
    }

    100% {
        background-image: linear-gradient(50deg,#4a4b4b 65%,#00aaff,#00F0FF 100%);
        background-size: 200%;
        background-position: 100% 100%;
    }
} */

.in_div {
    border: 2px solid white;
    border-radius: 30px;
    animation: playwhenin 3s forwards;
    -webkit-animation: playwhenin 3s forwards;
    /* background-image: linear-gradient(45deg,#4a4b4b,#00aaff,#00F0FF); */
    background-image: linear-gradient(45deg,#4a4b4b 10%,#00aaff,#00F0FF 80%);
    background-size: 200%;/*用移动背景来实现动画的效果*/
    transition: 0.7s;
    -webkit-transition: 0.7s;
    margin-right: 30%;
    margin-left: 30%;
    margin-top: 20px;
    /*-webkit-text-stroke: 1px #5a5b5b;*/
}

.in_div:hover {
    font-size: 1.25em;
}

.now_html {
    background-color: #00F0FF;
}

.have_img {
    max-width: 300px;
    max-height: 500px;

}
.bottom>p{
    font-size: 0.5em;
}
.border_div{
    border: 2px solid white;
    border-radius: 30px;
    transition: 0.7s;
    -webkit-transition: 0.7s;
    margin-right: 30%;
    margin-left: 30%;
    margin-top: 20px;
}
.border_div:hover{
    font-size: 1.25em;
}
/*弹性盒控制*/

.flex_container {
    display: flex;
    /*定义弹性盒*/
    flex-direction: row;
    flex-wrap: wrap;
    background-color: block;
    position: sticky;

}

.flex_container>div {
    border: 2px solid;
    border-radius: 30px;
    margin: 20px;
    padding: 20px;
    color: #FFFFFF;
    transition: 0.7s;
    -webkit-transition: 0.7s;
}

.title{
    color: #00F0FF;
    margin: 10px;
}

.flex_container>div:hover {
    background-color: #00F0FF;
    font-size: 1.25em;
    
    /* animation: div_animatable 3s forwards;
    -webkit-animation: div_animatable 3s forwards;
    background-image: linear-gradient(50deg,#4a4b4b 65%,#00aaff,#00F0FF 100%);
    background-size: 200%;
    font-size: 1.25em; */
}
.flex_container>div:hover>.title,.flex_container>div:hover>a{
    color: #ffffff;
}

.card_div:hover a{
    color: #ffffff;
}

/* .card_div{
    transition: 1s;
    -webkit-transition: 1s;
}

.card_div:hover{
    font-size: 1.25em;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
} */

/* .card_div:hover{
    animation: playwhenin 3s forwards !important;
    -webkit-animation: playwhenin 3s forwards !important;
    background-image: linear-gradient(45deg,#4a4b4b 70%,#00aaff,#00F0FF 80%) !important;
    background-size: 200% !important;
    font-size: 1.25em; 
} */

body {
    font-family:Arial,Helvetica,sans-serif;
}

.code {
    /* background-color: #000000; */
    color: white;
    /* padding-left: 10%; */
    background-color: #404040;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: Consolas, 'Courier New', monospace !important;
}

.code p {
    display: block;
    text-align: left !important;
    padding-left: 10% !important;
    margin: 0 auto;
    /* width: 70%; */
    white-space: nowrap;
}

#texts p, #texts h1, #texts h2, #texts h3, #texts h4, #texts h5, #texts h6
{
    padding-left: 10% !important;
    text-align: left !important;
}
/* 
.card_div
{
    margin: auto !important;
} */
.warning{
    text-align: center;
    color: #ffcc00 !important;
}
.small{
    font-size: 0.9em;
}
.center_div{
    margin-right: 30%;
    margin-left: 30%;
}
.center_div>p{
    text-align: left;
}