/*ATTRIBUTES: 
/* Title font generated by https://www.textstudio.com/
/* Minecraft Music Soundtrack from https://downloads.khinsider.com/game-soundtracks/album/minecraft
/* Sound effects from https://minecraft.wiki/w/Category:Sound_effects */
:root{
    --background-image-url:url('minecraft-bg-resized.gif');
    --background-color: #FFFFFF;
    --background-overlay-color: #00000060;
    --modal-background-color:#00000060;


    --tooltip-color:#120312E6;
    --tooltip-border-color: #23005a;

    --header-text-color: #54fcfc;
    --header-text-shadow-color:#153e3e;
    --stats-text-color:#00a800;
    --stats-text-shadow-color: #002a00;

    --button-background-color: #6e6e6e;

    --inventory-button-text-color: #FFFFFF;

    --inventory-button-color-hover:  #898ACB;
    --inventory-button-text-color-hover: #FFFFA0;
}

@font-face{
    font-family: 'VT323';
    font-style:normal;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/vt323/v18/pxiKyp0ihIEF2isQFJXGdg.woff2) format('woff2');
}

html {
    font: 14pt 'VT323', sans-serif
}

body{
    margin:0;
    overflow:hidden;
    background-image:var(--background-image-url);
    background-color: var(--background-overlay-color);
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    min-height:100vh;
}
.title{
    width:100vw;
    display:flex;
    align-items:center;
    /* padding-left:15%;
    padding-right:15%; */
    filter:drop-shadow(10px 15px #000000e6);
}

.title img{
    width:90%;
    height:100%;
}

#music-player{
    height:3vw;
    aspect-ratio:1/1;
    cursor:pointer;
}

#music-player img{
    width:100%;
    height:100%;

}

.inventory-button-container{
    padding-left:40vw;
    padding-right:40vw;
    padding-top:10%;
    width:100vw;
}

#inventory-button{
    width:20%;
    min-width:200px;
    aspect-ratio:7/1;
    background-color: var(--button-background-color);
    border:2px solid #000000;
    box-shadow: inset -2px -4px #0006, inset 2px 2px #FFF7;
    text-align:center;
    color:var(--inventory-button-text-color);
    cursor:pointer;
    text-shadow: #252525 2px 2px;
}

#inventory-button:hover{
    background-color: var(--inventory-button-color-hover);
    color: var(--inventory-button-text-color-hover);
}


.inventory-container{
    display:none;
    position:fixed;
    top:0;
    z-index:1;
    width:100vw;
    height:100vh;
    background-color:var(--modal-background-color);
    overflow:hidden;
}

.minecraft-inventory{
    background-image: url('minecraft-inventory-image.png');
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    position:relative;
    opacity:100%;
    margin:auto;
    width:40vw;
    aspect-ratio:1/1;
    filter:drop-shadow(5px 5px #000000);
}

.inventory-grid{
    position:absolute;
    inset: 49% 89.5% 51% 10.5%;
    width:75%;
    height:25%;
    display:grid;
    grid-template-rows: repeat(3, 33.33%);
    grid-template-columns:repeat(9, 11.11%);
}

.bottom-inventory-grid{
    position:absolute;
    inset: 76% 0% 0% 10.5%;
    width:75%;
    height:8%;
    display:grid;
    grid-template-rows: repeat(1, 100%);
    grid-template-columns:repeat(9, 11.11%);

}

.avatar-section{
    position: absolute;
    inset: 14.5% 0% 0% 19%;
    width:24%;
    height:32%;

}
.avatar-section img{
    width:100%;
    padding-top:20%;
}

.avatar-grid{
    position:absolute;
    inset: 14.5% 0% 0% 10.5%;
    width:8%;
    height:32%;
    display:grid;
    grid-template-rows: repeat(4, 25%);
    grid-template-columns:repeat(1, 100%);
}


.crafting-table{
    position:absolute;
    inset: 23% 0% 0% 47.5%;
    width:16%;
    height:15.5%;
    display:grid;
    grid-template-rows: repeat(2, 50%);
    grid-template-columns:repeat(2, 50%);
}

.crafting-table-result{
    inset: 27% 0% 0% 73%;
    position: absolute;
    width:8%;
    height:8%;

}

.item:hover{
    background-color:#5c5c5c80;
}

.item img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.item img:hover{
    scale:2;
    rotate: 20deg;
}

/* You can add custom ids to the individual items to add animations and hover interactions! */
#shuffle:hover{
    rotate: -20deg;
}

.item-tooltip{
    display:none;
    position:absolute;
    z-index:1;
    width:200px;;
    height:fit-content;
    border: 5px solid var(--tooltip-border-color);
    color:var(--background-color);
    font-family: VT323;
    margin:20px;
    padding:15px;
    text-align:center;
    text-shadow: 2px 2px #3e3e3e;
    background-color:var(--tooltip-color);
}

.header-text{
    color:var(--header-text-color);
    text-shadow: 2px 2px var(--header-text-shadow-color);
    text-decoration:underline wavy;
}

.stats-text{
    color:var(--stats-text-color);
    text-shadow: 2px 2px var(--stats-text-shadow-color);
}

.container-under-inventory{
    width:100%;
    text-align:center;
    color:#FFFFFF;

}