style.css

/*! reset.css */ html,body,blockquote,button,dd,dl,dt,figure,fieldset,h1,h2,h3,h4,h5,h6,hr,iframe,input,legend,li,ol,p,pre,select,textarea,ul{margin:0;padding:0}*,*::before,*::after{box-sizing:border-box}body{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Open Sans", "Helvetica Neue", sans-serif}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:normal}img{border-style:none}img,video{height:auto;max-width:100%}iframe{border:0}label{display:inline-block}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}ul{list-style:none}


html {
  background-color: #000000;
}

.info {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  cursor: pointer;
  padding: .5rem;
}

.modal {
  /* Remove "opacity: 0; visibility: 0;" to view the modal. */
  position: fixed;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal.open {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.modal-bg {
  position: absolute;
  background: none;
  width: 100%;
  height: 100%;
}

.modal-container {
  border-radius: .5rem;
  background: #0f1828;
  position: relative;
  padding: 2rem;
}

.modal-close {
  position: absolute;
  right: .5rem;
  top: .5rem;
  outline: none;
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
}

.modal-container h1 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: .5rem;
}

.modal-container h2 {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 2rem;
}

.modal-container a {
  color: #fff;
}

.feather-info {
  opacity: 0;
  transition: opacity .5s ease-out;
  -moz-transition: opacity .5s ease-out;
  -webkit-transition: opacity .5s ease-out;
  -o-transition: opacity .5s ease-out;
}

.feather-info-hover, .feather-info:hover {
  opacity: 1;
}