html {
    height: 100%;
    width: 100%;
}

body {
    height: 100%;
    width: 100%;
    background-color: darkseagreen;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* height: 5rem; */
    z-index: 10;
    background-color: #212529;
    box-shadow: 0px 2px 2px gray;
}

aside {
    position: fixed;
    /* top: 5rem; */
    bottom: 0;
    left: 0;
    padding: 4px;
}

main {
    display: flex;
    /* margin-top: 5rem; */
    padding: 4px;
}

.asideBody {
    /* display: flex; */
    height: 100%;
    width: 100%;
    overflow-y: auto;
    background-color: #343a40;
    border-radius: 10px;
    box-shadow: 2px 2px 6px gray;
}

.slideOverBody {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    background-color: #343a40;
    color: whitesmoke;
}

.sidebarInner {
    /* overflow-y: auto; */
    gap: 1rem;
    color: whitesmoke;

    a {
        color: whitesmoke;
    }
}

.mainBody {
    /* display: flex; */
    height: 100%;
    width: 100%;
    background:rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    box-shadow: 2px 2px 6px gray;
}

.hamburgerButton {
    display: flex;
    margin: 0.2rem;
    height: 100%;
    width: 3.5rem;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.1);
    border: 0px;
    border-radius: 2px;
    color: whitesmoke;
    font-size: xx-large;
    /* font-weight: bold; */
}

.hamburgerButton:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

/* 横幅が基準値未満の時 */
@media (min-width: 0px) {
    header {
        height: 3.5rem;
    }

    aside {
        top: 0;
        width: 0;
        visibility: hidden;
    }

    .hamburgerButton {
        visibility: visible;
    }

    main {
        margin-top: 3.5rem;
        margin-right: 0;
        margin-left: 0;
    }
}

/* 横幅が基準値以上の時 */
@media (min-width: 768px) {
    header {
        height: 5rem;
    }

    aside {
        top: 5rem;
        width: 18rem;
        visibility: visible;
    }

    .hamburgerButton {
        visibility: hidden;
    }

    main {
        margin-top: 5rem;
        margin-right: 0;
        margin-left: 18rem;
    }
}

@media (min-width: 1650px) {
    main {
        margin-right: 18rem;
    }
}

/* header text style */

/* h1 {
    font-size: xxx-large;
    font-weight: bold;
} */

/* h2 {
    font-size: xx-large;
    font-weight: bold;
} */

/* h3 {
    font-size: x-large;
    font-weight: bold;
} */

/* h4 {
    font-size: large;
    font-weight: bold;
} */

/* h5 {
    font-size: medium;
    font-weight: bold;
} */

/* list element style */

/* li {
    list-style: inside;
    list-style-type: circle;

    li {
        list-style: inside;
        list-style-type: square;
    }
} */

/* table */
table {
    /* border-collapse: collapse; */
    /* border: 1px solid gray; */

    thead, tfoot {
        background-color: rgba(0, 0, 0, 0.1);
    }

    tbody {
        background-color: rgba(255, 255, 255, 0.4);

        tr :hover {
            background-color: rgba(0, 0, 0, 0.1);
        }
    }

    tr {
    }

    th, td {
        border: 1px solid rgba(0, 0, 0, 0.5);
        text-align: center;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* markdown */

.mdContent {
    padding: 0.5rem;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 10px;

    pre {
        background-color: #212529;
        border-radius: 10px;
        color: whitesmoke;
        padding: 1rem;
    }
}