:root {
    --header-border-radius: 20px;
    --shadow-dir: 0px 0px
}
.henny-penny-regular {
    font-family: "Henny Penny", system-ui;
    font-weight: 400;
    font-style: normal;
  }
  
.emilys-candy-regular {
    font-family: "Emilys Candy", serif;
    font-weight: 400;
    font-style: normal;
}
.mountains-of-christmas-regular {
    font-family: "Mountains of Christmas", serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .mountains-of-christmas-bold {
    font-family: "Mountains of Christmas", serif;
    font-weight: 700;
    font-style: normal;
  }
  

html, body {
    cursor: url("cursor.png"), default;
    /* just change the cursor.ico path to your location */
}

body {
    background-color: #FF4C4C;
    font-size: 5vw;
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100%;
}
@keyframes shake {
    0% {
        transform: translateY(0.1%);
    }
    100% {
        transform: translateY(-1%);
    }
}

#header {
    font-size: 5vw;
    background-color: #F3FEB8;
    padding: 5px;
    display: flex;
    justify-content: center;
    border-bottom-left-radius: var(--header-border-radius);
    border-bottom-right-radius: var(--header-border-radius);
}

#labelDiv {
    min-height: 50vh;
    display: flex;
    justify-content: center;
}

#label {
    margin: auto;
    color: white;
    animation: float 5s linear infinite;
    font-size: 4vw;
    /*text-shadow: var(--shadow-dir) 0px rgba(0,0,0, 0.5);*/
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(10px); }
    100% { transform: translateY(0px); }
}

@keyframes floatPlus {
    0% { transform: translateX(0px); }
    50% { transform: translateX(10px); }
    100% { transform: translateX(0px); }
}

@keyframes floatFun {
    0% {transform: rotate(0deg);}
    25% {transform: rotate(-15deg);}
    75% {transform: rotate(15deg);}
    100% {transform: rotate(0deg);}
}

@keyframes wiggle {
    0% { transform: rotate(0deg); }
   80% { transform: rotate(0deg); }
   85% { transform: rotate(5deg); }
   95% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

#newNamePromptDiv {
    display: flex;
    justify-content: center;
}

#newNameButton {
    font-size: 3.5vw;
    margin: auto;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0);
    border-width: 2px;
    border-style: solid;
    border-color: #fff1b1;
    color: white;
    animation: wiggle 1s linear infinite;
    text-shadow: var(--shadow-dir) black;
    display: table-cell;
    vertical-align: bottom;
}

#newNameButton:hover {
    animation: float 0.1s linear infinite;
    cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>😳</text></svg>") 16 0,auto; /*!emojicursor.app*/;
}
#newNameButton:active {
    scale: 0.9;
}

#lastDiv {
    position: sticky;
    bottom: 0;
    font-size: 2vw;
    display: flex;
    justify-content: center;
    color: rgba(255, 255, 255, 0.24);
}

#lastDiv:hover {
    color: white;
}