/* 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: black;
  color: #F1cF00;
  font-family: monospace, monospace;
  margin: 0;
  padding: 0;
}

main {
  display: flex; /*flexbox my beloved*/
  max-width: 100dvw;
  height: 100dvh;
  margin: 0;
}

.ghoti {
  display: block; /*pov: you made a duct tape ahh fix to your site and can't be bothered to name it*/
}

.focus, .sidebar {
  float: left;
  margin: auto;
  margin-top: 20px;
  margin-right: 20px;
  margin-left: 20px;
  margin-bottom: 20px;
  width: 75%;
  border: 3px solid #f1cf00;
  padding: 30px;
  /*flex-grow: 1;
  flex-direction: column;*/
  overflow: scroll;
}

.my-balls {
  width: 100in;
  height: 100in;
}

.sidebar {
  width: 25%;
}

.very-center {
  text-align: center;
}

em {
  background-color: #F1cF00;
  color: black;
  font-style: normal;
}

#cent {
  width:100%;
  display: flex;
  justify-content: center;
}

footer {
  background-image: url(/glbl_gfx/triangle_favi.gif); 
  background-position: left;
  background-repeat: no-repeat;
  background-size: auto;
  height: 32px; /* adjust height as needed */
  width: 32px; /* adjust width as needed */
}
/* HOW TO DO MULTIPLE IMAGES IN CSS:
NO-REPEAT
AUTO
MAKE SURE TO ADJUST THE WIDTH AND HEIGHT TO FIT*/

:link {
  color: #F1cF00;
}
:visited {
  color: #F1cF00;
}

a {
  text-decoration: none;
}

a:hover {
  background-color: #F1cF00;
  color: black;
  animation: blinkOpacity 0.4s step-end infinite;
}

/*????????????idfk*/
@keyframes blinkOpacity {
  0%, 100% { color: black; }
  50% { color: #F1cF00; }
}