:root {
                /* These variables exist so you can make quick and simple style changes without much CSS knowledge */

                @font-face {
                    font-family: "BN";
                    src: url('https://whitesun.neocities.org/assets/Helveti.ttf');
                }

                /* applies to all areas */
                --font-family: "MS UI Gothic";
                --font-size: 16px;
                --line-height: 1.3em;
                --font-color: #ebf2f7;
                --link-color: #80ccf8;
                --link-text-decoration: none;

                /* main content (between sidebars) */
                --content-padding: 10px;
                --content-bg-color: #091535;

                /* header */
                --header-height: 150px;
                --header-background: url('/assets/img/yv.png');
                --header-margin-bottom: 0px;

                /* sidebar */
                --sidebar-margin: 10px;
                --sidebar-width: 200px;
                --sidebar-padding: 15px;
                --sidebar-bg-color: #091535;

                /* footer */
                --footer-height: 30px;
                --footer-bg-color: #091535;


                /* container */
                --container-width: 950px;

                /* controls the gap between the content and the footer */
                --row-gap: 5px;

                /* To add scrollbars to your sidebars, just make the height a px value and change overflow to 'auto' */

                --sidebar-height: 100%;
                --sidebar-overflow: hidden;
                --background-image: url('/assets/bg/back.gif');
            }

            html,
            body {
                margin: 0;
                padding: 0;
                background-image: var(--background-image);
                font-family: var(--font-family);
                font-size: var(--font-size);
                line-height: var(--line-height);
                color: var(--font-color);
            }

            body a {
                color: var(--link-color);
                text-decoration: var(--link-text-decoration);
            }

            #main-container {
                max-width: var(--container-width);
                margin: 0 auto;
                background-color: var(--container-bg-color);
            }

            .flex {
                display: flex;
                margin-bottom: var(--row-gap);
            }

            .content-wrap {
                margin-top: var(--content-margin-top);
            }

            #content-container {
                width: 60%;
                margin-bottom: var(--row-gap);
                background-color: var(--content-bg-color);
                outline: 4px outset #02081b;
                border-radius: 5px
            }
            
            .navlink {
              font-size: 15px
            }
            
            audio {
              width: 160px;
              height: 30px;
              margin: 0;
              }

            #content-container3 {
                width: 100%;
                margin-bottom: var(--row-gap);
                background-color: var(--content-bg-color);
                outline: 4px outset #02081b;
                border-radius: 5px
            }
            
            #left-sidebar {
                width: var(--sidebar-width);
                margin-right: var(--sidebar-margin);
                margin-bottom: var(--row-gap);
                height: var(--sidebar-height);
                overflow: var(--sidebar-overflow);
                background-color: var(--sidebar-bg-color);
                outline: 4px outset #02081b;
                border-radius: 5px
            }


            #header-contained {
                height: var(--header-height);
                margin-bottom: var(--header-margin-bottom);
                background-image: var(--header-background);
                background-position: center center;
            }

            #footer {
                height: var(--footer-height);
                text-align: center;
                color: var(--font-color);
                background-color: var(--footer-bg-color);
                outline: 4px outset #02081b;
                border-radius: 5px
            }


            .wrapper {
                padding: var(--content-padding);
                padding-top: var(--sidebar-padding);
            }

            .sidebar-wrapper {
                padding: var(--sidebar-padding);
                height: var(--sidebar-height);
                overflow: var(--sidebar-overflow);
            }

            .footer-wrapper {
                padding: 5px;
            }

            /* To keep your site RESPONSIVE, make sure this variable matches the width for --container-width UNLESS --container-width is 100% - if it's 100%, you'll need to manually input a breakpoint. */
            @media only screen and (max-width: 900px) {
                .flex {
                    flex-wrap: wrap;
                }

                #left-sidebar {
                    display: block;
                    order: 2;
                    margin-right: 0;
                    margin-bottom: 10px;
                }


                #content-container {
                    width: 100%;
                    display: block;
                    order: 1;
                    margin-bottom: 10px;
                }

            }
            
            @-webkit-keyframes snowflakes-fall {
		0% {
			top: -10%
		}
		100% {
			top: 100%
		}
	}
	
	@-webkit-keyframes snowflakes-shake {
		0%,
		100% {
			-webkit-transform: translateX(0);
			transform: translateX(0)
		}
		50% {
			-webkit-transform: translateX(80px);
			transform: translateX(80px)
		}
	}
	
	@keyframes snowflakes-fall {
		0% {
			top: -10%
		}
		100% {
			top: 100%
		}
	}
	
	@keyframes snowflakes-shake {
		0%,
		100% {
			transform: translateX(0)
		}
		50% {
			transform: translateX(80px)
		}
	}
	
	.snowflake {
		position: fixed;
		top: -10%;
		z-index: 9999;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-animation-name: snowflakes-fall, snowflakes-shake;
		-webkit-animation-duration: 10s, 3s;
		-webkit-animation-timing-function: linear, ease-in-out;
		-webkit-animation-iteration-count: infinite, infinite;
		-webkit-animation-play-state: running, running;
		animation-name: snowflakes-fall, snowflakes-shake;
		animation-duration: 10s, 3s;
		animation-timing-function: linear, ease-in-out;
		animation-iteration-count: infinite, infinite;
		animation-play-state: running, running
	}
	
	.snowflake:nth-of-type(0) {
		left: 1%;
		-webkit-animation-delay: 0s, 0s;
		animation-delay: 0s, 0s
	}
	
	.snowflake:nth-of-type(1) {
		left: 10%;
		-webkit-animation-delay: 1s, 1s;
		animation-delay: 1s, 1s
	}
	
	.snowflake:nth-of-type(2) {
		left: 20%;
		-webkit-animation-delay: 6s, .5s;
		animation-delay: 6s, .5s
	}
	
	.snowflake:nth-of-type(3) {
		left: 30%;
		-webkit-animation-delay: 4s, 2s;
		animation-delay: 4s, 2s
	}
	
	.snowflake:nth-of-type(4) {
		left: 40%;
		-webkit-animation-delay: 2s, 2s;
		animation-delay: 2s, 2s
	}
	
	.snowflake:nth-of-type(5) {
		left: 50%;
		-webkit-animation-delay: 8s, 3s;
		animation-delay: 8s, 3s
	}
	
	.snowflake:nth-of-type(6) {
		left: 60%;
		-webkit-animation-delay: 6s, 2s;
		animation-delay: 6s, 2s
	}
	
	.snowflake:nth-of-type(7) {
		left: 70%;
		-webkit-animation-delay: 2.5s, 1s;
		animation-delay: 2.5s, 1s
	}
	
	.snowflake:nth-of-type(8) {
		left: 80%;
		-webkit-animation-delay: 1s, 0s;
		animation-delay: 1s, 0s
	}
	
	.snowflake:nth-of-type(9) {
		left: 90%;
		-webkit-animation-delay: 3s, 1.5s;
		animation-delay: 3s, 1.5s
	}
	
	.snowflake:nth-of-type(10) {
		left: 25%;
		-webkit-animation-delay: 2s, 0s;
		animation-delay: 2s, 0s
	}
	
	.snowflake:nth-of-type(11) {
		left: 65%;
		-webkit-animation-delay: 4s, 2.5s;
		animation-delay: 4s, 2.5s
	}