/*footer flex box*/

	.flex-container {
  	display: flex;
	}

	.flex-container > div {
  	padding: 15px;
	}

	@media (max-width: 905px) {
  		.flex-container {
    		flex-direction: column;
  		}
	}


	/*dark mode*/

        @media (prefers-color-scheme: dark){
                body {
                        background:#000
                }
        }




        body{
                margin:1em auto;
                max-width:50em;
                /* padding:0 .62em 3.24em; need to restore the padding just not for the top bar!!*/
                font:1.2em/1.62 serif
        }
        h1,h2,h3 {
                line-height:1.2
        }



        @media print{
                body{
                        max-width:none
                }
	}



	/* navbar */
	.topnav {
  		overflow: hidden; 
  		background-color: rgb(255, 157, 240);
		/* new */
		width: 100%;
		/*960px*/
		position: fixed; 
		top: 0;
		transition: top 0.3s; 

	}

	.topnav a {
  		float: left;
  		display: block;
  		color: #000;
  		text-align: center;
  		padding: 14px 16px;
  		text-decoration: none;
  		font-size: 17px;
	}

	.topnav a:hover {
  		background-color: #ddd;
	  	color: black;
	}

	.topnav a.active {
  		background-color: rgb(255, 157, 240);
  		color: black;
	}

	.topnav .icon {
  		display: none;
	}

	@media screen and (max-width: 600px) {
  		.topnav a:not(:first-child) {display: none;}
  		.topnav a.icon {
    			float: right;
    			display: block;
  		}
	}

	@media screen and (max-width: 600px) {
  		.topnav.responsive {position: relative;}
  		.topnav.responsive .icon {
    			position: absolute;
    			right: 0;
    			top: 0;
  		} 
  		.topnav.responsive a {
    			float: none;
    			display: block;
    			text-align: left;
  		}
	}