@import './google-font.css';
body{
    font-family:'Poppins', sans-serif;
}
.overlay{
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
}
@media (prefers-color-scheme:light){
    :root{
        --icon-color:black;
    }
    body{
        color:black;
        background:white;
    }
    .text-bg{
        color:black;
        background-color:rgba(255, 255, 255, 0.7);
        padding:24px;
        border-radius:36px;
        -webkit-backdrop-filter:blur(2px);
        width:90%;
        backdrop-filter: blur(5px) saturate(1.5);
    }
    .codes{
        padding:8px;
        background-color:#ffffff96;
        overflow-x:auto;
        width:100%;
    }
    table tr:nth-child(odd){
        background:#ffffff96;
    }
    table tr:nth-child(even){
        background:#F5FAFA96;
    }
    table td, table th{
        border:1px solid #cad9ea96;
        height:30px;
        padding:8px;
    }
    table thead th{
        background-color:#fae9c396;
    }
}
@media (prefers-color-scheme:dark){
    :root{
        --icon-color:white;
    }
    body{
        color:white;
        background:black;
    }
    .text-bg{
        color:white;
        background-color:rgba(0, 0, 0, 0.7);
        padding:24px;
        border-radius:16px;
        backdrop-filter:blur(4px);
        -webkit-backdrop-filter:blur(4px);
        width:90%;
    }
    .codes{
        padding:8px;
        background-color:#00000096;
        overflow-x:auto;
        width:100%;
    }
    table tr:nth-child(odd){
        background:#00000096;
    }
    table tr:nth-child(even){
        background:#191d1d96;
    }
    table td,table th{
        border:1px solid #CCE8EB96;
        height:30px;
        padding:8px;
    }
    table thead th{
        background-color:#cad9ea96;
    }
    code{
        color:#fdfdfd !important;
    }
}
.input_control{
    width:90%;
    margin:20px auto;
}
table{
    white-space:nowrap;
    border-collapse:collapse;
    width:100%;
}
p{
    line-height:2;
}
a{
    color:#46c5f7;
    white-space:nowrap;
}
#nahida{
    height:32px;
    vertical-align:middle;
}
@media only screen and (max-width:450px){
    #nahida{
        height:26px;
        vertical-align:middle;
    }
    h1{
        font-size:26px;
    }
}
.scroll {
    overflow: auto;
}
@media only screen and (max-width:1000px){
    .scroll{
        overflow-x:scroll;
    }
    table{
        width:810px;
    }
}
@media only screen and (max-width:1175px){
    .scroll{
        overflow-x:auto;
        width:100%;
    }
    table{
        border-collapse:collapse;
    }
}