* {
  margin: 0;
  padding: 0;
  font-family: "px";
  font-size: 40px;
  box-sizing: border-box;
}

@font-face {
  font-family: "px";
  src: url("./fonts/px_grotesk_light.woff");
  font-style: normal;
}

body {
  padding: 50px 100px 150px 50px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow-x: hidden;
  width: 100vw;
}

header {
  display: flex;
  width: 100%;
  align-items: center;
}

h1 {
  border-radius: 50px;
  font-weight: normal;
  padding: 17px 30px;
  border: 2px solid black;
}

h2 {
  font-weight: normal;
  border: none;
  opacity: 0.3;
  margin-left: 20px;
}

nav {
  width: 100%;
  margin-top: 75px;
  margin-left: 35px;
  line-height: 70px;
}

.theme {
  display: flex;
  align-items: center;
  max-width: 100%;
}

.theme a.link {
  display: inline-block;
  max-width: 85%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  font-size: 35px;
}

.theme a.link span.text {
  font-size: 35px;
  color: black;
  border-bottom: 2px solid black;
}

.theme img.thumbnail {
  width: 90px;
  margin-left: 25px;
}

.theme .empty-thumbnail {
  display: inline-block;
  width: 85px;
  margin-left: 25px;
  height: 55px;
  border: solid 1px black;
  border-radius: 2px;
}

@media all and (max-width: 800px) {
  body {
    padding: 30px 25px 25px 25px;
    width: 100vw;
  }

  header {
    flex-direction: column;
    align-items: flex-start;
  }

  h1 {
    font-size: 6vw;
    text-wrap: nowrap;
    padding: 11px 20px 9px 20px;
  }

  h2 {
    text-wrap: nowrap;
    margin-top: 15px;
    margin-left: 22px;
    font-size: 6vw;
  }

  nav {
    margin-top: 45px;
    display: block;
  }

  a.link {
    margin-left: 22px;
    font-size: 7.25vw;
  }
}