img {
    width: 600px;
    border: 0.5px solid black;
    content-visibility: auto;
    background-color: #e3e3e3;
}

video, .pd-email {
    width: 600px;
    border: 0.5px solid black;
}

.italicized {
    font-style: italic;
}

/* text */
h1 {
    text-align: center;
    font-size: 32px;
    font-weight: 400;
    color: #CC3300;
    font-family: 'Xanh Mono', 'Times New Roman', serif;
}

a {
    font-size: 18px;
    color: #CC3300;
    text-decoration: none;
    font-size: 18px;
    line-height: 22px;
}

#publications {
  width: 33%;
  margin: 0 auto;
  list-style-type: square;
  color: #0D0D0D;
}

#publications > li {
  margin-bottom: 12px;
  font-family: 'Comme', Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
}

li::marker {
    color: #CC3300;
}

a:hover {
    cursor: pointer;
}

.emphasized {
    text-transform: uppercase;
    color: #cc6699;
}

/* footer */
nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #FFFFFF;
  border-top: 1px solid #0D0D0D;
  color: #0D0D0D;
}

nav > ul {
    width: 100%;
    padding-left: 0;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

nav > ul > li {
    display: inline-block;
    padding: 0 20px;
    font-family: 'Xanh Mono', 'Times New Roman', serif;
    font-size: 18px;
    letter-spacing: 1px;
}

/* tablet & mobile */
@media only screen
and (max-width: 799px) {
    img {
        width: 600px;
    }

    #publications {
      width: 80vw;
    }
}

@media only screen
and (max-width: 600px) {
    img {
        width: 500px;
    }
}

@media only screen
and (max-width: 500px) {
    img {
        width: 300px;
    }

    video, .pd-email {
        width: 300px;
    }

    figcaption {
        font-size: 14px;
        width: 300px;
    }
}