@media screen and (max-width:500px){
    * {
        font-family: 'Noto Sans TC', sans-serif;
        font-weight: 200;
        font-size: x-large;
        color: var(--theme-color-text-dark);
        box-sizing: border-box;
    }
    
    body{    
    overflow-y: hidden;
    overflow-x: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    }

    html{
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    label{
        margin: 10px;
    }

    input[type="text"]{
        width: 80%;
        height: 40px;
        padding: 5px 10px;
        margin: 10px;
        border: 0.5px var(--theme-color-border) solid;
        border-radius: 20px;
        background-color: var(--theme-color-bg-blur);
    }
    
    input[type="text"]:hover{
        outline: none;
        background-color: var(--theme-color-bg-blur-dark);
        border: 0.5px #aaa solid;
    }

    input[type="text"]:focus{
        outline: none;
        background-color: var(--theme-color-bg-blur);
        border: 0.5px #aaa solid;
    }
    
    input[type="button"]{
        width: 80%;
        height: 40px;
        margin: 10px;
        color: var(--theme-color-btn-text);
        border: none;
        border-radius: 20px;
        background-color: var(--theme-color-btn);
    }
    
    input[type="button"]:hover{
        outline: none;
        cursor: pointer;
        background-color: var(--theme-color-btn-darl);
    }

    input[type="button"]:focus{
        outline: none;
    }
    
    .container{
        z-index: 1;
        width: 100vw;
        height: 100vh;
        margin: auto;
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border: none;
        border-radius: none;
        background: none;
    }
    
    #connect_status{
        margin: 10px;
        display: flex;
        flex-direction: row;
        visibility: hidden;
        vertical-align: middle;
    }
    
    .loader {
        display: none;
        border: 4px solid var(--theme-color-border-light);
        border-radius: 50%;
        border-top: 4px solid var(--theme-color-border-dark);
        width: 20px;
        height: 20px;
        -webkit-animation: spin 1s linear infinite; /* Safari */
        animation: spin 1s linear infinite;
        margin-right: 5px;
    }
      
    /* Safari */
    @-webkit-keyframes spin {
        0% { -webkit-transform: rotate(0deg); }
        100% { -webkit-transform: rotate(360deg); }
    }
      
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .chooseMode{
        background: none;
        border: none;
    }
    
    .chooseMode > .container{
        width: 100vw;
        height: 80vh;
        margin: 0px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        background: none;
        border: none;
    }
    
    .chooseMode > .container > div{
        width: 80%;
        height: 25%;
        margin: 5px 0;
        padding: 0;
        display: flex;
        background-color: var(--theme-color-bg-blur);
        flex-direction: row;
        justify-content: space-around;
        border: none;
    }
    
    .chooseMode > .container > div:hover{
        cursor: pointer;
        background-color: var(--theme-color-bg-blur-dark);
    }
    
    .chooseMode  label{
        width: 100%;
        text-align: center;
        font-size: x-large;
    }
    
    .chooseMode > .container label:hover{
        cursor: pointer;
    }

    .control{
        display: none;
    }
    
    #spin_device_img{
        width: 120px;
        height: 120px;
        display: block;
    }
    
    .spin_device_container{
        display: flex;
        vertical-align: middle;
    }
}