website/main.css

/* Inferencium - Website - CSS */
/* Version: 11.1.2 */

/* 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: 20px;
		line-height: 130%;
		background-color: #121212;
}


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

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

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

h4 {
		font-family: Roboto, sans-serif;
		font-size: 20px;
		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: 16px;
		line-height: 130%;
		color: #ffffff;
}


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


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


/* Code */
code {
		font-size: 15px;
		color: #ffffff;
		background-color: #424242;
		padding-top: 4px;
		padding-right: 4px;
		padding-bottom: 4px;
		padding-left: 4px;
}


/* Links */
a {
		font-family: Roboto, sans-serif;
		font-size: 17px;
		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: 26px;
		text-align: center;
		line-height: 130%;
		color: #ffffff;
		padding-bottom: 40px;
}

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

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

h4 a, h4 a:visited {
		font-family: Roboto, sans-serif;
		font-size: 20px;
		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: 16px;
		line-height: 130%;
		color: #ffffff;
}


/* Lists */
li {
		font-family: Roboto, sans-serif;
		font-size: 17px;
		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: 17px;
		color: #ffffff;
}

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

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

.td-desc {
		text-align: left;
}


/* Navigation bar */
.nav-bar {
		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-bar div, .nav-bar div a, .nav-bar div a:visited {
		padding: 6px;
		font-family: Roboto, sans-serif;
		font-size: 22px;
		color: #000000;
		display: block;
		z-index: 100;
}

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

.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-bar {
				width: 100vw;
				height: 35px;
				font-size: 10px;
				line-height: 0%;
				padding-top: 8px;
				padding-bottom: 8px;
				overflow: auto;
				white-space: nowrap;
		}

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

		.nav-bar img, .nav-bar .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;
		}
}