* {
    box-sizing: border-box;
}

html {
    --t-blue: #85d0ff;
    --t-yellow: #ffdd84;
    --t-brown: #83785c;
    --t-dullblue: #747a8c;
    width: 100%;
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0;
}

header {
    height: 90px;
    min-height: 90px;
    background-color: var(--t-blue);
    padding: 0 20px;
}

main {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    gap: 10px;
    padding: 10px;
}

@media screen and (max-width: 500px) {
    main {
        flex-direction: column;
    }
}

main>div {
    width: 100%;
    height: 100%;
}

main>div:nth-child(1) {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
}

main>div:nth-child(2) {
    border: none;/*2px dotted var(--t-dullblue);*/
    border-radius: 10px;
    padding: 10px;
}

#grid-cont {
    display: flex;
    flex-grow: 1;
}

#grid-furthercont {
    display: grid;
    overflow: hidden;
}

#grid {
    position: relative;
    aspect-ratio: 1;
    border: 2px solid var(--t-blue);
    overflow: hidden;
    max-width: 500px;
    min-width: 150px;
}

#grid>* {
    aspect-ratio: 1;
    position: absolute;
}

#grid>*.piece {
    cursor: pointer;
}

#grid>*>* {
    background-color: black;
    width: 100%;
    height: 100%;
}

#grid>*.rook>* {
    /**/
    transform: scale(0.3);
}

#grid>*.piece>* {
    transform: scale(0.3);
}

#grid>*.piece-pawn>* {
   clip-path: polygon(50% 0, 70% 7%, 80% 25%, 77% 40%, 70% 50%, 70% 80%, 100% 80%, 100% 100%, 0 100%, 0 80%, 30% 80%, 30% 50%, 23% 40%, 20% 25%, 30% 7%);
}

#grid>*.piece-rook>* {
    clip-path: polygon(0 0, 20% 0%, 20% 20%, 40% 20%, 40% 0, 60% 0, 60% 20%, 80% 20%, 80% 0, 100% 0, 100% 40%, 70% 40%, 70% 80%, 100% 80%, 100% 100%, 0 100%, 0 80%, 30% 80%, 30% 40%, 0 40%);
}

#grid>*.piece-bishop>* {
    clip-path: polygon(50% 0, 39% 8%, 55% 23%, 55% 31%, 47% 31%, 31% 16%, 27% 29%, 29% 40%, 35% 50%, 35% 80%, 0 80%, 0 100%, 100% 100%, 100% 80%, 65% 80%, 65% 50%, 71% 40%, 73% 29%, 69% 16%, 61% 7%);
}

#grid>*.piece-queen>* {
    clip-path: polygon(0 100%, 0 80%, 30% 80%, 30% 45%, 0 45%, 0 0, 25% 25%, 50% 0, 75% 25%, 100% 0, 100% 45%, 70% 45%, 70% 80%, 100% 80%, 100% 100%);
}

#grid>*.piece-knight>* {
    clip-path: polygon(49% 0%, 41% 6%, 32% 18%, 26% 27%, 32% 34%, 41% 28%, 51% 22%, 54% 31%, 41% 47%, 35% 59%, 30% 80%, 0 80%, 0 100%, 100% 100%, 100% 80%, 70% 80%, 70% 65%, 73% 46%, 77% 34%, 79% 23%, 78% 15%, 75% 9%, 70% 4%, 59% 0);
}

#grid>*.piece:hover>* {
    background-color: var(--t-brown);
}

/* Start general styles */

button {
    width: fit-content;
    cursor: pointer;
    padding: 0;
    border: none;
    margin: 0;
    background-color: transparent;
    text-decoration: underline;
}

/* End general styles */