*
{
    transition: all 0.15s;
}

body
{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

h1
{
    text-align: center;
    margin: 1em;
    color: black;
}

h2
{
    color: black;
    font-size: 32px;
}

p
{
    font-size: 32px;
    color: black;
}

img, #demi, #demiDiv
{
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

.hidden
{
    display: none !important;
}

.fakeHidden
{
    opacity: 0;

    -webkit-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#wrapper
{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
}

#startMenu
{
    width: 100%;
    height: 100%;
}

#startList
{
    margin: auto;
    height: auto;
    width: 400px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: top;
    align-items: center;
}

.startMenuButton
{
    width: 100%;
    max-width: 90vw;
    background-color: #00000040;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 1em 0;
    padding: 1em 0;
    border: none;
    border-radius: 0.5em;
}

.startMenuButton:hover
{
    scale: 105%;
}

#credits
{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    justify-content: top;
    align-items: center;
}

.creditsHeader
{
    text-align: center;
    font-weight: bold;
}

.creditsNames
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin: 0 0.5em;
    width: 95%;
}

.creditsNames > p
{
    text-align: center;
    width: 30%;
}

.creditsPara
{
    margin: 1em;
}

#game
{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 75% 25%;
    position: relative;
}

#cuttingBoard
{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 10vh 1fr;
}

#dialogueBoard
{
    position: relative;
    max-height: 100vh;
    z-index: 2;
}

#rafters
{
    width: auto;
    height: 100%;
    margin: 0 2em;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#percentage
{
    text-wrap: nowrap;
}

#floor
{
    height: 100%;
    overflow-y: scroll;
}

#cuttingRoomFloor
{
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    flex-wrap: wrap;
    overflow-y: visible;
    padding-right: 24px; /* accounts for check / xmark */
}

#showingRoomFloor
{
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    flex-wrap: wrap;
    overflow-y: visible;
}

#continueButton
{
    margin: 1em;
    padding: 0.5em;
    pointer-events: all;
    position: absolute;
    bottom: 0;
    right: 0;
}

.monstyrCuttyr
{
    display: flex;
    flex-direction: column;
    margin: 0.5em;
    position: relative;
    justify-content: center;
    align-items: center;
    background-color: #00000010;
    padding: 0.5em;
    border-radius: 0.5em;
}

.monstyrCuttyr:hover:not(:disabled)
{
    scale: 105%;
    z-index: 2;
}

.cutOverlay
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #00000080;
}

.cutCheckbox
{
    display: none;
}

.cutterImgDiv
{
    margin-left: 72px;
}

.cutterImgDiv > img
{
    aspect-ratio: 1 / 1;
    width: 96px;
    margin-left: -72px;
}

.mark
{
    background: none;
    width: 72px;
    position: absolute;
    bottom: -36px;
    right: -36px;
    z-index: 2;
    pointer-events: none;
}

#diaBox
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    border: 4px solid black;
    border-radius: 1em;
    position: absolute;
    right: 2em;
    bottom: 45%;
    width: 90%;
    background-color: #ffffffb0;
    pointer-events: none;
}

#diaText
{
    margin: 0.5em;
}

#diaContinue
{
    margin: 0.5em;
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: right;
    align-items: center;
}

#diaContinue > img
{
    margin: 0 3em;
}

#demiDiv
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    position: absolute;
    bottom: -5%;
    left: 50%;
    transform: translate(-50%, 0%);
    height: 45%;
    aspect-ratio: 1 / 1;
}

#demi
{
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

#diaClicker
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 999;
}

#dataPrecursor
{
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
}

#dataPrecursor > p
{
    text-align: center;
}

#dataMenu
{
    width: 100%;
    height: auto;
}

#monsterDataMenu
{
    width: 100%;
    height: 60%;
    overflow-y: scroll;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    flex-wrap: wrap;
}

#dialogueDataMenu
{
    width: 100%;
    height: 60%;
    overflow-y: scroll;
    margin: 1em;
}

#background
{
    position: absolute;
    z-index: -999;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    min-width: 100vw;
    min-height: 100vh;
    overflow: hidden;
}

#overBackground
{
    position: absolute;
    z-index: -998;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: #ffffff90;
}

#continueButton
{
    background-color: #00000010;
    border: none;
    border-radius: 0.5em;
    padding: 2em;
    border: 0px solid white;
}

#continueButton:hover:not(:disabled)
{
    scale: 110%;
}

#continueButton:not(:disabled)
{
    border: 8px solid white;
    border-left-color: rgb(241, 241, 241);
    border-bottom-color: rgb(241, 241, 241);
}

#continueButton:disabled
{
    filter: opacity(20%);
}

@media screen and (max-width: 1600px)
{
    p
    {
        font-size: 28px;
    }
}

@media screen and (max-width: 1150px)
{
    #game
    {
        grid-template-columns: 66% 1fr;
    }
}

@media screen and (max-width: 1050px)
{
    .creditsNames > p
    {
        width: 45%;
    }
}

@media screen and (max-width: 800px)
{
    #game
    {
        grid-template-columns: none;
        grid-template-rows: 66% 1fr;
    }

    #diaBox
    {
        left: 50%;
        transform: translate(-50%, 0%);
        width: 90%;
    }

    #diaText
    {
        margin-right: 9em;
        margin-bottom: 2em;
    }

    #diaContinue
    {
        position: absolute;
        top: 0;
    }

    #demiDiv
    {
        left: 70%;
        transform: translate(-50%, 0%);
        height: 90%;
    }

    .creditsNames > p
    {
        width: 95%;
    }

    #cuttingRoomFloor, #showingRoomFloor
    {
        justify-content: center;
    }

    .cutterImgDiv
    {
        margin-left: 48px;
    }

    .cutterImgDiv > img
    {
        width: 64px;
        margin-left: -48px;
    }

    .mark
    {
        width: 48px;
        bottom: -24px;
        right: -24px;
    }
}

@media screen and (max-width: 600px)
{
    h2
    {
        font-size: 28px;
    }

    p
    {
        font-size: 24px;
    }

    #diaText
    {
        margin-right: 4em;
        margin-bottom: 5em;
    }
    
    .cutterImgDiv
    {
        margin-left: 32px;
    }

    .cutterImgDiv > img
    {
        width: 48px;
        margin-left: -32px;
    }
}