* {
  --bg: #fff8f7;
  --bg_tan: #f4eceb;
  --fg: #373131;
  --dot: #5c5252;
  --dot-size: 1px;
  --dot-space: 22px;
}

body {
  background-color: var(--bg);
  color: var(--fg);
  font-family: sans-serif;
  margin: 36px;

  background:
    linear-gradient(90deg, var(--bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
    linear-gradient(var(--bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
    var(--dot);
}

video{
  max-width: 1200px;
  width: 100%;
  background: #00000011;
}

p{
  font-family: monospace;
  max-width: 1200px;
}

hr{
  border: 0.5px solid black;
  margin-top: 24px;
  margin-bottom: 36px;
}



a:link {
  color: var(--fg);
}

a:visited {
  color: var(--fg);
}

a:hover {
  color: var(--fg);
}

a:active {
  color: var(--fg);
} 

li{
  font-family: monospace;
}
ul {
  font-family: monospace;
  padding-inline-start: 24px;
}

pre{
  background: var(--bg_tan);
  max-width: 1200px;
  padding: 16px;
}

.keep_width{
  width: auto;
  height: auto;
}
.half_width{
  max-width: 50%;
  height: auto;
}
.quarter_width{
  max-width: 300px;
  height: auto;
}
.small_image{
  max-width: 400px;
  height: auto; 
}

.image_border{
    
  border-style: solid;
  border-width: 1px;
  border-color: #828282;
  border-radius: 15px;
}

img{
  width: 100%;
  height: auto;
  max-width: 1200px;
}

h1{
  font-size: xx-large;
}