h1{
    font-size:xx-large;
}
h2 {
    color: var(--primary-text-color);
    text-align: center;
}

html{
    background-color: white;
}
.main{
    font-family: Roboto, Helvetica, sans-serif;
    font-size:x-large;
    margin:0 auto;
    background-color:var(--app-bg-color);
    max-width:1920px;
}
@media(max-width:576px){
    .main{
        font-size:large;
    }
}

.modal-footer{
    font-family: Arial, sans-serif;
}

#content{
    height:100vh;
    width:100%;
    overflow-x: hidden;
    overflow-y: auto;
}


.hide-line-break {
    border-color: transparent;
    }

#accessibility-toggle:checked{
    background-color: #909098 !important;
    border-color:#c8c8cc !important;
}
#accessibility-toggle:focus{
    border-color: transparent !important;
    box-shadow: 0 0 0 0.12rem #c8c8cc;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e")
}
#accessibility-toggle:focus:checked{
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")

}
#accessibility-toggle-label{
    margin-left: 1rem;
    color:var(--primary-text-color);
}
@media(max-width: 320px){
    #accessibility-toggle-label{
        font-size: 20px;
        margin-top: 0.2rem;
    }
}