* {
    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    font-weight: 400;

    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
    margin:0px;
    margin-bottom:100px;
}

b {
    font-weight: 700;
}

#warning {
    background: #f0f0f0;
    border-radius: 10px;
    padding: 5px 7px;
    margin: 10px;
    text-align: center;
    letter-spacing: -0.03em;
    font-size: 10pt;
}
main {
    display: flex;
    flex-direction: column;
    align-items: center;

}
#content {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 30px;
    width:100%;
    justify-content: center;
}

#right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


#logo {
    width:100%;
    display: flex;
    flex-direction: row;
    align-items:flex-end;

}
#logo_text {
    margin-left:34px;
    margin-bottom:10px;
}

#explain_1 {
    margin:60px 0px 60px 0px;
}

#explain_2_container {
    background: center no-repeat url('../img/en/explain_2.svg') #f0f0f0;
    height:96px;
    
    min-width: 273px;
    max-width: 339px;
    width:calc(100% - 40px);
    margin:0px 20px;
    border-radius: 20px;
    

}


#download_app {
    background: center no-repeat url('../img/en/app_download_button.svg') #2F65F4; 
    border-radius: 20px;
    min-width: 273px;
    max-width: 339px;
    width:calc(100% - 40px);
    margin:0px 20px;
    height:78px;
    border:0px;
    margin-top:20px;
}
#download_app:focus,
#download_app:active {
    background-color: #1541bc;
}

#download_description {
    margin-top:10px;
}

.rounded-video {
    border-radius: 30px; /* Adjust this value to change the roundness */
    width: 100%; /* Adjust the width as needed */
    max-width: 300px; /* Sets a maximum width for the video */
    outline: none; /* Optional: Removes outline when focused */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: Adds shadow for better visibility */
}

#disclaimer {
    position: fixed;
    bottom:0px;left:0px;right:0px;
    text-align: center;
    font-size: 9pt;
    background-color: #eee;
    padding:10px 10px;
    letter-spacing: -0.03em;
}


@media (max-width:850px) {
    /* for mobile */
    
    #content {
        flex-direction: column;
        justify-content: stretch;
    }
    #right {
        width:100%;
    }
    #logo {
        margin-top:70px;
        justify-content: space-between;
    }
    #logo_image {
        align-self: flex-start;
        height:63px;
        display: flex;
        flex-direction: column;
        justify-content: start;

    }
    #logo_text {
        align-self:flex-end;
        margin-right:20px;
        height:34px;
    }
}