/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
  cursor: url(https://kunpaarzin.neocities.org/cursors/Shiny%20Poochyena1.png), auto;
}

a:hover, button:hover, .link:hover, .auto { 
  cursor: url(https://kunpaarzin.neocities.org/cursors/Shiny%20Mightyena1.png), pointer;
  
  }

/* FONTS */

@font-face {
    font-family: "Dovahkiin"; 
    src: url("https://kunpaarzin.neocities.org/fonts/Dovahkiin.otf") format("opentype");
}


/* IDs */

/* The #DOVAH IDs are for making Dovah text lines go from black to white.
      Example line of HTML code:  <h1 id="dovah">KUNPÄRZIN</h1>*/

#dovah {
 text-align: center; 
 font-family: Dovahkiin; 
 color: black 
}

#dovah:hover {
  color: white
}

/* CLASSES */

/* This class will cause an item to GROW on HOVER.*/

.grow { 
  transition: all .2s ease-in-out; 
}

.grow:hover { 
  transform: scale(1.1); 
}

/* This class will cause an item to SHRINK on HOVER.*/

.shrink { 
  transition: all .2s ease-in-out; 
}

.shrink:hover { 
  transform: scale(0.9);
}

  /* This class will cause an item to GLOW on HOVER.*/

.glow {
  transition: all .2s ease-in-out
}

.glow:hover {
  font-size: 80px;
  color: #fff;
  text-align: center;
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}

/* These classes are for the TOOLTIPS. */

/* Example line of HTML tooltip code: <span class = "tooltip"> type the visible underline text here <span class = "tooltiptext"> type the tooltip text revealed on hover here ::after </span> </span>

 /* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 2px dotted pink; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 250px;
  background-color: #13092D;
  color: hotpink;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -150px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.2s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #13092D transparent transparent transparent;
}

/* Show tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}