body {
  font-family: "Courrier New", monospace;
  font-size: 16px;
  
  background: linear-gradient(#232946, #020816);
  min-height: 100vh;
  
  color: white;
  margin: 0 auto;
}
/* HEADER */
.header {
  background: linear-gradient(to right, #020816,#232946);
  display: flex;
  position: sticky;
  top: 0;
  font-size: 30px;
  height: 80px;
  border-bottom: 5px solid darkslateblue;
}
.header > * {
  align-content: center;
  /* position: relative; */
  transition: width 0.25s, max-width 0.25s;
  max-width: 275px;
  width: 25vw;
  border-left: ridge 10px darkslateblue;
}
.header > * > * {
  display: none;
  font-size: 20px;
  letter-spacing: 3px;
}
.header > *:hover {
  width: 30vw;
  max-width: 325px;
  background: linear-gradient(to right, #1a2373, transparent);
}
.header > *:hover > * {
  display: block;
}
.text {
  background-color: #232960;
  border: 3px dashed darkslateblue;
  border-radius: 12px;
  margin: 15px 10px;
}
a {
  color: #8389c0;
  text-decoration: none;
}