@import url('https://googleapis.com');
@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;500;600;700&display=swap');

body {
    background-color: black;

    background-image: url('https://file.garden/ZLptrSeVhBA68gx4/resources/backgrounds/stars.gif');
    animation: starsScroll 20s linear infinite;

    cursor: url('https://file.garden/ZLptrSeVhBA68gx4/resources/cursors/sburb/SburbDefaultUprightClosed.cur'), auto;

    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated;                 /* Universal support since 2021   */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */

}

p {
    color: #4d4d4d;
}

p:hover {
    color: #000000;
}

h1.a {
    font-family: "Pixelify Sans", sans-serif;
    color: white;
}
h1.a:hover {
    font-family: "Pixelify Sans", sans-serif;
    color: rgb(189, 189, 189);
}

h2.a {
    font-family: "Pixelify Sans", sans-serif;
    color: rgb(0, 0, 0);
}
h2.a:hover {
    font-family: "Pixelify Sans", sans-serif;
    color: rgb(54, 54, 54);
}

::selection {
  background-color: #000000;
  color: #ffffff;
}

.mainContent {
    align-content: center;
    width: min(900px, 90%);
    margin: auto;
}

.box {
    font-family: MS Gothic;
    padding-bottom: 10px;
    background-color: rgb(255, 255, 255);

    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 10px;

    padding: 10px;
    background-color: rgb(255, 255, 255);

    min-height: 500px;
}

.boxleft, 
.boxcenter,
.boxright {
    font-size: 12px;
    text-align: center;

    border: 1px dashed black;
    padding: 10px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.boxofthebox {
    font-size: 14px;

    padding: 10px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.links {
    font-size: 15px;
    text-align: left;
    font-family: "MS Gothic";
}

.pronouns {
  width: 150px;
  cursor: pointer;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease;
}
.pronouns:hover {
    transform: scale(1.2);
}

.hoverBig {
  cursor: pointer;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease;
}
.hoverBig:hover {
    transform: scale(1.1);
}

.hoverBigIncline {
  cursor: pointer;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease;
}
.hoverBigIncline:hover {
    transform: rotate(5deg) scale(1.1);
}

a {
    color: rgb(150, 150, 150);
    cursor: url('https://file.garden/ZLptrSeVhBA68gx4/resources/cursors/sburb/SburbDefaultUprightLink.cur'), auto;
}

a:hover {
    color: rgb(83, 83, 83);
    font-style: italic;
}

.footer {
    text-align: center;
    padding: 10px;
    color: white;
    font-family: MS Gothic;
    font-size: 12px;
}

.adventure1 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
}

.advIMG {
    border: 2px solid rgb(81, 81, 81);
}


.info {
    font-size: 15px;
    text-align: left;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;   
}

@keyframes starsScroll {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 40px 500px;
    }
}