:root {
    --royal_purple: #61104a;
    --red_pink: #b62980;
    --gold_yellow: #F9E5A1;
    --soul_green: #6AFFB7;
}

@font-face {
    font-family: "Macondo";
    src: url("../Fonts/Macondo-Regular.ttf");
  }
@font-face {
    font-family: "CeasarDressing";
    src: url("../Fonts/CaesarDressing-Regular.ttf");
  }

@keyframes grave_click {
    from {width: 90%; height: 90%;}
    to {width: 100%; height: 100%;}
}
@keyframes grave_idle {
    0% {rotate: 0deg};
    25% {rotate: 15deg;}
    50% {rotate: 0deg};
    100% {rotate: -15deg;}
}

h1 {
    font-family: "CeasarDressing", sans-serif;
    color: var(--gold_yellow);
}

p {
    font-family: "Macondo", sans-serif;
}

.none {
    display: none;
}





.top_bar {
    height: fit-content;
    padding: 2rem;

    display: flex;
    align-content: center;
    justify-content: center;

    background-color:var(--royal_purple);
    outline-color: var(--gold_yellow);
    outline-style: ridge;
    outline-width: 0.5rem;
    z-index: 2;
}
.background {
    height: 20rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    flex-direction: column;
    background-image: url("../img/Grave_Background.png");
    background-size: cover;
    background-position: center;
}

.stats {
    margin-inline: auto;
    width: min(100% - 0rem, var(--container-max, 60ch));
    padding: 0.5rem;
    background-color: black;
    opacity: 70%;
    z-index: 0;
    color: white;

    outline-color: var(--gold_yellow);
    outline-style: ridge;
    outline-width: 0.5rem;
    border-radius: 1rem;

    display: flex;
    flex-direction: column;
    align-items: center;
}
.counter_title {
    color: var(--soul_green);
    font-family: "CeasarDressing", sans-serif;
}

.button_frame {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    height: 60%;
}
#grave_clicker {
    aspect-ratio: 1 / 1;
    width: min(80% - 0rem, var(--container-max, 25ch));
    background-color: transparent;
    border: none;
    
    
}
#grave_clicker img {
    width: 90%;
    height: 90%;
    margin-inline: auto;


    animation: 0.5s linear 1s infinite alternate grave_idle; 
    /* animation-name: grave_idle;
    animation-duration: 1s;
    animation-iteration-count: infinite; */

}
#grave_clicker:hover {
    cursor: pointer;
}
#grave_clicker:active img {
    animation-name: grave_click;
    animation-duration: 1;

}



.upgrades_background {
    background-color: var(--royal_purple);
    width: 100%;
    height: fit-content;
    outline-color: var(--gold_yellow);
    outline-style: ridge;
    outline-width: 0.5rem;
}
#upgrades_menu {
    width: min(95% - 0rem, var(--container-max, 120ch));
    margin-inline: auto;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    flex-grow: 1;
}
.upgrade {
    background-color: purple;
    display: flex;


    width: min(90% - 0rem, var(--container-max, 55ch));
    height: fit-content;
    margin: 0.5rem;
    border-style: ridge;
    border-width: 0.3rem;
    border-color: var(--red_pink);
}

.u_text {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: min(90% - 0rem, var(--container-max, 30ch));
}

.u_img {
    background-size: cover;
    background-position: center;
    aspect-ratio: 1 / 1;
    width: min(30% - 0rem, var(--container-max, 20ch));
}

.u_name {
    color: var(--gold_yellow);
    margin-inline: 0.5rem;
}

.u_description {
    padding: 0.5rem;
    flex-grow: 1;
    background-color: black;
    color: white;
}

.button {
    background-color: var(--soul_green);
    border: outset;
    border-color: #1f7548;
    border-width: 0.35rem;
}

.button:hover {
    border: inset;
    border-color: #1f7548;
    border-width: 0.35rem;
    background-color: #86ff9e;
}

.button_off {
    background-color: rgb(255, 90, 90);
    border: outset;
    border-color: #b02828;
    border-width: 0.35rem;
}

.button_off:hover {
    background-color: rgb(255, 135, 135);
    border: inset;
    border-color: #b02828;
    border-width: 0.35rem;
}

#u_template {
    display: none;
}