* {
              box-sizing: border-box;
            } 
            
            h3 {
                text-align: left;
                border: 2px dotted white;
                border-radius: 10px;
                padding: 5px;
                margin: 0;
                width: 100%;
            }
            
            h4 {
                padding: 10px;
                padding-bottom: 0px;
                margin-bottom: 0px;
            }
            
            p {
                margin: 0px;
                padding: 10px;
                margin-top: 10px;
                margin-bottom: 10px;
            }


            body {
                background-color: black;
                font-family: "Times New Roman", Times, serif;
                color: white;
                display: grid;
                justify-content: center; 
                align-items: center; 
            }

            #bgmusic {
                position: absolute;
                width: 1px;
                height: 1px;
                opacity: 0;
                pointer-events: none;
                        }

            /* width */
            ::-webkit-scrollbar {
                width: 6px;
            }

            /* Track */
            ::-webkit-scrollbar-track {
                box-shadow: inset 0 0 5px grey; 
                border-radius: 10px;
                background: white; 
            }

            /* Handle */
            ::-webkit-scrollbar-thumb {
                background: #363636; 
                border-radius: 10px;
            }

            /* Handle on hover */
            ::-webkit-scrollbar-thumb:hover {
                background: gray; 
            }

            .sidebar-left a {
                text-decoration: none;
                color: white;
                
            }

            .sidebar-left a:hover {
                text-decoration: underline;
                color: gray;
            }
            
            .container {
                background-clip: padding-box;
                background-size: 200px 200px;
                border: white 3px ridge;
                height: 900px;
                width: 630px;
                align-items: center;
                justify-content: center;
                grid-column-gap: 10px;
                padding: 5px 0;
                display: grid;
                grid-template-areas: 
                    "content"
                    "footer";
            }
            
            .main-header {
                grid-area: header;
                color: black;
                border: white 3px ridge;
                height: 110px;
                width: 600px;
                padding: 25px;
                padding-top: 20px;
                color: white;

            }
            
            
            .sidebar-left {
                grid-area: sidebarleft;
                border: white 3px ridge;
                height: 750px;
                width: 120px;
                overflow-y: hidden;
                align-content: start;
                justify-items: center;
                padding: 15px;
                
            }
            
            .content {
                grid-area: content;
                border: white 3px ridge;
                height: 750px;
                width: 600px;
                align-content: start;
                justify-items: start;
                text-align: left;
                display: grid;
                overflow-x: hidden;
                overflow-y: auto;
                overflow-wrap: break-word;
                padding: 10px;
            }
            
            .content img {
                justify-items: center;
                margin: 0px auto;
                margin-top: 10px;
                margin-bottom: 20px;
            }
            
            .content iframe {
                justify-items: center;
                margin: 0px auto;
                margin-top: 10px;
                margin-bottom: 20px;
            }
            
            .content a {
                justify-items: center;
                margin: 0px auto;
                margin-top: 0px;
                margin-bottom: 0px;
                text-decoration: none;
                color: white;
            }

            .content a:hover {
                text-decoration: underline;
                color: gray;
            }
            
            .sidebar-left a {
                margin-bottom: 10px;
                display: block; /* my bad */
            }

            .footer {
                grid-area: footer;
                color: black;
                border: transparent;
                height: 110px;
                width: 600px;
                padding: 0px;
                margin-top: 10px;
                color: white;
                overflow-y: auto;
            }

             h1 {
                margin: 10px;
            }


/* Template from w3schools */

        .collapsible {
            background-color: transparent;
            color: white;
            cursor: pointer;
            padding: 10px;
            margin: 0px;
            width: 600px;
            height: 3px;
            border: white 3px ridge;
            text-align: left;
            outline: none;
            font-size: 10px;
            justify-content: center; 
            align-items: center; 
        }

        .active, .collapsible:hover {
            background-color: gray;
        }

        .collapsible:after {
            content: '\002B';
            color: white;
            font-weight: bold;
            margin-left: 5px;
        }

        .active:after {
            content: "\2212";
        }

        .content2 {
            padding: 0 18px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
        }