@import url('https://fonts.googleapis.com/css2?family=Pirata+One&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

#coin{
    background: transparent;
    border: none;

    width:400px;
    height:400px;
    padding:0;

    animation: rotate 25s infinite;
    animation-timing-function: linear;

    border-radius: 50%;

    cursor: pointer;

}

@keyframes rotate {
  100% {transform: rotate(360deg);}
}

#coin img{

    width:400px;
    height:400px;
    transition:20ms;
    user-select: none;
    -webkit-user-drag: none;

}

#coin:active img{

    width:375px;
    height:375px;


}

body{

    background-image: url("Assets/background.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100%;
    width: 100%;
    margin: 0;

    display:flex;
    font-family: "Pirata One", system-ui;

    
}

#clickerdiv {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

html{

    height:100%

}


#coindiv{

    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    width:100%;


}

#scorediv{

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /* height:100%; */
    /* width:100%; */

    font-size: 40px;

}

#upgradediv{

    display: flex;
    flex-direction: column;
    align-items: center;

    width: 33%;

    background-image: url("Assets/upgradesbackground.png");
    
    
    overflow-y:scroll;
    scrollbar-width: none;


}

#upgradediv::-webkit-scrollbar {
  display: none;
}

.upgrade img{

    width:50px;
    height:50px;
    margin-right:10px;

}

.upgrade{

    display: flex;
    align-items: center;
    width:90%;
    margin:10px;
    background-color: rgba(255, 255, 255, 0.74);
    font-family:"Playfair Display";
    font-weight: 600;
    transition:400ms;
    cursor: pointer;


}

.upgrade *{

    transition: 400ms;

}

.gray{

    background-color: rgba(129, 129, 129, 0.74);
    cursor:not-allowed;

}

.blurred * {

    filter: blur(3px);

}

.owned{

    font-size: 75px;
    margin-left: auto;
    margin-right: 10px;

}

#score{
    margin: 0%;
    margin-top: 25px;
}

#scorepersecond{

    margin: 0%;
    font-size: 20px;
    font-family: "Playfair Display";
}

#prestigediv{

    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    height: 200px;
    flex-direction: column;


}

#prestigebutton{

    font-size: 30px;
    justify-content: center;
    border-radius: 15px;
    background-color: rgb(185, 218, 255);
    transition: 500ms;
    margin: 10px;
    padding-left: 10px;



    

}

#prestigebutton:hover{

    background-color: rgb(66, 69, 255);


}

/* .prestigehelpdiv{

    font-size: 30px;
    width: 20px;
    height: 40px;
    padding-left: 10px;
    padding-right: 10px;
    justify-content: center;
    border-radius: 15px;
    background-color: rgb(185, 218, 255);
    transition: 500ms;
    cursor: help;


    display: block;

}

.prestigehelpdiv:hover{

    background-color: rgb(66, 69, 255);


} */


.prestigehelpdiv {
  position: relative;
  display: inline-block; /* Or block, depending on your needs */
}


.tooltiptext{

    visibility: hidden;
    opacity: 0;
    pointer-events: none; 
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -120px; 
    margin-right: -120px;
    font-size: 20px;
    transition: opacity 0.3s;

}


.prestigehelpdiv:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.prestigehelpdiv{

    background: rgb(185, 218, 255);
    transition: 500ms;;
    padding: 8px;
    border-radius: 15px;
    

}

.prestigehelpdiv:hover{

    background-color: rgb(66, 69, 255);


}

#prestigereq{

    display: flex;
    justify-content: center;
    padding: 5px;
    background-color: rgb(185, 218, 255);
    border-radius: 10px;
    text-align: center;
    

}

#videodiv{

    position:fixed;
    display: none;
    height: 100;
    width: 100vw;

}

#prestigevideo{


    transition: 1000ms;
    width: 100vw;
    height: 100%;
    


}