index.css

@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
@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: 14px;
  --default-line-height: 24px;
  --default-wallpaper: url(public/wallpaper.png);
  --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);
}

dot {
  color: green;
}

/*}*/

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;
  font-family: Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Varela Round", sans-serif;
  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: 31px;
  line-height: 24px;
  max-width: 110px;
  font-weight: 100;
}

.name a {
  text-decoration: none;
}

.mode-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-flow: row;
  flex: 2;
  width: 100%;
}

.mode-container a:last-child {
  text-decoration: none;
  padding-right: 1em;
  font-size: 1.2em;
}

div#select {
  flex-flow: row wrap;
  display: flex;
  flex: 2;
  justify-content: space-around;
}

div#select button {
  border: none;
  background-color: transparent;
  font-family: "Varela Round", sans-serif;
  font-size: var(--default-font);
  line-height: var(--default-line-height);
  color: var(--default-link);
  text-shadow: 1px 1px 6px #00e78c;
}

div#select button:hover {
  text-shadow: 1px 1px 12px #00e78c;
  cursor: pointer;
}

#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;
  max-width: 425px;
}

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

span.thumbnail {
  max-width: 425px;
  box-sizing: border-box;
  padding-left: min(10%, 100px);
}

.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 {
  color: blue;
  position: absolute;
}