index.css

@import url(background.css) (min-width: 0px);
@import url(small.css) (min-width: 0px);
@import url(large.css) (min-width: 800px);
@import url(small.css) (min-width: 1700px);

:root {
  --default-bg: #fdfaf6;
  --default-text: rgb(35, 35, 35);
  --default-border: yellow;
  --default-font: 16px;
  --default-line-height: 24px;
  --default-wallpaper: url(public/wallpaper.png);
  --default-dot: green;
  --default-link: rgb(0, 0, 255);
}

.theme {
  background-color: var(--default-bg);
  color: var(--default-text);
}

@media (prefers-color-scheme: dark) {
  .theme {
    --default-bg: rgb(35, 35, 35);
    --default-text: rgb(89 255 66);
    --default-border: rgb(0, 0, 255);
    --default-link: #d5ffbd;
  }

  #wallpaper {
    --default-wallpaper: url(public/wallpaper_dark.png);
  }
}

html {
  display: block;
  width: 100%;
}

body {
  margin: 0 auto;
  font-size: var(--default-font);
  line-height: var(--default-line-height);
  text-shadow: #acb5bd 1px 1px 6px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: left;
}

.aria-hidden {
  position: absolute;
  visibility: hidden;
}

#container {
  height: 100vh;
  width: 100vw;
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

#container::-webkit-scrollbar,
#container div::-webkit-scrollbar {
  display: none;
  background: transparent; /* Chrome/Safari/Webkit */
  width: 0;
  height: 0;
}

#main {
  position: fixed;
  z-index: 1000;
}

#main div {
  box-sizing: border-box;
}

#center {
  display: flex;
  flex-flow: column;
  overflow: scroll;
  padding: 12px 12px 80px;
}

#center > div:not(#greeting) {
  display: none;
  max-width: max(100%, 60vw);
}

#left,
#right {
  overflow: scroll;
  padding: 12px 12px 80px;
}

.name {
  text-align: left;
  margin: 0 0;
  font-size: 32px;
  line-height: 25px;
  max-width: 110px;
}

.name a {
  text-decoration: none;
}

#greeting {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

#wallpaper {
  content: var(--default-wallpaper);
  object-fit: cover;
  max-width: 550px;
  width: 77%;
}

span {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

span > span {
  display: flex;
  flex: 2;
}

span > span > img {
  width: 100%;
  object-fit: cover;
  min-width: 300px
}

span > p {
  display: flex;
  flex: 1;
  box-sizing: border-box;
  padding: 0 12px;
  flex-flow: column wrap;
}

.thumbnail p {
  font-style: italic;
}

p,
td {
  max-width: 75ch;
}

a,
a:visited,
a:active {
  color: var(--default-link);
  text-shadow: 1px 1px 6px #00e78c;
}

.film-button {
  border: none;
  background: none;
  transform: scale(1.2);
  cursor: pointer;
  font-size: 1.2em;
}

.film-button:nth-child(1),
.film-button:nth-child(1):hover {
  accent-color: tan;
}

.film-button:nth-child(2),
.film-button:nth-child(2):hover {
  accent-color: deepskyblue;
}

.film-button:nth-child(3),
.film-button:nth-child(3):hover {
  accent-color: palegreen;
}

#yosemite,
#alaska,
#eastcoast,
#tableware,
#reveries {
  display: flex;
  overflow: scroll;
}

#yosemite div,
#alaska div,
#eastcoast div,
#reveries div {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 64px;
  opacity: 0.9;
}

#tableware div,
#reveries div {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  padding: 0 10px;
}

#tableware h2,
#reveries h2,
#filmotography h2 {
  position: absolute;
  top: 128px;
}

#reveries h3 {
  position: absolute;
  top: 160px;
  text-transform: lowercase;
}

.reveries-heading {
  position: relative;
  font-size: 50px;
  color: var(--default-text);
  text-shadow: none;
  padding: 0 128px;
  min-width: 80%;
}

.film-heading {
  font-size: 50px;
  color: #38516a;
  text-shadow: none;
  padding: 0 128px;
  min-width: 80%;
}

dot {
  position: absolute;
  color: var(--default-dot);
}