:root {
  --logo-width: 578px;
}
body {
  background-color: #1B2838;
  color: #FFFFFF;
  font-size: 40px;
  margin: 0;
  padding: 0;
  font-family: "Source Code Pro", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.logo_combined {
  position: relative;
  width: 90vw;
  max-width: var(--logo-width);
  height: calc(442px * 90vw / 578px);
  max-height: calc(442px * var(--logo-width) / 578px);
  background-size: cover;
  background-position: center;
  transition: background-image 2s;
  mask-size: 100%;
  margin: 4vw auto;
}
.logo_outline {
  position: absolute;
  background-size: 100%;
  width: 100%;
  height: 100%;
  filter: saturate(0) brightness(200) ;
}
.dpc .logo_combined {
  mask-image: url('https://images.premo.biz/dpc-cutout-mask.png');
}
.dpc .logo_outline {
  background-image: url('https://images.premo.biz/dpc-outline-red.png');
}
.hpb .logo_combined {
  mask-image: url('https://hack.premo.biz/images/hpb-cutout-mask.png');
}
.hpb .logo_outline {
  background-image: url('https://hack.premo.biz/images/hpb-outline-red.png');
}
.text_section {
  position: relative;
  margin: 10px auto;
  width: 90vw;
}
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
  color: #FFFFFF;
}
a:hover {
  text-decoration: underline;
}

@media (min-width: 642px) {
  .logo_combined {
    margin: 23px;
  }
}
@media (min-width: 768px) {
  body {
    padding: 15px;
    font-size: 40px;
    margin: 8px;
  }
  .logo_combined {
    position: fixed;
    width: var(--logo-width);
    height: calc(442px * var(--logo-width) / 578px);
    margin: 0;
  }
  .text_section {
    position: absolute;
    margin-left: var(--logo-width);
    width: auto;
  }
  .hpb .text_section {
    font-size: 20px;
  }
  ul {
    margin: 0 32px;
  }
}