@font-face {
font-family: 'popjoy';
src: url('PopJoy.otf') format('truetype');
}

body {
  background-color: black;
  color: white;
  font-family: 'popjoy';
  font-size: 130%;
  line-height: 200%;
  margin: 20px;
  cursor: url('Wii-Cursor.png'), auto;
    }
    
.text-window {
  border: 3px solid black; /* Adds a border to the box */
  padding: 15px; /* Adds space between the text and the border */
  margin: 0 auto; /* Adds space around the box */
  background-color: #f9f9f9; /* Sets a background color */
  width: 70%; /* Sets a fixed width for the box */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
    }
    
.text-window-icon {
    position: relative;
    right: -46%;
    width: 45px;
    display: center;
    margin: 0 auto;
    animation: rock-star 1.2s infinite ease-in-out; /* 2s duration, infinite loop, alternates direction */
    transform-origin: center; /* Ensure the image rotates around its center */
}

@keyframes rock-star {
    0% {
        transform: rotate(-15deg); /* Start slightly left */
    }
    50% {
        transform: rotate(15deg); /* End slightly right */
    }
     100% {
        transform: rotate(-15deg); /* Start slightly left */
    }
}

ul {
    list-style-image: url('star-small.png');
        
    }
    
.pulsing {
    /* Set initial position/display properties if needed, e.g., to center it */
    display: center;
    margin: 0 auto;
    
    /* Apply the animation */
    animation: pulsing 2s infinite ease-in-out; /* 2s duration, infinite loop, alternates direction */
    transform-origin: center; /* Ensure the image rotates around its center */
}

@keyframes pulsing {
    0% {
        transform: scale(100%); /* Start slightly left */
    }
    50% {
        transform: scale(105%); /* End slightly right */
    }
     100% {
        transform: scale(100%); /* Start slightly left */
    }
}

.rocking {
    /* Set initial position/display properties if needed, e.g., to center it */
    display: center;
    margin: 0 auto;
    
    /* Apply the animation */
    animation: rock 3s infinite ease-in-out; /* 2s duration, infinite loop, alternates direction */
    transform-origin: center; /* Ensure the image rotates around its center */
}

@keyframes rock {
    0% {
        transform: rotate(-5deg); /* Start slightly left */
    }
    50% {
        transform: rotate(5deg); /* End slightly right */
    }
     100% {
        transform: rotate(-5deg); /* Start slightly left */
    }
}

.img-starhover {
-webkit-mask-image: url(https://i.imgur.com/WPTnhzY.png);
-webkit-mask-size: 250%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
 transform:rotate(0deg);
transition:0.3s;
}

.img-starhover:hover{
  -webkit-mask-size: 100%;
  transform:rotate(-15deg);
  transition:0.3s;
}