/* MAIN LOOK OF PAGE */
.image {
  display: block;
  height: auto;
}

body {
  font-size: 100%;
  text-align: center;
  margin-top: 30px;
  font-family: optima, sans-serif;
  background-attachment: fixed;
  background-image: linear-gradient(to bottom right, #76b2e3, #51558c);
}

.main {
  padding: 10px;
	width: 950px;
	float: none;
	background: #FFFFFF;
  img {
    margin: auto;
    padding: 5px;
  }
}
  
.nav {
  padding: 10px;
	background-color: #FFFFFF;
	width: 200px;
  border-radius: 15px;
	margin: 0px;
	float: none;
}

.menubutton {
  background-color: #000000;
  color: white;
  text-transform: uppercase;
  font-weight: bold;
  display: inline-block;
  font-size: 1.5em;
  padding: 10px 15px 10px 15px;
  margin-bottom: 5px;
  width: 70%;
}

.menubutton:hover {
	opacity: 0.7;
}

/* LOOK OF SECTIONS */

#header {
  background: #FFFFFF;
  text-align: center;
  margin-top: 20px;
}

#content {
  background: #FFFFFF;
  margin: auto;
  width: 700px;
  padding: 15px;
  float: none;
}

#content img {
  max-width: 700px;
  display: block;
}

#contenttext {
  margin: 5px;
}

#menu, #recentpostlistdiv {
  background: #FFFFFF;
  padding: 0px;
  margin: 0px;
  margin-bottom: 20px;
}

#menu img {
  width: 170px;
}

#menu img:hover {
  opacity: 0.7;
}

aside {
  width: 200px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
  padding: 10px;
  background: #F9E5E5;
  background-size:100% 100%;
  float: right;
}

#columns {
  margin: auto;
  padding-left: 0px;
  padding-right: 0px;
  float: none;
  column-count: 2;
  column-gap: 25px;
}

#footer {
  font-size: 1em;
  padding: 15px;
  color: #FFFFFF;
  text-align: center;
}




/* LOOK OF TEXT */

h1 {
  text-align: center;
}

h2 {
  text-align: center;
}

h3 {
  text-align: left !important;
  border-bottom: solid;
  padding: 10px;
  margin: 10px;
}

h4 {
  text-align: center;
}

h5 {
  text-align: center;
}

h6 {
  text-align: center;
}

a {
  color: #51558c;
  text-decoration: none;
}

a:hover {
  color: #76b2e3;
  cursor: pointer;
}

ul {
  list-style-position: outside;
  margin-left: 20px;
  padding: 0px;
}

#caption {
  background: #c9e1f4;
  padding: 10px;
}




/* LOOK OF IMAGES */

#bans a {
  opacity: 1;
}

#bans a:hover {
  opacity: 0.7;
}

.roundimage {
  position: relative;
  z-index: 2;
  border-radius: 15px;
}


/*----------*/
/* ZONELOTS */
/*----------*/


/* STRUCTURE */
#skip-link {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	color: var(--back-colour);
	background-color: var(--fore-colour);
	clip-path: inset(50%);
	&:focus {
		clip-path: unset;
	}
}
#container {
	margin: 3rem auto;
	max-inline-size: 750px;
	border-inline: var(--line);
	& > * {
		padding-inline: 1rem;
	}
}
.flex-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding-inline-start: 0;
	list-style-type: "";
}

/* TEXT */
details {
	margin-block: 1rem;
}
summary {
	cursor: pointer;
	margin-inline-start: -1rem;
	& + * {
		margin-block-start: 0;
	}
}



/* POST LISTS */
.post-list {
	padding-inline-start: var(--gap);
	list-style-type: "";
	text-indent: calc(-1 * var(--gap));
	font-size: var(--interface-font-size);
}
#tag-index {
	padding-inline-start: 0;
	list-style-type: "";
	details {
		margin-block: 0;
	}
	[open] {
		margin-block-end: 1rem;
	}
	summary {
		font-size: var(--interface-font-size);
	}
}
#all-posts {
	td {
		padding: 5px;
	}
}

/* POSTS */
#post-tags {
	margin-block: 0;
	& > li:not(:last-child)::after {
		content: ",\a0"; /* comma + non-breaking space */
	}
	a::before {
		content: "#";
	}
}
#post-nav > ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap);
	padding-inline-start: 0;
	list-style-type: "";
	& > :first-child > a::before {
		content: "\2190 \a0"; /* left arrow + non-breaking space */
	}
	& > :last-child {
		text-align: right;
		a::after {
			content: "\2192 \a0"; /* right arrow + non-breaking space */
		}
	}
}