/* Import Google Fonts */ @import url('fonts.googleapis.com/css2?family=Fira+Code&family=Roboto&family=Playfair+Display&display=swap');

:root {

--main-theme-color: #454545;
--text-color: #6c757d;

}

}

/*

* Basic setup for body
*/

body, html {

font-family: "Roboto", sans-serif;
margin: 0;
padding: 0;
min-height: 100vh;

}

img {

max-width: 100%;

}

/*

* Basic typography setup
*/

a {

color: #454545;
font-size: 0.995rem;
margin: 5px 0;
text-decoration: none;
-webkit-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;

} a:hover {

opacity: 0.8;

}

code {

font-family: "Fira Code", monospace;

}

.display-1 {

font-family: "Playfair Display", sans-serif;
margin-top: 4rem;

} .display-1 a {

color: white;
display: block;
font-size: 5rem;
word-wrap: break-word;

}

.text-muted {

color: #6c757d;

}

/*

* Flex layout
*/
.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

}

/*

* Styles for menu
*/

.menu {

background-color: var(--main-theme-color);
-webkit-box-flex: 1;
    -ms-flex: 1;
        flex: 1;

}

.menu .menu-content {

-webkit-box-align: end;
    -ms-flex-align: end;
        align-items: flex-end;
color: white;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 1.2rem;
padding: 45px;
position: -webkit-sticky;
position: sticky;
top: 0;
left: 0;
height: 100vh;

}

/* Navigation links */ .menu .nav-link {

color: white;
font-size: 0.995rem;
display: block;

}

/*

* Styles for content
*/

.content-container {

-webkit-box-flex: 3;
    -ms-flex: 3;
        flex: 3;
padding: 30px 60px;

}

.content {

color: #808080;
line-height: 1.5;

}

.content a {font-size: 0.995rem;}

.content blockquote {

background-color: #f1f1f1;
color: var(--text-color);
margin: 0;
padding: 15px 30px;

}

.content dt {font-weight: 800;}

.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {

border-bottom: 1px solid #f1f1f1;
color: gray;
font-weight: 400;
margin: 15px 0;
padding: 5px 0;

}

.content h1 {

font-size: 2.5rem;

} .content h2 {

font-size: 2.4rem;

} .content h3 {

font-size: 2.3rem;

} .content h4 {

font-size: 2.2rem;

} .content h5 {

font-size: 2.1rem;

} .content h6 {

font-size: 2rem;

}

.content h1:before, .content h2:before, .content h3:before, .content h4:before, .content h5:before, .content h6:before {

color: #ccc;
margin-right: 10px;

} .content h1:before {

content: "#";
font-size: 2.2rem;

} .content h2:before {

content: "##";
font-size: 2.1rem;

} .content h3:before {

content: "###";
font-size: 2rem;

} .content h4:before {

content: "####";
font-size: 1.9rem;

} .content h5:before {

content: "#####";
font-size: 1.8rem;

} .content h6:before {

content: "######";
font-size: 1.7rem;

}

.content :not(pre) > code {

font-size: 0.98rem;
font-style: italic;
word-wrap: break-word;

}

.content pre > code {

border-radius: 15px;
font-size: 0.95rem;
padding: 15px 30px;
white-space: pre-wrap;

}

.content table {

border: 1px solid #f1f1f1;
border-collapse: collapse;
overflow-x: scroll;
min-width: 100%;

}

.content thead > tr, .content tr:nth-child(even) {

background-color: #f1f1f1;

}

.content th {

font-weight: 700;

} .content th, .content td {

padding: 14px 28px;
text-align: left !important;

}

.content ul {

margin: 0;

}

/*

* Styles for footer
*/

.footer {

border-top: 1px solid #dee2e6;
color: #808080;
margin: 45px 0 15px 0;
padding: 15px;
text-align: center;

}

/* Styling for desktop */ @media screen and (min-width: 1200px) {

.content-container {
    padding: 60px 120px;
}

}

@media screen and (min-width: 992px) {

.menu {
    min-height: 100vh;
}

.content-container {
    -webkit-box-shadow: 0 4px 8px 0 var(--main-theme-color);
            box-shadow: 0 4px 8px 0 var(--main-theme-color);
}

}

/* Styling for mobile */ @media screen and (max-width: 991px) {

.display-1  {
    margin: 2rem 0;
}

.row {
    display: block;
}

.menu .menu-content {
    padding: 25px;
    height: 100%;
}

.content-container {
    padding: 25px;
}

.content h1 {
    font-size: 2rem;
}
.content h2 {
    font-size: 1.95rem;
}
.content h3 {
    font-size: 1.9rem;
}
.content h4 {
    font-size: 1.85rem;
}
.content h5 {
    font-size: 1.8rem;
}
.content h6 {
    font-size: 1.75rem;
}

}