@font-face {
    font-family: 'CustomFont'; /* Provide a name for your custom font */
    src: url('GloriaHallelujah-Regular.ttf') format('truetype'); /* Path to your font file */
    /* You can also specify other font properties here, such as font-weight and font-style */
}

body {
    margin: 0;
    height: 100vh;
    height: 100svh;
    width: 100vw;
    width: 100svw;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #372d3e;
}

body-wrapper {
    height: 96vh;
    height: 96svh;
    width: 96vw;
    width: 96svw;
    padding-top: 2vh;
    padding-bottom: 2vh;
    padding-right: 2vw;
    padding-left: 2vw;
    padding-top: 2svh;
    padding-bottom: 2svh;
    padding-right: 2svw;
    padding-left: 2svw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}

#shapeDeck {
    display: flex;
    width: 96%;
    justify-content: space-between;
    margin-bottom: 1vw;
    margin-top: 1vw;
    gap: 2%;
    background-color: #372d3e;
}

.shapeSlot {
    flex: 1 0 0;
    aspect-ratio: 1;

    border-radius: 3vw;
    background-color: #9ec9ff;
    overflow: hidden;

    border-top: 0.5vw solid #92c0f2;
    border-left: 0.5vw solid #92c0f2;
    border-right: 0.5vw solid #83a5ee;
    border-bottom: 0.5vw solid #83a5ee;
}

@keyframes smoothSwing {

    0%,
    100% {
        transform: rotate(-2deg);
    }

    50% {
        transform: rotate(2deg);
    }
}

.draggable {
    cursor: grab;
}

img {
    touch-action: none;
    width: 10vh;
    height: 10vh;
    filter:
        opacity(0.2)
        /* To apply the color all over the image */
        drop-shadow(0 0 0 red)
        /* To apply my costum color */
        drop-shadow(0 0 0 red)
        /* To apply my costum color */
        drop-shadow(0 0 0 red)
        /* To apply my costum color */
        drop-shadow(0 0 0 red)
        /* To apply my costum color */
        drop-shadow(0 0 0 red)
        /* To apply my costum color */
}


.img-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
}

.animation-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 50%;
}

.img-wrapper.draggable .animation-wrapper {
    touch-action: none;
    animation: smoothSwing 1s infinite ease-in-out;
}

#canvasArea {
    height: 60vh;
    max-height: 60vh;
    flex-grow: 0;
    width: 96%;
    box-sizing: border-box;
    border: 0.5vw solid #000;
    border-radius: 2vw;
    background-color: #fcebd7;
    overflow: hidden;

    border-top: 0.5vw solid #fefefd;
    border-left: 0.5vw solid #fefefd;
    border-right: 0.5vw solid #fc7a5b;
    border-bottom: 0.5vw solid #fc7a5b;
}

#gameSection {
    background-color: azure;
}


.gameScreen {
    width: 100%;
    height: 30vh;
    height: 30svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 150%;
}

#initialScreen {
    width: 100%;
    height: 100%;
    background-color: #372d3e;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}

.gameScreen button {
    width: 40%;
    height: 8vh;
    margin: 1vh;
    border-radius: 3vw;
    font-weight: bold;
    font-size: 2vh;
    padding: 0;
}

#initialScreen button {
    width: 40%;
    height: 6vh;
    margin: 1vh;
    border-radius: 2vh;
    color: #ffffff;
    font-weight: bold;
    font-size: 3vh;
    padding: 0;
}

#resultsScreen h2 {
    width: 40%;
    height: 6vh;
    margin: 1vh;
    border-radius: 2vh;
    color: #ffffff;
    font-weight: bold;
    font-size: 3vh;
    padding: 0;
}

#resultsScreen table {
    color: #ffffff;
    font-size: 3vh;
}

button {
    color: #ffffff;
    background-color: #ffb585;
    border-top: 0.5vw solid #fefefd;
    border-left: 0.25vw solid #fefefd;
    border-right: 0.25vw solid #fc7a5b;
    border-bottom: 0.5vw solid #fc7a5b;
}

button:disabled{
    background-color: #fe8861;
    border-top: 0.5vw solid #fefefd;
    border-left: 0.25vw solid #fefefd;
    border-right: 0.25vw solid #fc7a5b;
    border-bottom: 0.5vw solid #fc7a5b;
}

button:hover{
    background-color: #fe8861;
    border-top: 0.5vw solid #ffb585;
    border-left: 0.25vw solid #ffb585;
    border-right: 0.25vw solid #cb6c4d;
    border-bottom: 0.5vw solid #cb6c4d;
}

button:active{
    background-color: #cb6c4d;
    border-top: 0.5vw solid #ffb585;
    border-left: 0.25vw solid #ffb585;
    border-right: 0.25vw solid #b15f43;
    border-bottom: 0.5vw solid #b15f43;
}

.gameScreen input {
    border: 0.5vw solid #fc7a5b;
    color: #372d3e;
    font-weight: bold;
    height: 6vh;
    width: 50%;
    margin: 2%;
    margin-top: 4vh;
    font-size: 3vh;
}

.gameScreen select {
    border: 0.5vw solid #fc7a5b;
    color: #372d3e;
    font-weight: bold;
    height: 4vh;
    width: 40%;
    font-size: 2vh;
    border-radius: 1vw;
}

p {
    color: white;
    font-size: 3vh;
}

#playerList {
    margin-top: 2vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start
}

.gameScreen span {
    color: #ffffff;
    background-color: white;
    font-weight: bold;
    width: 60vw;
    font-size: 3vh;
    border-radius: 1vw;
}

@media screen and (orientation: landscape) {
    body-wrapper {
        /* Set the max-width and max-height to the same value to make the element square.
       The value used here (e.g., 100vh) makes the element's size dependent on the viewport height,
       ensuring it remains square even when the width exceeds the height. */
        max-width: 80vh;
        max-height: 100vh;
        /* Adjust the width or height if needed to maintain the square shape, depending on your layout requirements */
    }
    #initialScreen {
        max-width: 80vh;
        max-height: 100vh;
    }
}

#npcDialog img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 70svw;
    width: 70svw;
    height: 70svw;
    height: 70svw;
    filter: none;
}

#npcDialog {
    width: 100svw;
    width: 100svw;
    height: 100svh;
    height: 100svh;
    position: absolute;
    background-color: #00000088;
}

#dialogTextWrapper {
    border-radius: 5vw;
}

#dialogTextWrapper {
    position: absolute;
    left: 5vw;
    margin-right: 15vw;

    padding: 2vw;
    left: 5svw;
    right: 5svw;
    bottom: 30svh;

    background-color: white;
    border-top: 0.5vw solid #372d3e;
    border-left: 0.5vw solid #372d3e;
    border-right: 0.5vw solid #372d3e;
    border-bottom: 0.5vw solid #372d3e;
}

#dialogTextWrapper button {
    margin-right: 5vw;
    font-size: 3vh;
    border-radius: 2vh;
    padding-left: 4vw;
    padding-right: 4vw;
    margin-bottom: 1vh;
}

#dialogText {
    color: #372d3e;
    padding-bottom: 1vh;
    font-size: 3vh;
    font-size: 3svh;
}