body {
    margin: 0;
    background-color: #F9C22E;
    color: white;
    font-family: 'Press Start 2P', cursive;
}

.main-wrapper {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
}

.title {
    word-break: break-all;
}

#title-main {
    display: none;
}

.board {
    background-color: #ff4b3e;
    display: grid;
    height: calc(100vw - 30px * 2);
    width: calc(100vw - 30px * 2);
    margin: 30px;
    box-sizing: border-box;
    border-radius: 30px;
    position: relative;
    /* box-shadow: 0 0 5px 5px white; */
    padding: 10px;
}

.slot {
    display: inline;
    cursor: pointer;
    position: relative;
    padding: 5%;
}

.hover-piece {
    filter: saturate(60%) opacity(0.5)  brightness(1.5) drop-shadow(0 0 5px white);
}

.slot img {
    width: 100%; /* should be min (parent width, parent height). this assumes cols > rows */
} 

.form-wrapper {
    background-color: #ff8c2d;
    padding: 20px;
    width: 40%;
}

#sizeform {
    display: flex;
    justify-content: space-between;
    width: 100%;
    min-width: 220px;
}

#sizeform > * {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: none;
    flex-shrink: 1;
    margin: 10px;
}

#sizeform > * > input {
    width: 100%;
    padding: 3%;
}

#reset {
    margin: 10px 0;
}

#win-message {
    width: 100%;
}

/* @media screen and (min-width:) */

@media screen and (min-width: 884px),
screen and (orientation: landscape) {
    .main-wrapper {
        flex-direction: row;
    }

    body::before {
        content: ""; 
        color: white;
        position: fixed;
        width: 100vw;
        background-color: #ff8c2d;
        z-index: -1;
        height: 65vh;
        top: 15vh;
    }
    
    #title-main {
        display: none;
    }

    #title-side {
        margin: 0;
    }

    .form-wrapper {
        margin: 25vh auto;
        background: none;
        padding: 0 30px;
    }

    .board {
        height: calc(100vh - 30px * 2);
        width: calc(100vh - 30px * 2);
        min-width: calc(100vh - 30px * 2);
        margin-left: auto;
    }

    #sizeform {
        flex-direction: column;
        width: 60%;
        margin: 25px 0;
    }

    #sizeform > * {
        margin: 0;
    }

    #sizeform > .input-group {
        display: flex;
        flex-direction: row;
        width: 100%;
        min-width: 220px;
        padding: 10px 0;
        justify-content: space-between;
    }  

    #submit {
        margin: 10px 0 0 0;
    }

    #sizeform > * > input {
        width: 50px;
    }
}

input, button {
    border-radius: 8px;
    border: none;
}

button {
    border: 0;
    padding: 10px;
    background-color: #ff4b3e;
    color: white;
    cursor: pointer;
    text-align: center;
    width: 100%;
}

button,
input {
    font-family: 'Press Start 2P', cursive;
}