website/main.css

/* Inferencium - Website - CSS */

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

/* Version: 11.1.0-alpha.2 */


/* 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: 24px;
		text-align: center;
		line-height: 130%;
		color: #ffffff;
		padding-bottom: 40px;
}

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: 18px;
		line-height: 130%;
		color: #ffffff;
}

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

h5 a, h5 a:visited {
		font-family: Roboto, sans-serif;
		font-size: 16px;
		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;
}


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

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

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

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

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


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


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

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

				.sidebar {
						width: 100vw;
						height: 40px;
						font-size: 12px;
						line-height: 0%;
						padding-top: 20px;
						overflow: auto;
						white-space: nowrap;
				}

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

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