@import url('/main.css');

html {
  background-color: #000;
  background-image: url('/images/background.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
  background-size: cover;
}
#button { position: fixed; top: .4rem; right: 2%; z-index: 88; font-size: .85rem; line-height: 1.2; }
#com { position: fixed; top: .4rem; left: 2%; z-index: 88; font-size: .85rem; line-height: 1.2; }
#button a { display: inline-block; padding: .25rem .6rem; background: #000; border: 1px solid cyan; border-radius: .25rem; text-decoration: none; }
#button a:hover { box-shadow: 0 0 8px cyan; }
#com { padding: .25rem 0; font-weight: bold; text-shadow: 0 0 6px #000; }
/* Sit low enough that the logo in the background stays visible above the form. */
#main {
  width: min(52rem, calc(100% - 2rem));
  margin: 27vh auto 3rem;
  text-align: center;
  border-radius: 1.3rem 0 1.3rem 0;
  background: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / 0%) 100%);
}
@media (max-width: 600px) {
  #com, #button { top: .4rem; font-size: .75rem; line-height: 1.2; max-width: 42%; }
  #com { left: 3%; padding: .25rem 0; }
  #button { right: 3%; }
  #button a { padding: .25rem .5rem; }
}
@media (orientation: landscape) and (min-width: 1600px) {
  #com, #button { top: .8rem; }
}
@media (orientation: landscape) {
  #main { margin-top: 45vh; }
}