@import url(/static/nord.css);

@media all and (prefers-color-scheme: dark) {
    :root {
        background-color: var(--nord1);
        color: var(--nord6);
    }

    :any-link {
        color: var(--nord7);
    }

    a.nav-active {
        color: var(--nord4);
    }
}

@media all and (prefers-color-scheme: light) {
    :root {
        background-color: var(--nord6);
        color: var(--nord0);
    }

    :any-link {
        color: var(--nord10);
    }
}

header {
    border-bottom: 1px solid;
}

h2, h3 {
    padding-left: 20px;
}

.the-title:any-link {
    color: inherit;
    text-decoration: none;
}

ul.nav {
    padding-left: 0px;
}

ul.nav > li {
    display: inline-block;
    margin-right: 10px;
}

@media all and (orientation: landscape) {
    main.blog {
        padding-left: 25%;
        padding-right: 25%;
    }

	#chat {
		margin: 0 25%;
	}
}

#chat {
	border: 2px solid;
	height: 65vh;
	overflow-y: scroll;
}

input[name="message"] {
	width: 688px;
}

#chat > .message {
	display: flex;
	border: 1px solid;
	margin: 5px;
	padding: 7px;

	.text {
		flex: 5;
	}

	.meta {
		flex: 1;

		.registered {
			color: var(--nord14);
		}
	}
}