@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;700&display=swap');

html, body {
	margin: 0;
	padding: 0;
    scroll-behavior: smooth;
}

body {
	padding: 15px;
}

* {
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
	color: #12124b;
}

p {
    margin: 0;
}

nav {
	display: flex;
	border: 2px solid #dadada;
	border-radius: 10px;
	padding: 10px;
	gap: 7px;
}

nav > input {
	flex-grow: 1;
}

input {
	border: none;
	outline: none;
	font-size: medium;
	border-bottom: 3px solid #dadada;
	font-weight: bold;
}

.account_dropdown {
	position: absolute;
	right: 15px;
	background-color: white;
	display: flex;
	gap: 7px;
	flex-direction: row;
	border: 2px solid #dadada;
	border-radius: 10px;
	padding: 10px;
	width: fit-content;
	margin-top: 15px;
}

.account_dropdown img {
	width: 48px;
	height: 48px;
}

.account_dropdown img[off] {
	width: 24px;
	height: 24px;
	display: block;
	float: right;
}

.account_login {
	display: flex;
	gap: 7px;
	flex-direction: column;
}

.account_login > img {
	display: block;
	margin: auto
}

.account_header {
	display: flex;
	gap: 111.8px;
	flex-direction: row;
}

.account_header > div > p {
	margin: 0;
}

.account_preferences {
	margin-top: 15px;
	display: flex;
	gap: 7px;
	flex-direction: column;
}

.account_preferences p {
	margin: 0;
}

.account_preferences > div {
	border-top: 2px solid #dadada;
}

.card {
	border: 2px solid #dadada;
	padding: 15px;
	border-radius: 10px;
    cursor: pointer;
}

.card:hover {
    background-color: #f4f4f5;
}

.card * {
	margin: 0;
}

.tags {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: row;
	gap: 10px;
	margin-top: 15px;
}

.tags > li {
	background-color: #056CF025;
	color: #2563eb;
	font-weight: bold;
	display: inline;
	padding-bottom: 0.25rem;
	padding-top: 0.25rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	border-radius: 9999px;
	line-height: 1rem;
	font-weight: 700;
}

.tags button {
    padding: 0;
    height: fit-content;
}

.card-top {
	display: flex;
	justify-content: space-between;
}

.card-top > div {
    display: flex;
    flex-direction: row;
    gap: 10px;
	text-align: right;
}

.blogs {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.blogs-header {
    display: flex;
    flex-direction: row;
	border-bottom: 2px solid #dadada;
}

.blogs-header > button {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-self: center;
    text-align: center;
}

.blogs-header > button > p {
    margin: 0;
    padding-top: 4px;
}

.error {
    color: red;
    font-weight: bold;
    text-align: center;
}

button {
    font-weight: bolder;
	font-size: medium;
    background-color: white;
	border: 2px solid #dadada;
	border-radius: 7px;
    padding: 5px;
    cursor: pointer;
	width: fit-content;
    height: fit-content;
}

button:hover {
    background-color: #f4f4f5;
}

.ql-syntax * {
    font-family: 'IBM Plex Mono', monospace;
}

.ql-syntax {
    background-color: #eaeef3 !important;
    color: #00193a !important;
}

header {
    margin-top: 15px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

header > div > h1 {
    margin: 0;
}

header > div:nth-child(2) * {
    margin: 0;
    text-align: right;
    margin: 0;
}

header > div:nth-child(2) > button {
    display: flex;
    gap: 5px;
    float: right;
}

header > div:nth-child(2) > button > p {
    margin-top: 4px;
}

.back {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
}

.back * {
    margin: 0;
}

.back > p {
    font-size: large;
    font-weight: bold;
}

main {
    margin-top: 15px;
	border-top: 2px solid #dadada;
    padding-top: 15px;
}

.divider {
    padding-top: 15px;
    border-top: 2px solid #dadada;
}

.ql-toolbar {
    margin-top: 15px;
}

main > .ql-syntax {
    padding: 5px 10px;
}

blockquote { 
    margin: 0;
    padding-left: 5px;
	border-left: 4px solid #12124b;
}

.title-input {
    font-size: 2.125em;
}

.publish {
    display: flex;
    flex-direction: column;
}

.visibility {
    width: fit-content;
    display: flex;
    flex-direction: row;
    gap: 5px;
    margin-bottom: 15px;
    cursor: pointer;
    font-weight: bold;
}