:root {
    --page-color: #d2d2d2;
    --base-color: #000000;
    --navbar-width: 310px;
}

@font-face {
    font-family: 'Orchidea Pro';
    src: url('/static/font/Mint Type - Orchidea Pro Medium.otf');
}

* {
    font-family: 'Orchidea Pro', sans-serif;
}

body {
    margin: 0;
    font-weight: 300;
    background: var(--page-color);
    word-break: break-word;
}

html{
  height:100%;
}

main{
    min-height: calc(100vh - var(--header-height) - var(--footer-height));
    display: grid;
    grid-template-columns: 19.375rem minmax(200px, 1fr);
    gap: 0px 0px;
    grid-template-areas:
        "navbar_top main_page"
        "navbar_bottom main_page";
}

.main_page {
    max-height: 100%;
    padding: .75em;
    font-size: 1.3rem;
    border-left: 2px solid black;
    grid-area: main_page;
    overflow-x: hidden;
    background-color: var(--page-color);
}

button {
    border: none;
}

.main_page img {
    width: 100%;
}

#navbar {
    border-right: 1px solid black;
    width: var(--navbar-width);
    position:relative;
    height: 100%;
}

div {
  outline: none;
}

strong, b {
  font-weight: bold;
}

@media (max-width: 850px) {

    :root {
        --navbar-width: 25vw;
    }

    .main_page {
        font-size: .85rem;
    }
    .main_page img {
        max-width: 200px;
    }

    main {
        grid-template-columns: var(--navbar-width) minmax(200px, 1fr);
    }
}