website/main.css

/* Inferencium - Website - CSS - Main */
/* Version: 11.6.0-alpha.1 */

/* Copyright 2022 Jake Winters */
/* SPDX-License-Identifier: BSD-3-Clause */


/* Body */
body {
		padding-top: 40px;
		margin-left: min(400px, 45vw);
		margin-right: min(150px, 12vw);
		font-family: Roboto, sans-serif;
		font-size: 16px;
		line-height: 130%;
		background-color: #121212;
}


/* Headings */
h1 {
		font-family: Roboto, sans-serif;
		font-size: 24px;
		text-align: center;
		line-height: 130%;
		color: #ffffff;
}

h2 {
		font-family: Roboto, sans-serif;
		font-size: 22px;
		line-height: 130%;
		color: #ffffff;
}

h3 {
		font-family: Roboto, sans-serif;
		font-size: 20px;
		line-height: 130%;
		color: #ffffff;
}

h4 {
		font-family: Roboto, sans-serif;
		font-size: 19px;
		line-height: 130%;
		color: #ffffff;
}

h5 {
		font-family: Roboto, sans-serif;
		font-size: 18px;
		line-height: 130%;
		color: #ffffff;
}

h6 {
		font-family: Roboto, sans-serif;
		font-size: 17px;
		line-height: 130%;
		color: #ffffff;
}


/* Paragraph */
p {
		font-family: Roboto, sans-serif;
		font-size: 16px;
		color: #ffffff;
}


/* Blockquote */
blockquote {
		font-size: 16px;
		color: #ffffff;
}


/* Code */
code {
		font-size: 15px;
		color: #ffffff;
		background-color: #424242;
		padding: 2px;
}


/* Links */
a {
		font-family: Roboto, sans-serif;
		font-size: 16px;
		color: #90caf9;
		text-decoration: none;
}

a:visited {
		color: #ce93d8;
}

a:hover {
		text-decoration: underline;
}

h1 a, h1 a:visited {
		font-family: Roboto, sans-serif;
		font-size: 24px;
		text-align: center;
		line-height: 130%;
		color: #ffffff;
		padding-bottom: 40px;
}

h2 a, h2 a:visited {
		font-family: Roboto, sans-serif;
		font-size: 22px;
		line-height: 130%;
		color: #ffffff;
}

h3 a, h3 a:visited {
		font-family: Roboto, sans-serif;
		font-size: 20px;
		line-height: 130%;
		color: #ffffff;
}

h4 a, h4 a:visited {
		font-family: Roboto, sans-serif;
		font-size: 19px;
		line-height: 130%;
		color: #ffffff;
}

h5 a, h5 a:visited {
		font-family: Roboto, sans-serif;
		font-size: 18px;
		line-height: 130%;
		color: #ffffff;
}

h6 a, h6 a:visited {
		font-family: Roboto, sans-serif;
		font-size: 17px;
		line-height: 130%;
		color: #ffffff;
}


/* Lists */
li {
		font-family: Roboto, sans-serif;
		font-size: 16px;
		color: #ffffff;
}

ul li::before {
		margin-left: -1em;
		display: inline-block;
		width: 1em;
		font-weight: bold;
		color: #ffffff;
}


/* Tables */
table, th, td {
		border: 2px solid;
		border-collapse: collapse;
		border-color: #ffffff;
		padding: 15px;
		font-family: Roboto, sans-serif;
		font-size: 16px;
		color: #ffffff;
}

th {
		font-family: Roboto, sans-serif;
		font-size: 16px;
		color: #ffffff;
		font-weight: bold;
		text-align: center;
}

td {
		font-family: Roboto, sans-serif;
		font-size: 16px;
		color: #ffffff;
		text-align: center;
}

td.desc {
		text-align: left;
}

td.green {
		background-color: #00a70a
}

td.red {
		background-color: #e50000;
}


/* Image */
img.avatar {
		width: 10%;
		height: 10%;
		margin-top: 15px;
		margin-right: 15px;
		margin-bottom: 15px;
}

img.logo-small {
		transform: translate(0px, 13px);
		margin-right: 15px;
}


/* Navigation bar */
nav.navbar {
		height: 100%;
		width: 250px;
		position: fixed;
		left: 0;
		top: 0;
		padding-top: 55px;
		background-color: #909090;
		text-align: center;
		z-index: 99;
		overflow: auto;
}

nav.navbar div, .navbar div a, .navbar div a:visited {
		padding: 6px;
		font-family: Roboto, sans-serif;
		font-size: 22px;
		color: #000000;
		display: block;
		z-index: 100;
}

.title {
		padding: 8px;
		font-family: Roboto, sans-serif;
		font-size: 28px;
		color: #000000;
}

.title a:visited {
		color: #000000;
}


/* Emphasis */
strong {
		color: #ffffff;
}


/* Media */
@media (max-width: 600px) {

		body {
				padding-top: 80px;
				margin: 15px;
				position: relative;
				overflow-x: scroll;
		}

		nav.navbar {
				width: 100vw;
				height: 35px;
				font-size: 10px;
				line-height: 0%;
				padding-top: 8px;
				padding-bottom: 8px;
				overflow: auto;
				white-space: nowrap;
		}

		nav.navbar div {
				font-size: min(max(7vw, 20px), 30px);
				display: inline-block;
		}

		nav.navbar img, nav.navbar .title {
				display: none;
		}

		h2 {
				text-align: center;
		}

		h3 {
				text-align: center;
		}

		h4 {
				text-align: center;
		}

		h5 {
				text-align: center;
		}

		h6 {
				text-align: center;
		}

		.update_date {
				text-align: center;
		}


		img.avatar {
				display: block;
				width: 30%;
				margin-right: auto;
				margin-left: auto;
			}
}