@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Devanagari:wght@100;200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Devanagari:wght@100;200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anek+Bangla:wght@100..800&family=IBM+Plex+Sans+Devanagari:wght@100;200;300;400;500;600;700&display=swap');


*[lang="hi"] {
    font-family: "IBM Plex Sans Devanagari";
}

*[lang="bn"] {
    font-family: "Anek Bangla";
}

:root {
    --canvas: #FFFFFC;
    --text: #242124;
}

body {
    font-family: 'Space Mono' , monospace;
    color: var(--text);
    background-color: var(--canvas);
    background-image: url(/img/cross.gif);
}

.container {
    margin: 6vh auto;
    width: 50vw;

}

@media screen and (max-width:768px) {
    .container {
        margin: auto;
        width: 95vw;
        height: 85vh;
    }
}


a {
    text-decoration: underline solid;
    color: var(--accent);
}

a:hover {
    background-color: var(--accent);
    color: var(--canvas);
}

a:visited {
    color: var(--dark);
}

a:visited:hover {
    color: var(--canvas);
}

li {
    margin-bottom: 2em;
}

p {
    padding: 0 2em;
    line-height: 1.5;
}

b {
    color: var(--accent);
}

i {
    color: var(--dark);
}

hr {
    border: none;
    background-image: url(/img/rule.gif);
    height: 3px;
    width: 300px;
    margin-bottom: 1em;
}

h1 , h2 , h3 , h4 , h5 , h6 {
    padding-left: 0.5em;
    font-weight: 400;
    color: var(--dark);
}
.tabs {
    position: relative;
    min-height: 82vh;
    /* This part sucks */
    clear: both;
    margin: 25px 0;
}

@media screen and (max-width:768px) {
    .tabs {
        height: 66vh;
    }
}

.tab {
    float: left;
}

.tab label {
    background: var(--canvas);
    padding: 10px;
    border: 1px solid var(--text);
    margin-left: -1px;
    margin-right: 7px;
    position: relative;
    left: 1px;
}

.tab label:hover {
    background-color: var(--dark);
    color: var(--canvas);
    border: 1px solid var(--canvas);
}

.tab [type=radio] {
    display: none;
}

.content {
    position: absolute;
    margin-top: 1em;
    top: 28px;
    left: 0;
    background: var(--canvas);
    right: 0;
    bottom: 0;
    padding: 0.2em;
    border: 1px solid var(--text);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--dark) var(--canvas);
}

[type=radio]:checked~label {
    background-color: var(--text);
    color: var(--canvas);
    border: 1px solid var(--canvas);
    z-index: 2;
}

[type=radio]:checked~label~.content {
    z-index: 1;
}

li p {
    padding: 0 1em 0 0;
}

blockquote {
    margin-left: 1rem;
    border-left: 1px solid var(--dark);
    padding-left: 1rem;
    line-height: 1.5;
}

.navi {
    float: right;
    margin-bottom: 2em;
}

.navi a {
    border: 1px solid var(--text);
    padding: 10px;
    background-color: var(--canvas);
    color: var(--text);
    text-decoration: none;
}

.navi a:hover {
    background-color: var(--dark);
    border: 1px solid var(--canvas);
}