@font-face {
  font-family: 'JuliaMono';
  src: url("JuliaMono-Regular.woff2") format("woff2");
  font-variant-ligatures: none;
}

body {
  perspective: 1024px;
  font-family: 'JuliaMono', monospace;
  color: white;

  min-height: 97vh;
  background-color: black;
}

pre {
  display: block;
  font-size: 16px;
  color: white;
  text-align: center;
}

button {
  cursor: pointer;
  color: white;
  font-size: 16px;
  font-family: 'JuliaMono' !important;
  padding: 0;
  border: none;
  background: none;
}

a {
  cursor: pointer;
  text-decoration: none;
  color: white;
}

.disabled {
  display: none;
}

.menu a {
  font-size: 16px;
}

.menu {
  float: left;
}

/* dropdown lists */
.dropdown {
  text-align: center;
  position: relative;
  display: inline-block;
}

.dropdown-content {
  padding-bottom: 1em;
  top: 0;
  display: none;
  position: fixed;
}

.dropdown:hover .dropdown-content{
  display: block;
}

.dropdown-content li:hover:after { content: ' ]' }

.dropdown-content li:hover:before { content: '[ ' }

ul {
  padding-left: 0;
  padding-top: 8px;
}

li {
  width: 8em;
  margin-bottom: 4px;
  list-style-type: none;
  padding-left: 0;
}

.i {
  color: cyan;
}

/* floating object (text) */
.object {
  transform: translate(-50%, 0);
  position: fixed;
  left: 50%;
  top: 25%;

  background-color: transparent;
  text-align: center;
  border-radius: 16px;
  color: white;
}

/* for floating keyboard */
.link {
  transition: 1s;
  text-align: left;
  width: 1ch;
  height: 1em;

  background-color: black;
  display: inline-block;
  position: fixed;
  
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.link:hover {
  z-index: 2;
  width: fit-content;
  height: fit-content;
}

.lower {
  border: 2px solid white;
  color: gray;
}

/* mobile auto rotating galaxy */
.galaxy {
  border: none;
  font-size: 32px;
  transform: translate(-50%, -25%) rotateX(55deg);
  
  color: white;
  text-shadow: 0 0 16px white;
  animation: rotate-animation 64s linear infinite;
}

@keyframes rotate-animation {
  0% { transform: translate(-50%, -25%) rotateX(55deg) rotateZ(0deg);}
  50% { transform: translate(-50%, -25%) rotateX(55deg) rotateZ(180deg);}
  100% { transform: translate(-50%, -25%) rotateX(55deg) rotateZ(360deg);}
}

.galaxy-arms {
  font-size: 32px;
  transform: rotateY(7deg) translate(-50%, -25%);

  color: cyan;
  text-shadow: 0 0 16px cyan;
  animation: rotate-shift-animation 64s linear infinite;
}

@keyframes rotate-shift-animation {
  0% { transform: translate(-50%, -25%) rotateX(55deg) rotateY(7deg) rotateZ(0deg);}
  50% { transform: translate(-50%, -25%) rotateX(55deg) rotateY(7deg) rotateZ(180deg);}
  100% { transform: translate(-50%, -25%) rotateX(55deg) rotateY(7deg) rotateZ(360deg);}
}