body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Ensure body takes up full viewport height */
    background-image: url("images/sourcesbgimg.png");

    background-size: cover;
    background-repeat: no-repeat;

    font-family: ms gothic;


}


 #fade {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  animation: fadein 3s forwards;
  background-color: rgb(0, 0, 0);
  
  justify-content: center;
  pointer-events: none;
  position: fixed;
  z-index: 99999999999999;
}

@keyframes fadein {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes fadeout {
    from {opacity: 0;}
    to {opacity: 1; }
}
.hover-me {
  position: absolute;
  rotate: -90deg;
  left: 400px;

}
.window-body {
    border-radius: 10px;
}

.window-body.has-space {
    display: block;
    border-radius: 10px;
    padding: 20px;
    width: 0;
    background: rgb(255, 255, 255);
    height: 370px;

    transition: width 0.5s ease;
    overflow-y: scroll;
    font-family: ms gothic;
}

.window-body.has-space:hover  {
    width: 14em;

}

.window-active {
  display: flex;
  align-items: flex-start;
  padding: 10px;
}


#content {
  flex: 1;
  background: white;
  height: 342px;
  padding: 20px;
  border-radius: 10px;
}

a {
  font-family: nintendo;
  display: inline-block;
  width: 0;
  transition: width 0.5s ease, background-color 0.5s ease;
  background-image: linear-gradient(to right, transparent, transparent);

}


ul a:hover {
  background-image: linear-gradient(to right, rgb(119, 119, 119), white);
  color: white;
  width: 100px;

}

summary {
  font-family: ms gothic;
}


.Nav {
  display: inline-flex;
}

.Nav a {
  font-family: ms gothic; 
  margin-left: 250px;
  margin-right: 120px;
  padding: 10px;
}


  /* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/cursors/cur-11/cur1054.cur), auto !important;} /* End https://www.cursors-4u.com */