html {
	background-color: #1d1d52;
	background-image: url("/img/background.png");
	background-repeat: repeat-x;
	background-attachment: fixed;
	background-size: contain;
	scroll-behavior: smooth;
}
body {
	margin: 0 auto;
	max-width: 780px; /* 800x600 */
	*width: 780px; /* IE 6 */
        font-family: "overpass", sans-serif;
        font-weight: 500;
}
hr {
	border: 1px solid #eee;
}
a img {
	border: none;
}
a {
	color: #7278fb;
}

/* Header */
.header {
        height: 118px;
	color: #fff;
	margin-bottom: 0px;
	padding-left: 10px;
	padding-right: 10px;
}
.header h1 {
	/* margin: 0px; */
	padding-bottom: 20px;
	text-align: center;
	/* font-size: 50px; */
	text-transform: 0px;
	margin-bottoM: 0px;
}
.header img {

	/* margin-top: 1em; */
	transition:.3s;
}

.header img:hover {
	filter: brightness(150%);
	cursor: pointer;
}

.header p {
	text-align: right;
	margin: 0;
}

/* Main body */
.content {
	float: left;
	background-color: #fff;
	*width: 630px; /* IE 6 */
	padding: 14px;
	padding-top: 0px;
	*padding-top: 14px; /* IE 6 */

	border-radius: .5em;
	margin-bottom: 1em;
}

/* Front page content */
.container {
	list-style: none;
	padding: 0px;
}
.home {
    display: flex;
}
.home h2 {
  margin-top: .2em;
}
/* Manifesto */
.manifesto {
    width: 100%;
    border-left: #eee 2px solid;
    padding-left: 1em;
}
.manifesto p {
        font-family: "overpass-mono", monospace;
        font-weight: 400;
        font-size: 10pt;
}
.posts {
	float: right;
	margin-left: 10px;
	padding-left: 8px;
	*padding-bottom: 8px; /* IE 6 */
	border-left: 2px solid #eee;
}
.posts p {
	font-family: monospace;
}
.updates {
    width: 100%;
    margin-right: 1em;
}
.updates ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
.updates ul li { margin-bottom: 8px; }

/* Users page content */
.username::before { content: "username: "; }
.pronouns::before { content: "pronouns: "; }
.username, .pronouns, .role {font-size: 10pt;}

.users {
	display: flex;
    flex-wrap: wrap;
    margin: auto;
}

.infobox {
	width: 45%;
	padding: 10px;
	margin: 0;
	padding-bottom: 2em;
}
.infobox h3, .infobox h4, .infobox p {
	margin: 0;
	margin-bottom: 4px;
}
.infobox h4 { clear: both; }
.infobox p {margin-bottom: 10px;}
.infobox a {text-decoration: none;
	color: #7278fb;
}
.infobox img {
	width: 72px;
	height: 72px;
	float: left;
	margin: 0 10px 10px 0;
	border: solid 2px black;
	box-shadow: 1px 1px 2px #00000050;
}
.infobox ul{ margin: 0; padding-left: 30px; }

/* Foot buttons */
.buttons {
	display: flex;
	float: right;
	margin: 0;
	padding: 0;
	list-style-type: none;
	flex-wrap: wrap;
	justify-content: flex-end;
}

/* Top navigation */
.topnav {
	display: flex;
	overflow: hidden;
	height: 30px;
	justify-content: flex-end;
	*margin-left: 300px;
}
.topnav a {
	float: left;
	display: block;
	color: #b2b3cb;
	text-align: right;
	padding: 5px 14px;
	text-decoration: none;
	font-size: 17px;
	transition: color .2s ease;
}

.topnav a:hover { color: white; }
.topnav a.active {
	color: #87e881;
	border-bottom: 2px #87e881 solid;
	margin-bottom: 2px;
}
.topnav .icon { display: none; }

/* Footer */
.foot {
        font-size: 10pt;
	clear: both;
	color: #000;
	background-color: #fff;
	text-align: center;
}
.foot img {
  image-rendering: crisp-edges;
  image-rendering: pixelated;
	vertical-align: text-bottom;
	margin-right: 2px;
	margin-top: 4px;
}

.foot #copy {
	padding: 0px;
        margin: 0px;
}

.links { margin-bottom: 0; }
.left {float: left;}
.right {float: right;}

/* Mobile stuff */
@media screen and (max-width: 780px) {
	.content {
		border-radius: 0;
		margin-bottom: 0;
	}
	.home {
	    flex-direction: column;
	}
	.manifesto {
	    padding-left: 0;
	    border-left: none;
	}
	.updates {
	    padding-right: 0;
	}
	.infobox {border-right: 0px;}
}

@media screen and (max-width: 600px) {
    .header {
        margin-bottom: 30px;
    }
    .topnav {
	transition: height .3s ease;
        position: relative;
        height: 37px;
        display: block;
        background-color: #2e307b;
        border-top: #3d46a4 2px solid;
        border-bottom: #3d46a4 2px solid;
    }
    .topnav.responsive {
        height: calc(39px * 7); 
    }
    .topnav a {
        font-size: 25px;
        float: none;
        display: block;
        text-align: right;
        margin-right: 3ex;
    }
    .topnav a:not(.active) {
        display: none;
    }
    .topnav a.icon {
        display: block;
        width: 1ex;
        position: absolute;
        color: white;
        right: 0;
        top: 0;
        margin-right: 0;
    }
    .topnav a.active {
        color: white;
        border-bottom: 0px;
    }
    .topnav.responsive a {
        display: block;
    }
    .topnav.responsive a.active {
        color: #87e881;
    }

    .infobox {
        width: 330px;
        height: auto;
        padding-left: 0px;
        padding-right: 0px;
    }
    .buttons {float: left;justify-content: space-evenly;}
    .buttons img {width: 88px;}
    .manifesto {border-left: 0 !important;}
}

/* Dark mode (experimental) */

@media (prefers-color-scheme: dark) {
	hr {
	border: 1px solid #1a1a4a;
	}
	.manifesto {
	border-left: 2px solid #1a1a4a;
	}
	.content, .foot {
	background-color: #09091a;
	color: #fff;
	}
        .infobox img {
          border: 2px solid white;
	box-shadow: 0px 0px 4px #fff; }
}