/* Global stilsättning */
* {
    scroll-behavior: smooth;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/* Jag har valt att använda mig av :root för att enklare ge mig kontrollen att ändra färger om jag under kodandets gång märker att det inte blev snyggt
    Dessutom slipper jag reppetera mig med samma färgkod om och om igen då jag endast behöver ge attributet en gång dvs --bg-primary.
*/
:root {
    /* Grupp med variablar för färgsättning av text*/
    --text-primary: black;
    --text-secundary: rgb(252, 252, 252);

    /*Grupp med variablar för färgsättning av "Foreground"*/
    --fg-primary: linear-gradient(to bottom right,rgb(86, 223, 233), rgb(2, 92, 119));

    /* Foreground Secundary */
    --fg-secundary: rgba(255,255,255,0.65);
    --fg-secundary-hover:rgb(107, 162, 184) ; 
    --fg-secundary-active:rgb(57, 87, 99) ;

    /*Grupp med variablar för färgsättning av "Background"*/
    --bg-primary: url("../img/wood.webp");
    --bg-secundary: url("../img/wonderland.webp");

}

html{
    height: 100vh;
    background-image: var(--bg-secundary);
    background-repeat: no-repeat;
    background-size: cover;
}

body{
    
    height: 100%;
}

#wrapper{
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: auto;
    gap: auto;
    grid-template-rows: auto 1fr auto;
    justify-content: center;
}

#clicker-wrapper{
    grid-area:  clck;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;

}

#clicker-object{
    width: 600px;
    margin-top: 20px;
    margin-bottom: 40px;
    transition: 100ms;
}
#clicker-object img{
    width: 100%;
    height: 100%;
    user-select: none;
    transform: scaleY(1.05) scaleX(1.2);
}

#clicker-object:hover{
    cursor: pointer;
    transform: scale(1.05);
}

#clicker-object:active{
    cursor: pointer;
    transform: scale(0.95);
}

/* Förråd visar hur mycket pengar användaren har, samt visar antalet på varje uppgradering hen har.*/
#inventory{
    display: flex;
    width: 100%;
    justify-content: space-between;
    color: var(--text-primary);

    background-image: var(--fg-primary);
    background-repeat: no-repeat;
    background-size: cover;

    padding: 5px;
    border-radius: 2px;

    font-size: xx-large;
    font-weight: bolder;
    
}

/* Pengar */
#purse{
    margin-left: 10px;
    user-select: none;

}

/* Förråd för uppgraderingar */
#storage{
    display: flex;
    margin-left: 10px;
    gap: 10px;
    grid-area: stor;
    user-select: none;
}



/* Butiksdelen */
#store{
    display: flex;
    width: 100%;
    
    /* height: 254px; */
    padding: 20px;
    font-size: larger;
    font-weight: bold;

    background-repeat: no-repeat;
    background-size: cover;
    
    background-image: var(--bg-primary);

    grid-area: stor;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;

    
}

/* Vattenstämpel */
#store p{
    position: fixed;
    color: var(--text-secundary);
    padding-left: 10px;
    left: 0;
    top: 97%;
}

/* Style för affärs-knapparna*/
.button {
    color: var(--text-primary);
    display: flex;
    justify-content: start;
    font-size: large;
    gap: 10px;
    flex-direction: row-reverse;
    align-items: center;
    background-image: var(--fg-primary);
    padding: 15px;
    box-shadow: 0px 5px 3px 5px rgba(0, 0, 0, 0.274);
    transition: all ease-in-out 50ms;
    
}
.button:hover {
 cursor: pointer;
 filter: brightness(.8);
}
.button:active{
    filter: brightness(.6);
}
.button:nth-child(2){
    border-radius: 50px 0 0 50px;
}
.button:last-child{
    border-radius: 0 50px 50px 0;
}
.button img{
    height: 70px;
}

/* Mediaqueries */
@media (max-width:1920px) {
    #clicker-object{
        margin-top: unset;
        margin-bottom: unset;
        
    }

    #store{
        height: auto;
        
    }
}

@media (max-width:1500px) {
    #clicker-object{
        width: 400px;
        
    }

    .button, .button:nth-child(2) , .button:last-child{
        border-radius: 50px;
    }

}


@media (max-width:1000px) {
    #inventory{
        flex-direction: column;
    }


}

@media (max-width:550px) {
    #clicker-object{
        width: 350px;
    }

}