:root, html[data-theme='light'] {
  --color-bg: #fafafa;
  --color-text: #333;
  --color-text-dark: #111;
  --color-text-light: #999;
  --color-red: #e34e47;
  --noise-img: url("/img/noise-white.png");
  --noise-img-opacity: 35%;
}

html[data-theme='dark'] {
  --color-bg: #050505;
  --color-text: #ccc;
  --color-text-dark: #ededed;
  --color-text-light: #666;
  --color-red: #e34e47;
  --noise-img: url("/img/noise-black.png");
  --noise-img-opacity: 15%;
}

html {
  min-height: 100%;
  position: relative;
}

body {
  height: 100%;
  max-width: 800px;
  margin: auto;
  padding: 1em;
  line-height: 1.5em;
  color: var(--color-text);
  background-color: var(--color-bg);
}

a,
a:visited {
  color: var(--color-text-dark);
}
a:hover {
  color: var(--color-red);
}

#noise {
  position: absolute;
  inset: 0;
  background-image: var(--noise-img);
  background-repeat: repeat;
  background-size: 200px;
  z-index: -1;
  opacity: var(--noise-img-opacity);
}

#top-bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: -20px;
}

.lang-select,
#theme-toggle {
  padding: 0;
  list-style: none;
  margin: 1rem 0 0 0;
}

#theme-toggle .svg-icon {
  cursor: pointer;
  border: 1px var(--color-text) solid;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  border-radius: 50%;
  background-color: var(--color-bg);
}

#theme-toggle .svg-icon:hover {
  color: var(--color-bg);
  background-color: var(--color-text);
}

.lang-select li {
  display: inline-block;
  font-size: 80%;
}
.lang-select a:link,
.lang-select a:visited {
  color: var(--color-text);
}
.lang-select a:hover {
  color: var(--color-text-light);
}

#profile-pic {
  height: 150px;
  border-radius: 50%;
  display: block;
  margin: 0 auto 2rem auto;
}

/* header and footer areas */
.menu,
.contact-info {
  padding: 0;
}
.menu li,
.contact-info li {
  display: inline-block;
}

footer {
  text-align: center;
}

/* inline svg icons */
.svg-icon {
  display: inline-block;
  color: var(--color-text);
  height: 1.15rem;
  width: 1.15rem;
  top: 0.25rem;
  position: relative;
}

blockquote {
  border-left: 5px solid var(--color-text-light);
  padding: 3px 1em 3px;
}

/* footer contact info */

.svg-icon-footer {
  display: inline-block;
  color: var(--color-text);
  height: 1.15rem;
  width: 1.15rem;
  top: 0.25rem;
  position: relative;
}

.contact-info:hover .svg-icon-footer {
  color: var(--color-text-light);
}

.svg-icon-footer:hover {
  color: var(--color-text) !important;
}

/* thanks at footer */
.thanks {
  text-align: center;
  font-size: x-small;
  color: var(--color-text-light);
}
.thanks a:link,
.thanks a:visited {
  color: var(--color-text);
}
.thanks a:hover {
  color: var(--color-red);
}