/* Common CSS */

@font-face {
    font-family: Itim;
    src: url("assets/fonts/Itim-Regular.ttf");
}


:root{
    --bg-shade1: #726467;
    --bg-shade2: #020000;
    --bg-gradient-angle: 110deg;
    --bg-gradient: linear-gradient(var(--bg-gradient-angle), var(--bg-shade1), var(--bg-shade2), var(--bg-shade1));

    --border-shade: #CFA467;

    --font-color: #FFFEFF;

    --main-font: Itim;

    --div-background: rgba(0, 0, 0, 0.5);

    --div-background-hovered: rgba(150,150,150,0.5);
}

body{
    background-image: var(--bg-gradient);
    background-size: 300%;
    height: 100vh;
    width: 100vw;
    margin:0;
    animation: scroll-background 60s infinite alternate;
    color: var(--font-color);
    font-family: var(--main-font), sand-serif;
}

@keyframes scroll-background{
    0%{
        background-position: bottom left;
    }
    100%{
        background-position: top right;
    }
}

.main-container{
    width: calc(100% - 2rem);
    height: calc(100% - 2rem);
    max-width: 177.77vh;
    max-height: 56.25vw;
    margin: 0 auto;
    padding: 1rem;
    display: flex;
    flex-flow: column;
}

.bg-divs{
    background: var(--div-background);
}

.bottom-margin{
    margin-bottom: 1rem !important;
}

.no-margins{
    margin: 0 !important;
}

.text-center{
    text-align: center !important;
}

.text-right{
    text-align:end !important;
}

.gold-bordered{
    border: solid 3px var(--border-shade);
    border-radius: 1rem;
}

.gameplay-section{
    width: 100%;
    flex:1;
}

.gameplay-window{
    width: 100%;
    box-sizing: border-box;
    position:relative;
}

.shop-window{
    display:none;
}

.shop-window-inner{
    width: 100%;
    height: 100%;
    box-sizing:border-box;
    display: flex;
    flex-flow:column;
}

.shop-header{
    border-bottom: var(--border-shade) 3px solid;
    padding: 1rem;
}

.shop-items{
    flex:1;
    overflow-y:auto;
}

.shop-item{
    padding: 1rem;
    display: flex;
    align-items:center;
    justify-content: space-between;
}

.shop-item:hover{
    background: var(--div-background-hovered);
}

.shop-item:active{
    background: black;
}

.shop-item-description{
    width:75%;
    display: flex;
    align-items: center;
    justify-content: start;
}

.shop-item-description img{
    margin-right: 0.5rem;
}

.shop-item-price{
    width: calc(25% - 0.5rem);
}

.shop-item-price .cost-display-section{
    display:flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.25rem;
}

.hanii-button{
    position:absolute;
    left: calc(50% - 100px);
    top: calc(50% - 100px);
    width:200px;
    height:200px;
    border-radius:50px;
    border: none;
    background: none;
    /* background-image: url("assets/images/haniikComfy.png"); */
}


.score-display-section {
    border-top: var(--border-shade) 3px solid;
    display:flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
}

.score-display-text{
    font-size: 48px;
    margin-left: 1rem;
    font-weight: bold;
}


/* Large screen specific CSS */
@media only screen and (min-width: 768px) {
    .gameplay-section{
        display: inline-grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
        "a a b"
        "a a b";
        column-gap: 1rem;
    }

    .gameplay-window{
        grid-area: a;
    }

    .shop-window{
        grid-area: b;
        display: block;
    }
}