/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #191825;
  color: #AF47D2;
  font-size: 24px;
  font-family: "Quantico", "Verdana";
}

aside {
  width: 300px;
  padding: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;
  background-color: #00000;
  color: #31E1F7;
  border-style: dotted;
  border-color: #31E1F7;
  border-width: medium;
  border-radius: 5px;
}

a {
  color: #31E1F7;
  background-color: #00000;
  font-weight: bold;
}

/* Teal Starcraft Pointer - https://www.cursors-4u.com/cursor/cur66 */
* {
  cursor: url('https://cdn.cursors-4u.net/previews/teal-starcraft-pointer-d08f1d5f-32.webp') 32 32, auto !important;
}
/* End www.Cursors-4U.com Code */

/* AEI homepage */
/* Styling of the planets choice list on the AEI page. */
/* stylesheet: https://jdan.github.io/98.css/ adapted to current project*/
.title-bar-controls button {
border:none;
border-radius:0;
box-sizing:border-box;
color:transparent;
min-height:23px;
min-width:75px;
transform:scale(1.5);
padding:0 12px;
text-shadow:0 0 #222;
}

.title-bar-controls button {
background:#616161;
box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
}

.title-bar-controls button:not(:disabled):active {
box-shadow:inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey;
text-shadow:1px 1px #222;
}

@media (not(hover)){
button:not(:disabled):hover {
box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}
}

.title-bar-controls button:focus {
outline:1px dotted #000;
outline-offset:-4px;
}

.title-bar-controls button::-moz-focus-inner { border:0 }

.window, .title-bar {
font-family: "Quantico", Verdana;
-webkit-font-smoothing: none;
font-size: 24px;
}

.window {
box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #bbbbbb, inset -2px -2px #505050, inset 2px 2px #bebebe;
background: #353535;
color:#000;
padding: 3px;
width: 60%;
}

.title-bar {
background:linear-gradient(90deg, #AF47D2, rgb(193, 112, 218), #f0d1ff);
padding: 3px 2px 3px 3px;
display: flex;
justify-content: space-between;
align-items: center;
}

.title-bar-text {
font-weight: bold;
color: white;
letter-spacing: 0;
margin-right: 24px;
}

.title-bar-controls {
display: flex;
}

.title-bar-controls button {
padding: 0;
display: flex;
min-width: 16px;
min-height: 14px;
margin: 7px;
}

.title-bar-controls button:active {
padding: 0;
}

.title-bar-controls button:focus {
outline: none;
}

.title-bar-controls button[aria-label=Minimize]{
background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/minimize.svg");
background-position:bottom 3px left 4px;
background-repeat:no-repeat
}

.title-bar-controls button[aria-label=Maximize]{
background-image:url("https://raw.githubusercontent.com/jdan/98.css/4a2282dd9170cabf730fb5803d1153d86b2e94e3/icon/maximize.svg");
background-position:top 2px left 3px;
background-repeat:no-repeat;
}

.title-bar-controls button[aria-label=Close]{
background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/close.svg");
background-position:top 3px left 4px;
background-repeat:no-repeat;
margin-left:2px;
}

.window-body {
margin: 8px;
}

#choosing-planets {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #353535;
  display: flex;
  justify-content: space-evenly;
}

#choosing-planets li a {
  display: block;
  color: #31E1F7;
  border-style: dotted;
  border-color: #31E1F7;
  border-width: medium;
  border-radius: 5px;
  padding: 14px 16px;
  text-decoration: none;
}

#choosing-planets li a:hover {
  background-color: #000000;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted #353535;
  cursor: pointer;  
}

.tooltiptext {
  visibility: hidden;
  width: 240px;
  background-color: #353535;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -120px;
}

.tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
/* End styling of the planets choice list on the AEI page. */
/* End AEI page */

/* Font */
.quantico-regular {
  font-family: "Quantico", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.quantico-bold {
  font-family: "Quantico", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.quantico-regular-italic {
  font-family: "Quantico", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.quantico-bold-italic {
  font-family: "Quantico", sans-serif;
  font-weight: 700;
  font-style: italic;
}
/* End font */