@font-face {
    font-family: "TI";
    src: url("https://ribose.neocities.org/fonts/Px437_Ti_Pro.ttf")
      format("truetype");
  }
  
  body {
    font-family: "TI";
    color: white;
    background-image: url(./img/bg2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
  }
  
  h2 {
    margin: 0px;
    font-weight: normal;
  }
  
  p {
    margin: 0px;
    padding: 0px 5px;
  }
  
  ul {
    padding: 0px 10px 0px 32px;
    margin: 0px;
    text-align: left;
    list-style: none;
  }
  
  iframe {
    width: 800px;
    max-width: 45vw;
    height: 825px;
    max-height: calc(45vw + 25px);
    border: none;
    position: absolute;
  }
  
  img {
    width: 800px;
    max-width: 100%;
  }
  
  a {
    color: white;
  }
  
  .container {
    width: fit-content;
    margin: auto;
  }
  
  .scope {
    width: 800px;
    max-width: 45vw;
    position: relative;
    float: left;
    top: -10px;
  }
  
  .viewer {
    position: absolute;
    z-index: 1;
    pointer-events: none;
  }
  
  .viewer_3Dmoljs {
    position: relative;
    height: calc(100vw - 25px);
    width: 100%;
  }
  
  .placeholder {
    max-width: 45vw;
  }
  
  .info {
    max-width: 40vw;
    float: right;
    position: relative;
    margin: 20px;
    background-color: grey;
    border: inset 5px;
    padding: 20px;
  }
  
  .col1 {
    float: left;
    width: calc(49% - 1px);
    margin: 10px 0;
    padding: 0;
  }
  
  .col2 {
    float: right;
    width: calc(49% - 1px);
    margin: 10px 0;
    padding: 0;
  }
  
  .select {
    overflow-y: scroll;
    font-size: 12px;
    line-height: 16px;
    height: 675px;
    max-height: 70vh;
    scrollbar-width: thin;
  }
  .select::-webkit-scrollbar {
    width: 10px;
  }
  .select::-webkit-scrollbar-track {
    background: lightgray;
  }
  .select::-webkit-scrollbar-thumb {
    background-color: darkgray;
    border: transparent;
  }
  
  .view {
    text-decoration: none;
  }
  
  a:hover,
  a:focus {
    background-color: teal;
  }
  
  .microscope {
    position: absolute;
    bottom: -10px;
    right: -90px;
    width: 100px;
  }
  
  .name {
    float: left;
    font-size: 24px;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  
  .source {
    float: right;
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 12px;
  }
  
  @media screen and (max-width: 810px) {
    .scope {
      max-width: 90vw;
      float: none;
      margin: auto;
    }
    .viewer {
      max-width: 90vw;
    }
    .placeholder {
      max-width: 90vw;
    }
    iframe {
      max-width: 90vw;
      max-height: calc(90vw + 25px);
    }
    .info {
      max-width: 100%;
      margin: 25px 5px 5px 5px;
      padding: 20px 10px;
      float: none;
    }
    .select {
      max-height: calc(100vh - 90vw - 180px);
      font-size: 10px;
    }
    .microscope {
      max-width: 12%;
      bottom: -20px;
      left: -20px;
    }
    .select p,
    .select li {
      font-size: 12px;
    }
  }