:root {
  --font-family: "Inter", sans-serif;
  --font-size: 1.375rem;
  --wrapper-max-width: 1620px;
}

@media (min-width: 2560px) {
  html {
    font-size: 1vw;
  }
}
@media (max-width: 768px) {
  html {
    font-size-adjust: 0.5;
  }
}

body {
  min-height: 100vh;
  font-family: var(--font-family);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: var(--font-size);
  color: var(--bs-black);
  background: url("../images/background_image.png") center center no-repeat fixed;
}
@media (max-width: 1024px) {
  body {
    background-size: cover;
  }
}
@media (min-width: 2560px) {
  body {
    background-size: cover;
    font-size: calc(1.375rem + 3vw);
  }
}

header, main, footer {
  text-align: center;
  padding: 1rem 2rem;
}

.logotype {
  display: block;
  text-indent: -9999px;
  margin: 0 auto;
  width: 6.875rem;
  height: 6.875rem;
  background: url("../images/logotype.svg") center center no-repeat;
  background-size: contain;
}

#wrapper {
  max-width: var(--wrapper-max-width);
  margin: 0 auto;
}
#wrapper #artworks-slider {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  max-width: 30rem;
}
#wrapper #info {
  margin: 0 auto;
  max-width: 48rem;
  font-size: var(--font-size);
}
#wrapper #info a {
  color: var(--bs-black);
}
#wrapper #info a:hover {
  text-decoration: none;
}
#wrapper footer ul {
  padding-top: 1rem;
}
#wrapper footer ul li {
  display: inline-block;
  padding: 0.75rem 1rem;
}
#wrapper footer ul li img {
  max-width: 2rem;
}
@media (max-width: 576px) {
  #wrapper footer ul li {
    padding: 0.75rem 0.5rem;
  }
  #wrapper footer ul li img {
    max-width: 1.75rem;
  }
}