/* cursor */ 
   html, body {
     cursor: url('resources/cursor.png'), auto;
     background-image: url("resources/background.png");
     background-repeat: repeat; 
     background-position: top center;
     font-family: 'Comic Sans MS', 'Comic Sans', cursive;
     color: white;
     text-align: center;
     font-size: 15px;
     margin: 0;
     padding: 0;
     
}
a:hover {
    cursor: url('resources/cursorclick.png'), pointer;
}
/* button style */
.custom-button {
     display: block;
     width: 150px;
     height: 40px;
     background-color: transparent;
     border: 2px solid blue;
     color: blue;
     font-size: 14px;
     border-radius: 20px;
     cursor: url('resources/cursorclick.png'), auto;
     text-align: center; 
     align-items: center;
     line-height: 40px;
     text-decoration: none;
     margin: 10px auto;
     transition: all 0.3s ease;
     gap: 10px;
}
.custom-button:visited {
     color: blue;
}
.custom-button:hover {
     background-color: rgba(200, 20, 20, 0.2);
     color: red;
}

/* page doll */
#sticky-doll {
     position: fixed;
     bottom: 10px;
     right: 10px;
     z-index: 9999;
}
#sticky-doll img {
     width: 400px;
     height: auto;
}
/* side bar */
nav {
     z-index: 10;
     background-color: rgba(0, 0, 0, 0.7);
     position: absolute;
     padding: 10px;
     height: 95%;
     width: 300px;
     border-radius: 15px;
     align-items: center;
}
a {
     color: #007bff;
     text-decoration: none;
}
a:visited {
     color: #007bff;
  }
a:hover {
     color: #0056b3;
}
/* message box style */
.message-box {
     background-color: rgba(0, 0, 0, 0.7);
     border-radius: 15px;
     padding: 20px;
     width: 700px;
     margin: 0 auto;
}
.message-box p {
     color: white;
     font-size: 15px;
}