* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    margin-right: 120px;
    overflow: hidden;
    color: beige;

}

/* Navbar */
nav {
    width: 120px;
    height: inherit;
    position: absolute;
    right: 0;
}

nav ul {
    height: 100%;
    list-style: none;
    display: flex;
    flex-direction: column;
}

nav li {
    width: inherit;
    height: 25%;
    flex: 1;
    align-content: center;
    justify-content: center;
}

.tab {
    width: 100%;
    height: 100%;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: title;
    font-size: 28px;
    color: beige;
    background-color: inherit;
    border-style: hidden;
}

/* other stuff */

.box {
    height: inherit;
    width: 100%;
    padding: 6vh;
    overflow-y: scroll;
    direction: rtl;
    scrollbar-width: auto;
    scrollbar-gutter: stable;
}

.box div {
    direction: ltr;
}

h1 {
    font-family: title;
    font-size: 52px;
    padding-bottom: 24px;
    padding-left: 20px;
    color: khaki;
}

h2 {
    font-family: title;
    font-size: 36px;
    padding-bottom: 12px;
    padding-left: 12px;
}

p {
    font-family: generic;
    font-size: 24px;
    line-height: 40px;
}

p a {
    font-family: title;
    font-size: 24px;
    line-height: 40px;
    color: khaki;
    text-decoration-line: none;
    border-bottom: 4px dotted khaki;
    padding: 4px;
}

mark {
    background-color: khaki;
    font-style: italic;
}

hr {
    margin: 24px;
    margin-left: 80px;
    margin-right: 120px;
    border: 2px solid orchid;  
}

img {
    max-height: 240px;
    border: 12px ridge orchid;
    margin: 20px;
}
img:hover {
    opacity: 0.8;
    transition: 300ms;
}


/* -------------------------------- */
/* attributes - make new file later */
/* -------------------------------- */

.bg-purple {
    background-color: mediumorchid;
    scrollbar-color: orchid darkorchid;
}
.bg-purple mark {
    color: darkorchid;
}
.bg-purple hr {
    border: 2px solid orchid;  

}

.bg-orange {
    background-color: coral;
    scrollbar-color: lightsalmon tomato;
}
.bg-orange mark {
    color: tomato;
}
.bg-orange hr {
    border: 2px solid lightsalmon;
}

.bg-green {
    background-color: mediumseagreen;
    scrollbar-color: darkseagreen seagreen;
}
.bg-green mark {
    color: seagreen;
}
.bg-green hr {
    border: 2px solid darkseagreen;
}

.bg-blue {
    background-color: mediumslateblue;
    scrollbar-color: slateblue darkslateblue;
}
.bg-blue mark {
    color: darkslateblue;
}
.bg-blue hr {
    border: 2px solid slateblue;
}

.hidden {
    display: none;
}

.golden {
    color: khaki;
}

/* fonts */
@font-face {
    font-family: title;
    font-weight: normal;
    src: url(fonts/starborn.otf);
}

@font-face {
    font-family: generic;
    font-weight: normal;
    src: url(fonts/futurahandwritten.ttf);
}