//
 body {
            font-size: 16px;
            line-height: 1.5;
            padding: 0 15px;
            max-width: 800px;
            margin: 0 auto;
　　　　　　color: #2196F3;     /* 文字色指定 */
        }
        h1 {
            font-size: 24px;
        }
        .container {
            padding: 20px;
        }
        .form-group {
            margin-bottom: 30px;
        }
        .form-control {
            width: 100%;
        }
        #prompt {
            height: 300px;
        }
    body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

　list 円
list-style: circle inside;


---Animated text css: top to bottom effect:--
**css**
<style> @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); .container-bottom-to-up { overflow: hidden; margin: 0px; } .top-to-bottom { animation: 0.4s top-to-bottom forwards; font-size: 24px; font-weight: 600; letter-spacing: -.005em; font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif; color: rgba(0,0,0,0.8); text-align: left; } @keyframes top-to-bottom { from { transform: translateY(-48px); } to { transform: translateY(0); } } </style>
**HTML**
<div id="containerAnimation" class="container-bottom-to-up" >   <p class="top-to-bottom">Hello wordtest</p>  </div>

----GLASSMORPHISM details----
                .card{
                    backdrop-filter: blur(2px) saturate(273%); 
                    -webkit-backdrop-filter: blur(2px) saturate(273%); 
                    background-color: rgba(200,197,232, 0.75); 
                    border-radius:  20px; 
                    border: 1px solid rgba(209, 213, 219, 0.18); 
                    }
                
-------button 01-------------
<!--1️⃣ code CSS below -->

<style>
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Koulen&family=Lato&family=Nunito&family=Playfair+Display:ital@1&family=Prata&family=Raleway:ital,wght@1,100&family=Roboto&family=Roboto+Condensed&family=Teko&display=swap');

.btn_01{

font-family: Roboto, sans-serif;
font-weight: 0;
font-size: 14px;
color: #fff;
background-color: #0066CC;
padding: 10px 30px;
border: 2px solid #0066cc;
box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
border-radius: 50px;
transition : 377ms;
transform: translateY(0);
display: flex;
flex-direction:row-reverse;
align-items: center;
cursor: pointer;
}

.btn_01:hover{

transition : 377ms;
padding: 10px 50px;
transform : translateY(-0px);
background-color: #fff;
color: #0066cc;
border: solid 2px #0066cc;
}

</style>

<!-- 2️⃣code HTML below -->

<button class="btn_01"> <img src="https://www.htmlcssbuttongenerator.com/iconExample-text-align-left-lined.svg" style="width:37px; margin-left:0px; margin-right:21px; flex-direction: row-reverse;"></button>

--------------------------



//