/* 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 {
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative; /* gives .black-bar something to anchor to */
  background-color: black;
  color: white;
  font-family: monospace;
  background: url('wtf.gif') repeat;
  background-size: 480px 400px;
  cursor: url('custom-cursor.png'), auto;
}
button:hover, .enter-button:hover {
  cursor: url('custom-click.png'), pointer;
}

.black-bar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 960px;
  top: 0;
  bottom: 0;
  background-color: black;
  z-index: -2;
}
a {
    color: ghostwhite;
}
.back-button {
  position: absolute;
  top: 10px;    
  left: 10px;    
  width: 88px;   
  height: 31px;   
  cursor: url('custom-click.png'), pointer;
  z-index: 10;   
}

.back-button {
  transition: transform 0.2s ease;
}
.back-button:hover {
  transform: translateY(-3px);
}

a:hover {
    color: rebeccapurple;
}

a:visited {
    color: #cecece;
}


.container {
      display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
    justify-items: center;
    align-items: center;
    margin: 0 auto; 
    padding: 10px;
    
}

.fancy-border {
border: 10px solid transparent;
border-image: url("border.png") 17 stretch;
    
 display: inline-block;
    
text-align: center;
    border: 3px solid white;
    width: 310px; 
    height: 310px;
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;

}

.nav-image {
  display: inline-block;
  transition: transform 0.3s ease;
  cursor: url('custom-click.png'), pointer;
}

.nav-image:hover {
  transform: translateX(5px);
}

.fancy-border img {
    max-width: 100%;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.fancy-border img:hover {
    transform: scale(1.05);

}
  .border {
    border: 10px solid;
    border-image: url('Border.png') 20 round;
}

.journal-container {
  position: relative;
  width: 960px;
  margin: 0 auto;            /* centers it horizontally */
  color: white;              /* ensures readable text */
  padding: 40px 60px;        /* spacing inside the black bar */
  z-index: 1;                /* keeps it above the black bar */
  text-align: left;          /* normal paragraph alignment */
  line-height: 1.6;          /* improves readability */
}

.button-top-right {
  position: absolute;
  top: 20px;          /* distance from the top edge */
  right: 20px;        /* distance from the right edge */
  width: 88px;        /* ensures the button keeps its real size */
  height: 31px;
  z-index: 1000;      /* keeps it above everything */
  cursor: pointer;    /* optional, makes it feel interactive */
  image-rendering: auto; /* keeps crisp edges if it’s pixel art */
}

.button-top-right:hover {
  transform: translateY(-3px);
}