@import url("fonts.css");
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500&family=IBM+Plex+Mono&family=Xanh+Mono&display=swap');

html {
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'EB Garamond', serif;
}

a {
  text-decoration: none;
  color: #000000;
}

a:hover {
  color: #8d8d8d;
}

#art-container {
  width: 66vw;
  float: right;
  padding: 40px 0 0 0;
}

#art-container img {
  width: 100%;
}

#about-text {
  width: 62vw;
  margin-left: 33vw;
  font-weight: 400;
  font-size: 28px;
  line-height: 38px;
  letter-spacing: -0.5px;
}

p {
  margin: 0;
  padding-top: 40px;
}

.painting-p {
  max-width: 37vw;
  margin: 0 auto;
  padding-bottom: 40px;
}

.painting-l {
  max-width: 40vw;
  margin: 0 auto;
  padding-bottom: 40px;
}

figcaption {
  font-family: 'IBM Plex Mono', monospace;
  weight: 400;
  font-size: 12px;
  padding-top: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

h1 {
  font-weight: 400;
  font-size: 50px;
  line-height: 50px;
  letter-spacing: -0.5px;
  position: fixed;
  top: 40px;
  left: 40px;
  margin: 0;
}

ul {
  list-style: none;
  position: fixed;
  bottom: 45px;
  left: 40px;
  margin: 0;
  font-weight: 400;
  font-size: 50px;
  line-height: 50px;
  letter-spacing: -0.5px;
  padding: 0;
}

/* Small devices */
@media (max-width: 767px) {
  h1 {
    font-size: 40px;
    line-height: 40px;
    position: relative;
    top: 20px;
    left: 20px;
  }

  ul {
    padding-top: 20px;
    font-size: 40px;
    line-height: 38px;
    position: relative;
    left: 20px;
    top:20px;
  }

  #art-container {
    width: calc(100vw - 40px);
    float: clear;
    padding: 60px 20px 0 20px;
  }

  .painting-p, .painting-l {
    max-width: 100vw;
  }

  figcaption {
    font-size: 14px;
    line-height: 18px;
  }

  #about-text {
    width: calc(100vw - 40px);
    margin-left: 0;
    font-weight: 400;
    font-size: 29px;
    line-height: 34px;
    padding: 20px 20px 40px 20px;
  }
}

/* Medium devices */
@media (min-width: 768px) and (max-width: 1023px) {
  .painting-p {
    max-width: 43vw;
  }

  .painting-l {
    max-width: 46vw;
  }

  #about-text {
    font-size: 24px;
    line-height: 34px;
  }
}