body {
     /* max-width: 99%; */
     transform: skewY(.5deg);
     border: 2px solid black;
     margin: 15px 10px;
     padding: 15px;
     /* box-sizing: border-box; */
     min-height: 90vh;
 }

 main {
     /* margin: 0; */
     /* padding: 0; */
     /* min-height: 100vh; */
 }

 .nav-item {
     cursor: pointer;


 }

 h4 {
     margin: 0;
     padding-top: 0;
     /* max-height: 20px; */

 }

 .hot {
     /* position: relative; */
     height: 15px;
     transform: scale(1.7, 1.7) translateY(-3px);
     z-index: -1;
 }


 .cursor {
     animation: blink 0.5s step-start infinite;
     font-weight: bolder;
     /* font-size: large; */
     margin-top: 0;


 }

 ul,
 li {
     /* list-style-type: '\27A3'; */
     /* all:unset; */
     /* font-size: small    ; */
     margin: 0;
 }

 .back_left {
     position: absolute;
     margin: 0;
     padding: 0;
     left: 1px;
     top: 0px;
 }

         .back_right {
            position: absolute;
            margin: 0;
            padding: 0;
            right: 1px;
            top: 0px;
        }

 .category {
     margin: 0;
     padding: 0;
 }

 .category_list {
     display: none;
 }

 .loading {
     width: 100%;
     max-width: 250px;
     height: auto;
 }

 a {
     display: inline-block;
     text-decoration: none;
     transition: transform 100ms ease;
 }

 a:hover {
     transform: scale(1.1);

 }

 .credits {
    position: absolute;
    margin: 0;
    padding: 0;
    left: 1px;
    bottom: 1px;
    font-size: small;
    color: rgb(171, 171, 171);
    /* bottom: 0px; */
 }



 @keyframes blink {
     0% {
         opacity: 1;
     }

     50% {
         opacity: 0;
     }

     100% {
         opacity: 1;
     }
 }


 /* 1. Wrap the character in a span and set to inline-block */
.spin-char {
  display: inline-block;
  animation: spin 2s linear infinite;
  
}

/* 2. Define the rotation animation */
@keyframes spin {
  from { transform: rotateX(0deg);}
  to { transform: rotateX(360deg); }
}