:root {
  --bg-primary: rgb(33, 33, 33);
  --surface-hover: #ffffff26;
  --text-primary: white;
}

html,
body {
	margin: 0;
	padding: 0;
	background-color: black;
	color: var(--text-primary);
	height: 100%;
	width: 100%;
}
body {
	font-family:
		-apple-system-body, 
		"ui-sans-serif", 
		-apple-system, 
		"system-ui", 
		Segoe UI, 
		Helvetica, 
		Apple Color Emoji, 
		Arial, 
		"sans-serif", 
		Segoe UI Emoji, 
		Segoe UI Symbol;
	font-size: 16px;
	display: flex;
	flex-direction: row;
}
h1,
h2 {
	margin: 0;
}
h2 {
	font-weight: normal;
}
strong {
	font-weight: 700;
}
button {
	border-radius: 15px;
	padding: 1em;
	cursor: pointer;
	background: none;
	border: none;

	&.button-black {
		color: white;
		background: black;
		border: solid 1px var(--surface-hover);

		&:hover {
			background: var(--surface-hover);
		}
	}

	&.button-white {
		color: black;
		background: white;
		border: solid 1px var(--surface-hover);
	}

	&.button-naked {
		color: white;
		background: black;
		position: relative;
		padding-right: 25px;

		&:after {
			content: 'ˇ';
			font-size: 3em;
			position: absolute;
			right: 5px;
			bottom: -13px;
			font-weight: 100;
			opacity: 0.5;
		}

		&:hover {
			background: var(--surface-hover);
		}
	}

	&.button-circle {
		border-radius: 50%;
		height: 36px;
		width: 36px;
		display: inline-block;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
a {
	color: inherit;
	underline: solid 1px inherit;
}

.horizonal-centered {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

main,
aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
}

aside {
	width: 280px;
	border-right: solid 1px rgba(255, 255, 255, 0.1);
	font-size: 0.875em;
}

[data-header="column"] {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;

	button {
		height: 20px;
		width: 20px;
		margin: 8px;
		padding: 8px;
		display: inline-block;
		border-radius: 6px;
		cursor: pointer;
		background: none;
		border: none;
		box-sizing: content-box;

		img {
			display: inline-block;
			width: 20px;
			height: auto;
		}

		&:hover {
			background-color: var(--surface-hover);
		}
	}
}

h1.logo {
	height: 20px;
	width: 20px;
	margin: 8px;
	padding: 8px;
	display: block;
	border-radius: 6px;
	cursor: pointer;

	svg {
		margin: 0;
		padding: 0;
		display: block;
	}
	
	path {
		fill: var(--text-primary);
	}

	&:hover {
		background-color: var(--surface-hover);
	}
}

menu[data-menu] {
	padding: 0;
	list-style: none;
	width: 100%;

	li {
		padding: 0.5em 0.5em;
		margin: 0 0.5em;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;

		border-radius: 6px;
		cursor: pointer;
		background: none;

		&:hover {
			background-color: var(--surface-hover);
		}
	}

	img {
		display: inline-block;
		height: auto;
		width: 24px;
		margin-right: 0.25em;
	}
}

[data-menu="chat"] {
	margin-top: 1em;
	
}

[data-menu="site"] {
	margin-top: auto;
}

aside footer {
	border-top: solid 1px var(--surface-hover);
	padding: 1em 1em 0.5em 1em;
	margin: 1em 0;

	small {
		display: block;
		font-size: 1em;
		margin-bottom: 1em;
		font-weight: lighter;
	}

	button {
		width: 100%;
	}
}

main {
	margin: 0.5em;
	box-sizing: border-box;
	width: calc(100% - 280px);

	> header {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 50px;
	}

	menu {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin: 0 0 0 auto;
		list-style: none; 

		li {
			margin-left: 0.5em;
		}
	}

	article {
		height: calc(100% - 100px);
		width: 100%;
		overflow: auto;

		header {
			text-align: center;
			width: 100%;
		}

		small {
			background: var(--surface-hover);
			border-radius: 15px;
			padding: 1em;
			margin: 1em auto;
			display: none;

			&[data-show="true"] {
				display: block;
			}
		}

		section {
			background: var(--surface-hover);
			border-radius: 15px;
			padding: 1em;
			margin: 1em auto;
			display: none;

			&[data-show="true"] {
				display: block;
			}
		}
	}

	footer {
		height: 50px;
		margin: 0 15%;
		opacity: 0.5;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

		small {
			font-size: 0.875em;
			display: block;
			text-align: center;
		}
	}

	pre,
	code {
		width: 100%;
		text-wrap: wrap;
	}
}

.mock-form {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	background: var(--surface-hover);
	border-radius: 25px;
	padding: 1em;
	margin-top: 2em;
	width: 100%;
	box-sizing: border-box;
	
	button {
		padding: 0;
		color: white;
		height: 36px;
		svg {
			width: 24px;
			height: auto;

			path {
				fill: white;
			}
		}

		&:hover {
			color: black;
			background: white;

			path {
				fill: black;
			}
		}

		&:last-child {
			padding: 0 1em;
		}
	}

	.mock-input {
		background: none;
		border: none;
		font-family: inherit;
		color: white;
		margin: 0 1em;
		width: calc(100% - 180px);
		field-sizing: content;
		text-align: left;

		> button {
			color: black;
			background: white;
		} 
	}
}

[data-quote-box] {
	display: none;
	position: fixed;
	width: 300px;
	text-decoration: none;
	margin: 0;

	figcaption {
		background: var(--bg-primary);
		color: var(--text-primary);
		border-radius: 0 0 25px 25px;
		padding: 25px;
		text-decoration: none;

		p {
			margin: 0;
		}
	}

	blockquote {
		margin: 0;
	}

	cite {
		margin: 1em 0 0 0;
		display: block;
	    text-align: right;

		&:before {
			content: "- ";
		}
	}

	img {
		display: block;
		width: 100%;
		height: auto;
		border-radius: 25px 25px 0 0;
	}

	&[data-show="yes"] {
		display: block;
	}

	&[data-position="up-right"] {
		transform: translate(0, -100%);
	}

	&[data-position="up-left"] {
		transform: translate(-125%, -100%);
	}

	&[data-position="down-right"] {
		transform: translate(0, 0);
	}

	&[data-position="down-left"] {
		transform: translate(-125%, 0);
	}
}

@media screen and (width < 900px) {
  aside {
  	display: none;
  }

  main {
  	width: 100%;
  }
}

@media screen and (width < 600px) {
  main {
  	article {
    	section {
    		padding: 15px;

    		ul {
    			padding-left: 1em;
    			margin: 0;
    		}

    		h3 {
    			margin: 1em 0 0.5em;
    		}
    	}
    }

  	footer {
	  	margin: 0;
	  }
	}

  .mock-form {
  	padding: 15px;

	  > button {
	  	display: none;
	  }

	  .mock-input {
	  	width: 100%;
	  	margin: 0;
	  }
	}
}