my-website/smg-stuff/styles.css

/* default elements */

/*
:root {
  --list_background_color: rgba(170, 170, 170);
  --list_item_background_color: rgba(221, 221, 221);
  --heading_2_3_background_color: rgba(238, 238, 238);
  --contents_background_color: rgba(205, 205, 205);
  --link_general_color: rgb(37, 150, 190);
  --font_general_color: black; 
}
*/

/* for a possible dark theme */

/*
:root {
  --list_background_color: rgba(170, 170, 170, 0.05);
  --list_item_background_color: rgba(221, 221, 221, 0.05);
  --heading_2_3_background_color: rgba(238, 238, 238, 0.05);
  --contents_background_color: rgba(205, 205, 205, 0.05);
  --link_general_color: rgb(37, 150, 190);
  --font_general_color: white; 
}
*/

body {
  background: url('images/background.jpg');
  font-family: sans-serif;
  font-size: 1.1em;
  color: black;
  width: 100%;
  margin: 0;
  text-align: justify;
  margin-bottom: 10em;
}

h1 {
  margin: 0;
  margin-left: 1em;
  padding-top: 2em;
  padding-bottom: 2em;
  color: white;
}

h2, h3 {
  margin: 0;
  margin-bottom: 0.3em;
  border-bottom: 0.12em dashed gray;
  background-color: rgb(238, 238, 238);
  padding: 0.3em;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

p {
  margin: 0;
}

ol, ul {
  border-top: gray 0.1em solid;
  list-style-position: outside;
  margin-left: 0;
  margin-right: 0.3em;
  margin-top: 0.3em;
  margin-bottom: 0.3em;
  padding: 0;
  padding-left: 1.6em;
  background-color: rgba(170, 170, 170);
}

li {
  margin: 0;
  border-left: gray 0.1em solid;
  border-right: gray 0.1em solid;
  border-bottom: gray 0.1em solid;
  padding: 0.3em;
  background-color: rgb(221, 221, 221);
}

img {
  display: block;
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  margin-top: 0.4em;
  object-fit: cover;
}

code {
  background-color: white;
  font-size: inherit;
  font-weight: 800;
  border: solid black 0.05em;
  padding-left: 0.1em;
  padding-right: 0.1em;
}

pre
{
  margin: 0;
  background-color: white;
}

table {
  border-collapse: collapse;
  width: 100%;
  background-color: white;
  font-size: 16px;
}

td, th {
  border: 1px solid #777777;
  padding: 5px;
}

a {
  color: rgb(37, 150, 190);
  text-decoration: none;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* id elements */

#top, #hot-links, #main {
  margin: auto;
}

#top {
  color: white;
  background-image: url('images/top.jpg');
  background-position: 50% 50%;
  background-repeat: repeat;
  border: rgb(37, 150, 190) 0.3em solid;
  border-top: 0;
  background-color: #2596be;
  min-width: 60em;
  max-width: 70%;
}

#hot-links, #main {
  min-width: 50em;
  max-width: 60%;
  margin-top: 1.2em;
  background-color: rgb(205, 205, 205);
  border: rgb(37, 150, 190) 0.4em solid;
}

/* class elements */

.contents {
  padding-top: 1em;
  padding-bottom: 1em;
  padding-left: 2em;
  padding-right: 2em;
}

.idtext {
  width: 100%;
  font-weight: bold;
  text-align: center;
  margin-top: 0.3em;
  margin-bottom: 0.9em;
}

.embed {
  display: block;
  width: 60%;
  height: 20em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.4em;
}

.code_block {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 1em;
  padding-right: 1em;
  font-family: monospace;
  color: black;
  background-color: white;
  font-size: inherit;
  font-weight: 800;
  border: solid black 0.1em;
  text-align: left;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}