:root {
    --sidebar-large-w: 20rem;
    --second: #676778;
}

ul {
    padding: 0 10px;
}

.viewport {
    box-sizing: border-box;
}

.tutorial-page {
    width: 100%;
    height: 100%;
}

.tutorial-content-wrapper {
    width: 100%;
    height: 100%;
}

.tutorial-outer {
    width: 100%;
    min-height: 100%;
    height: 100%;
    display: grid;
    position: relative;
    grid-template-columns: minmax(30%, var(--sidebar-large-w)) auto;
    grid-auto-rows: 100%;
    transition: none;
    overflow: hidden;
}

.tutorial-text {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    /* border-right: 1px solid #ddd; */
    background: rgb(0 161 223 / 10%);
}

.tutorial-text pre {
    font-size: 0.8em;
}

.tutorial-text::-webkit-scrollbar {
    background-color: var(--color-bg-hero-dark);
    width: 8px;
}

.tutorial-text::-webkit-scrollbar-thumb {
    background-color: rgb(159 194 209 / 50%);
}

.tutorial-content {
    position: absolute;
    padding: 30px 20px;
}

.top-nav {
    position: sticky;
    display: flex;
    justify-content: space-between;
    align-items: center;
    top: 0;
    margin: 0;
    background: rgb(229 245 252);
    padding: 0 10px;
    /* border-bottom: 1px solid silver; */
    border-bottom: 1px solid rgb(238, 238, 238);
    border-top: 1px solid rgb(238, 238, 238);
    z-index: 5;
}

.top-nav select {
    height: 30px;
    margin: 0;
    width: 100%;
}

.tutorial-outer.collapsed .top-nav select {
    display: none;
}

.collapse-btn {
    text-align: right;
    margin: 13px 0px;
    width: 100%;
    height: 20px;
}

.collapse-btn svg {
    cursor: pointer;
    height: 100%;
}
.collapse-btn svg:hover {
    background: #ddd;
    border-radius: 5px;
}

.tutorial-outer.collapsed {
    grid-template-columns: 24px auto;
}

.tutorial-outer.collapsed .tutorial-content {
    display: none;
}

.tutorial-outer.collapsed .tutorial-text {
    padding: 0;
}

.tutorial-outer.collapsed .collapse-btn {
    margin: 8px;
    transform: scaleX(-1);
}

.tutorial-nav {
    display: flex;
    justify-content: space-between;
}

tutorial-intro {
    display: block;
}

.tutorial-nav a {
    font-size: 1.2em;
    padding: 6px 2px 0 2px;
}

.tutorial-nav a.first {
    margin-left: auto;
}

.tutorial-nav a:hover {
    border-bottom: 1px solid;
    color: #333;
}