@import url('https://fonts.googleapis.com/css2?family=Glegoo:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

:root {
    --canvas: #f3ebd3;
    --text: #162603;
    --accent: #5E7053;
    --dark: #C33353;
}

*[lang="hi"] {
    font-family: "Glegoo";
}

*[lang="bn"] {
    font-family: "Hind Siliguri";
}

html {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--canvas);
}

html::-webkit-scrollbar {
    width: 10px;
}

html::-webkit-scrollbar-track {
    background: var(--canvas);
}

html {
    box-sizing: border-box;
}

body {
    background-color: var(--canvas);
    width: 55vw;
    font-family: 'IBM Plex Mono' , monospace;
    font-size: large;
    color: var(--text);
    margin: 1em auto;
} 

@media screen and (max-width: 768px) {
    body {
       width: 92vw;     
    }    
}

header {       
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

header > a {
    color: var(--accent);
}

header > a:hover {
    color: var(--dark);
    cursor: pointer;
}

nav ul {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 2vw;
    margin: 0;    
    list-style-type: none;
}

nav a {
    color: var(--accent);
    text-decoration: none;
}

nav a:hover {
    color: var(--dark);
    cursor: pointer;
}

#gecko {
    aspect-ratio: 1/1;
    width: 100px;
    background-image: url(/img/leafygecko.png);
    transform: rotate(90deg) scaleY(-1);
    position: absolute;
    top: 7vh;
    left: 71vw;
    z-index: 999;
}

footer {
    text-align: right;
    margin-top: 2em;
}

h1 , h2 , h3 , h4 , h5 , h6 {
    font-weight: 400;
}

h1 , h4 {
    color: var(--accent);
}

h2 , h5 {
    color: var(--dark);
}

h3 , h6 {
    color: var(--dark);
}

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

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

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

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

p {
    line-height: 1.5;
}

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

b {
    color: var(--dark)
}

table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 50vw;
    margin: auto;
}

@media screen and (max-width: 768px) {
    table {
        width: 88vw;
    }
}

td {
    border: 1px solid var(--accent);
    text-align: left;
    padding: 1em;
}