leilukin-site/main.css

:root {
    --header-image: url('/assets/Leilukins-Hub-website-banner.png');
    --body-bg-image: url('/assets/starsforever.gif');
    --content: #43256E;
    --title-border: #d3aad5;
    --code-bg: #241445;
    --code-border: #82668f;
}

@font-face {
    font-family: 'Nunito';
    src: url('/assets/fonts/Nunito-VariableFont_wght.ttf') format("truetype");
    font-weight: 125 950;
    font-stretch: 75% 125%;
    font-style: normal;
  }

@font-face {
    font-family: 'Nunito';
    src: url('/assets/fonts/Nunito-Italic-VariableFont_wght.ttf') format("truetype");
    font-weight: 125 950;
    font-stretch: 75% 125%;
    font-style: italic;
}

html,
body {
	scroll-behavior: smooth;
}

body {
    font-family: 'Nunito', Arial, sans-serif;
    font-size: 1rem; /* 16px */
    margin: 0;
    background-color: #08031A;
    background-size: 4rem;
    color: #fceaff;
    background-image: var(--body-bg-image);
    background-attachment: fixed;
    line-height: 1.6;
}

* {
    box-sizing: border-box;
}

h1 {
    color: #ED64F5;
}

h2, h3 {
    color: #e8b86f;
}

h1 {
    font-size: 2.2rem;
    border-bottom: 0.18rem solid var(--title-border);
    padding-bottom: 0.5rem;
}

h1:not(:first-child) {
    padding-top: 2rem;
}

h2 {
    font-size: 1.7rem;
}

strong {
    color: #ff9933;
}

span.monospace {
    font-family: monospace;
    border: 0.06rem solid var(--code-border);
    padding: 0.125rem 0.3rem;
    margin-left: 0.125rem;
    margin-right: 0.125rem;
    background-color: var(--code-bg);
}

.code-snippet {
    background-color: var(--code-bg);
    border: 0.06rem solid var(--code-border);
	display: block;
	padding: 0.5em;
	overflow-x: auto;
	word-break: break-all;
}

.box {
    background-color: #13092D;
    border: 0.06rem solid #ED64F5;
    padding: 0.625rem;
}

.full-width-youtube-video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
  }
  
.full-width-youtube-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* CONTAINER for wrapping the entire website */
#container {
    max-width: 1100px;
    /* the width of the layout */
    /* if you change the above value, scroll to the bottom
and change the media query according to the comment! */
    margin: 0 auto;
    /* this centers the entire page */
}

/* For all links on your page EXCEPT for the navigation */
#container a {
    color: #ED64F5;
    font-weight: bold;
}

#header {
    width: 100%;
    background-color: #13092D;
    height: 22rem;
    background-image: var(--header-image);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

/* NAVIGATION SECTION */
#navbar {
    height: 2.5rem;
    background-color: #13092D;
    width: 100%;
}

#navbar ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-evenly;
}

#navbar li {
    padding-top: 0.625rem;
}

#navbar li a {
    color: #ED64F5;
    /* navbar text color */
    font-weight: 800;
    text-decoration: none;
    /* this removes the underline */
}

#navbar li a:hover {
    color: #a49cba;
    text-decoration: underline;
}

#flex {
    display: flex;
}

/* EXTRAS */
#topBar {
    width: 100%;
    height: 1.875rem;
    padding: 0.625rem;
    font-size: smaller;
    background-color: #13092D;
}

/* MAIN CONTENT AREA, between the sidebars */
main {
    background-color: #3d2163;
    font-size: 1.2rem;
    flex: 1;
    padding: 1.25rem;
    order: 2;
}

/* This colors BOTH sidebars
If you want to style them separately,
create styles for #leftSidebar and #rightSidebar */
aside {
    background-color: #241445;
    width: 12.5rem;
    padding: 20px;
    font-size: smaller;
    /* this makes the sidebar text slightly smaller */
}

aside h1, aside h2, aside h3 {
    margin-bottom: 0;
}

aside ul {
    margin-top: 0.5rem;
}

aside .box ul {
    padding-left: 0.625rem;
  }
  

#leftSidebar {
    order: 1;
}

#rightSidebar {
    order: 3;
}

.sidebar-content {
    position: sticky;
    top: 0;
    font-size: 0.9rem;
}

/* TABLE OF CONTENTS */

.toc-title {
    font-size: 1.3rem;
    font-weight: bold;
}

.toc-list {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    font-size: 1rem;
}

.toc-list li {
    margin-bottom: 0.5em;
}


/* SIDEBAR NAVIGATION LINKS */

.nav-links {
    padding-left: 1.25rem;
    font-size: 1rem;
    margin-top: 0;
    list-style-image: url(./assets/arrow-list.png);
}

footer {
    background-color: #13092D;
    width: 100%;
    height: 2.5rem;
    padding: 0.625rem;
    text-align: center;
    margin-top: 0;
}


/* MEDIA QUERY STARTS HERE */

/* To keep things responsive,
if you want to change the width of your page,
take your new width of the #container, and then subtrack it by 100.
Use this new number as the "max-width" value below */

@media only screen and (max-width: 1000px) {
    #flex {
        flex-wrap: wrap;
    }

    aside {
        width: 100%;
    }

    /* the order of the items is adjusted here for responsiveness.
    since the sidebars would be too small on a mobile device. */
    main {
        order: 2;
    }

    #leftSidebar {
        order: 3;
    }

    #rightSidebar {
        order: 1;
    }

    #navbar ul {
        flex-wrap: wrap;
    }
}