@font-face {
    font-family: SmoothFantasy;
    src: url("Smooth\ Fantasy.ttf");
}

@font-face {
    font-family: Dustyland;
    src: url("Dustyland\ Demo.otf");
}

html, body {
    padding: 0%;
    margin: 0px;
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    overflow: auto;

    color: rgb(36, 24, 11);
    font-family: Dustyland;
    font-size: 14pt;
    text-shadow: 1px 1px 0 rgb(139, 112, 75);

    background-color: #FAC179;
}

h1, h2, h3, h4, h5, h6 {
    width: 100%;
    background-color: rgb(95, 18, 18);
    margin: 0px;
    padding: 8px;
    text-align: center;
    box-sizing: border-box;
    color: rgb(224, 202, 202);
    font-family: Dustyland;
    text-shadow: -2px -2px 0 rgb(139, 31, 31), 2px -2px 0 rgb(139, 31, 31), -2px 2px 0 rgb(139, 31, 31), 2px 2px 0 rgb(139, 31, 31);
}

img {
    image-rendering: pixelated;
}

.panel {
    background-color: rgb(252, 216, 170);
    box-shadow: 2px 2px 6px rgb(36, 31, 17);
}

.overflow {
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgb(126, 108, 85) rgb(216, 185, 144);
}

.overflow::-webkit-scrollbar {
    width: 8px;
    background-color:rgb(216, 185, 144);
}
.overflow::-webkit-scrollbar-thumb {
    width: 8px;
    background-color: rgb(126, 108, 85);
}

.layout {
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.main-layout {
    width: 100%;
    height: 100%;
    flex-direction: row;
}

.left-layout {
    width: 320px;
    margin-left: 32px;
    margin-bottom: 32px;
    margin-top: 32px;
}

.left-layout img, .right-layout img, .mix-button img {
    -webkit-filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black) 
                    drop-shadow(-1px 1px 0 black) drop-shadow(1px -1px 0 black)
                    drop-shadow(1px 1px 0 white) drop-shadow(-1px -1px 0 white)
                    drop-shadow(-1px 1px 0 white) drop-shadow(1px -1px 0 white);
    filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black) 
            drop-shadow(-1px 1px 0 black) drop-shadow(1px -1px 0 black)
            drop-shadow(1px 1px 0 white) drop-shadow(-1px -1px 0 white)
            drop-shadow(-1px 1px 0 white) drop-shadow(1px -1px 0 white);
}

.center-layout {
    flex-grow: 1;
    height: 100%;
    padding: 64px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-image: url('graphics/AlchemyCircle.png');
    background-size: contain;
    background-position: center;
    image-rendering: pixelated;
    background-origin: content-box;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.work-area-ingredients {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 128px;
}

.work-area-ingredient {
    object-fit: cover;
    height: 128px;
    width: 128px;
    margin: 16px;
    -webkit-filter: drop-shadow(2px 2px 0 black) drop-shadow(-2px -2px 0 black) 
                    drop-shadow(-2px 2px 0 black) drop-shadow(2px -2px 0 black)
                    drop-shadow(2px 2px 0 white) drop-shadow(-2px -2px 0 white)
                    drop-shadow(-2px 2px 0 white) drop-shadow(2px -2px 0 white);
    filter: drop-shadow(2px 2px 0 black) drop-shadow(-2px -2px 0 black) 
            drop-shadow(-2px 2px 0 black) drop-shadow(2px -2px 0 black)
            drop-shadow(2px 2px 0 white) drop-shadow(-2px -2px 0 white)
            drop-shadow(-2px 2px 0 white) drop-shadow(2px -2px 0 white);
    transition: translate 600ms;
}

.hidden-ingredient {
    translate: 0px -800px;
}

.invisible-ingredient {
    opacity: 0;
}

#work-area-ingredient-1.mixing {
    translate: 144px 160px;
}

#work-area-ingredient-2.mixing {
    translate: 0px 160px;
}

#work-area-ingredient-3.mixing {
    translate: -144px 160px;
}

.complete-potion {
    opacity: 0;
    position: fixed;
    width: 128px;
    height: 128px;
    top: 524px;
    right: calc(50% - 64px);
    transition: top 600ms, right 600ms;
    -webkit-filter: drop-shadow(2px 2px 0 black) drop-shadow(-2px -2px 0 black) 
                    drop-shadow(-2px 2px 0 black) drop-shadow(2px -2px 0 black)
                    drop-shadow(2px 2px 0 white) drop-shadow(-2px -2px 0 white)
                    drop-shadow(-2px 2px 0 white) drop-shadow(2px -2px 0 white);
    filter: drop-shadow(2px 2px 0 black) drop-shadow(-2px -2px 0 black) 
            drop-shadow(-2px 2px 0 black) drop-shadow(2px -2px 0 black)
            drop-shadow(2px 2px 0 white) drop-shadow(-2px -2px 0 white)
            drop-shadow(-2px 2px 0 white) drop-shadow(2px -2px 0 white);
}

.complete-potion-animation-1 {
    opacity: 100%;
    top: 384px;
    right: calc(50% - 64px);
}

.complete-potion-animation-2 {
    opacity: 100%;
    top: 128px;
    right: 64px;
}

.cauldron {
    width: 256px;
    height: 256px;
    transition: width 200ms, height 200ms;
}

.cauldron-animation {
    width: 320px;
    height: 320px;
}

.mix-button {
    position: fixed;
    bottom: 32px;
    border: 2px solid rgb(139, 31, 31);
    border-radius: 32px;
    background-color: rgb(95, 18, 18);
    color: rgb(224, 202, 202);
    font-family: Dustyland;
    text-shadow: -2px -2px 0 rgb(139, 31, 31), 2px -2px 0 rgb(139, 31, 31), -2px 2px 0 rgb(139, 31, 31), 2px 2px 0 rgb(139, 31, 31);
    font-size: 18pt;
    box-shadow: 2px 2px 6px rgb(36, 31, 17);
    transition: background-color 300ms, color 300ms, bottom 300ms linear;
}

.mix-button:hover {
    background-color: rgb(124, 28, 28);
    color: antiquewhite;
}

.mix-button-clicked {
    transform-origin: center bottom;
    transform: perspective(1000px) rotateX(-10deg) rotateY(10deg) rotateZ(2deg);
}

.mix-button-hidden {
    bottom: -128px;
}

.right-layout {
    width: 320px;
    margin-right: 32px;
    margin-bottom: 32px;
    margin-top: 32px;
}

.ingredient {
    box-sizing: border-box;
    padding: 8px;
    border-radius: 16px;
    margin: 8px;
    background-color: #FAC179;
    box-shadow: 2px 2px 6px rgb(36, 31, 17);
    transition: margin 300ms, box-shadow 300ms, transform 300ms;
}

.ingredient:hover {
    margin-top: 4px;
    margin-bottom: 12px;
    margin-left: 6px;
    margin-right: 10px;
    box-shadow: 4px 4px 10px rgb(36, 31, 17);
    user-select: none;
}

.ingredient-clicked {
    transform-origin: center bottom;
    transform: perspective(1000px) rotateX(-10deg) rotateY(10deg) rotateZ(2deg);
}

.recipe {
    box-sizing: border-box;
    padding: 8px;
    border-radius: 16px;
    margin: 8px;
    background-color: #FAC179;
    box-shadow: 2px 2px 6px rgb(36, 31, 17);
    height: 204px;
    overflow: hidden;
    transition: height 300ms;
}

.recipe-start {
    height: 0px;
}

.icon {
    display: inline-block;
    text-align: center;
    border-radius: 100%;
    background-color: #705637;
    text-shadow: -2px -2px 0 white, 2px -2px 0 white, -2px 2px 0 white, 2px 2px 0 white;
    color: black;
    font-size: 18pt;
    font-weight: bold;
    width: 32px;
    height: 32px;
}