body {
    margin: 0;
    padding: 0;
    background: #00272f;
}

.frame {
    --block-size: 35px;
    top: 50%;
    left: 50%;
    margin-left: calc(-6 * var(--block-size));
    margin-top: calc(-7 * var(--block-size));
    height: calc(14 * var(--block-size));
    width: calc(12 * var(--block-size));
    position: absolute;
    display: grid;
    grid-template-rows: var(--block-size) calc(12 * var(--block-size)) var(--block-size);
}

.board {
    height: calc(12 * var(--block-size));
    width: calc(12 * var(--block-size));
    background: #5fcde4;
    border-radius: 8px;
    display: grid;
    grid-template-columns: repeat(12, var(--block-size));
    grid-template-rows: repeat(12, var(--block-size))
}

.block {
    width: var(--block-size);
    height: var(--block-size);
    border-radius: 8px;
}

.empty {
    background: #cbdbfc;
}

.wall {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pjxzdmcgdmlld0JveD0iMCAwIDMyIDMyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZS8+PGcgZGF0YS1uYW1lPSIxNS1XYWxsIiBpZD0iXzE1LVdhbGwiPjxwYXRoIGQ9Ik0yOSwwSDNBMywzLDAsMCwwLDAsM1YyOWEzLDMsMCwwLDAsMywzSDI5YTMsMywwLDAsMCwzLTNWM0EzLDMsMCwwLDAsMjksMFpNMiwzQTEsMSwwLDAsMSwzLDJIMTVWN0gyWk0yMiw5djZIMTBWOVpNMiw5SDh2NkgyWm0wLDhIMTV2NkgyWk04LDMwSDNhMSwxLDAsMCwxLTEtMVYyNUg4Wm0xNCwwSDEwVjI1SDIyWm04LTFhMSwxLDAsMCwxLTEsMUgyNFYyNWg2Wm0wLTZIMTdWMTdIMzBabTAtOEgyNFY5aDZabTAtOEgxN1YySDI5YTEsMSwwLDAsMSwxLDFaIi8+PC9nPjwvc3ZnPg==');
    box-sizing: border-box;
}

.diamond {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIGhlaWdodD0iNTEycHgiIGlkPSJDYWxxdWVfMSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjUxMnB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48Zz48cG9seWdvbiBmaWxsPSIjRUE2MjI2IiBwb2ludHM9IjE5OC4xNTYsMTE5LjYxOCAyMTUuODY3LDExMC4yMDYgMTUyLjY0LDExMC4yMDYgMTg4LjExNCwxMjQuOTUzICAiLz48cG9seWdvbiBmaWxsPSIjRUE2MjI2IiBwb2ludHM9Ijk2LjQyNiwxMjEuNTc4IDU1LjMzMywxNjYuMTM0IDEwNC45MTQsMTY2LjEzNCAgIi8+PHBvbHlnb24gZmlsbD0iI0VBNjIyNiIgcG9pbnRzPSI1NS43OTIsMTg2LjEzNCA3OS40OSwyMTEuMDkyIDk3LjQ3LDE4Ni4xMzQgICIvPjxwb2x5Z29uIGZpbGw9IiNFQTYyMjYiIHBvaW50cz0iMTU1LjMwOSwxNjYuMTM0IDIyNC4wMzQsMTY2LjEzNCAxODguNzYzLDE0Ny4zOTEgICIvPjxwb2x5Z29uIGZpbGw9IiNFQTYyMjYiIHBvaW50cz0iMjU2LDE2MC40NzIgMzAyLjA1MiwxMzYgMjU2LDExMS41MyAyMDkuOTQ4LDEzNiAgIi8+PHBvbHlnb24gZmlsbD0iI0VBNjIyNiIgcG9pbnRzPSIzOTYuMTY5LDExNi41NjMgMzQ2LjIwNSwxMzcuMzM0IDM4Ny43NzUsMTYwLjYyMyAgIi8+PHBvbHlnb24gZmlsbD0iI0VBNjIyNiIgcG9pbnRzPSIyODcuOTY3LDE2Ni4xMzQgMzU2LjY5MSwxNjYuMTM0IDMyMy4yMzYsMTQ3LjM5MiAgIi8+PHBvbHlnb24gZmlsbD0iI0VBNjIyNiIgcG9pbnRzPSI5My41MDUsMjI1Ljg1MyAxMzEuMjAzLDI2NS41NTYgMTEyLjg5NiwxOTguOTM4ICAiLz48cG9seWdvbiBmaWxsPSIjRUE2MjI2IiBwb2ludHM9IjM1OS4zNTksMTEwLjIwNiAyOTYuMTM0LDExMC4yMDYgMzIzLjg4NSwxMjQuOTUzICAiLz48cG9seWdvbiBmaWxsPSIjRUE2MjI2IiBwb2ludHM9IjE2NS43OTQsMTM3LjMzNCAxMTUuODMxLDExNi41NjMgMTI0LjIyNSwxNjAuNjIzICAiLz48cG9seWdvbiBmaWxsPSIjRUE2MjI2IiBwb2ludHM9IjQwNy4wODYsMTY2LjEzNCA0NTYuNjY4LDE2Ni4xMzQgNDE1LjU3NCwxMjEuNTc4ICAiLz48cG9seWdvbiBmaWxsPSIjRUE2MjI2IiBwb2ludHM9IjM4MC43OTgsMjY1LjU1NSA0MTguNDk2LDIyNS44NTMgMzk5LjEwNCwxOTguOTM4ICAiLz48cG9seWdvbiBmaWxsPSIjRUE2MjI2IiBwb2ludHM9IjI0NC40MjksMTg2LjEzNCAxMzUuODE4LDE4Ni4xMzQgMjI1LjE4OSwzMTguNTAxICAiLz48cG9seWdvbiBmaWxsPSIjRUE2MjI2IiBwb2ludHM9IjQzMi41MTEsMjExLjA5MiA0NTYuMjEsMTg2LjEzNCA0MTQuNTMsMTg2LjEzNCAgIi8+PHBhdGggZD0iTTIyMC45NDEsMzQ3Ljk1bC03OC4xNjktMTE1Ljc3NWwxNy42MjIsNjQuMTJsNjcuMDI3LDcwLjU5NWwtNS43OTYtMTQuNjA2ICAgQzIyMS4wNzksMzUwLjkxLDIyMC44NDYsMzQ5LjQyOCwyMjAuOTQxLDM0Ny45NXoiIGZpbGw9IiNFQTYyMjYiLz48cG9seWdvbiBmaWxsPSIjRUE2MjI2IiBwb2ludHM9IjI4Ni44MTIsMzE4LjUwMiAzNzYuMTgyLDE4Ni4xMzQgMjY3LjU3LDE4Ni4xMzQgICIvPjxwb2x5Z29uIGZpbGw9IiNFQTYyMjYiIHBvaW50cz0iMjQxLjIsMzQ3LjM5IDI1NiwzODQuNjgzIDI3MC43OTksMzQ3LjM5IDI1NiwyNDUuNTc1ICAiLz48cGF0aCBkPSJNMjkwLjM3NiwzNTIuMjgybC01Ljc5NiwxNC42MDVsNjcuMDI3LTcwLjU5NGwxNy42MjItNjQuMTIxTDI5MS4wNiwzNDcuOTQ4ICAgQzI5MS4xNTUsMzQ5LjQyMSwyOTAuOTIzLDM1MC45MDYsMjkwLjM3NiwzNTIuMjgyeiIgZmlsbD0iI0VBNjIyNiIvPjwvZz48ZyBvcGFjaXR5PSIwLjMiPjxwb2x5Z29uIHBvaW50cz0iMTkzLjE1MSwxMjIuMjQ2IDE4OC4wNzEsMTI0Ljk0NiAxNTIuNjAxLDExMC4yMDYgMTY0LjE3MiwxMTAuMjA2ICAiLz48cG9seWdvbiBwb2ludHM9Ijk4LjM3MiwxMzEuOTc2IDY2Ljg2MSwxNjYuMTM2IDU1LjI5MiwxNjYuMTM2IDk2LjM5MSwxMjEuNTc2ICAiLz48cG9seWdvbiBwb2ludHM9Ijg0LjQ0MSwyMDQuMTU2IDc5LjQ1MSwyMTEuMDg2IDU1Ljc1MiwxODYuMTM2IDY3LjMyMSwxODYuMTM2ICAiLz48cG9seWdvbiBwb2ludHM9IjE5NC42NiwxNTAuNTQ2IDE2Ni44NDIsMTY2LjEzNiAxNTUuMjcxLDE2Ni4xMzYgMTg4LjcyMSwxNDcuMzg2ICAiLz48cG9seWdvbiBwb2ludHM9IjEzMS4xNjEsMjY1LjU1NiA5My40NzEsMjI1Ljg0NiAxMTIuODYxLDE5OC45MzYgMTE2LjA1MiwyMTAuNTY2IDEwNS4wNDIsMjI1Ljg0NiAxMjYuNDUxLDI0OC4zOTYgICIvPjxwb2x5Z29uIHBvaW50cz0iMTM0LjY0MSwxNTQuNzU2IDEyNC4xODEsMTYwLjYxNSAxMTUuNzkyLDExNi41NTYgMTI4LjM2MSwxMjEuNzg2ICAiLz48cG9seWdvbiBwb2ludHM9IjIyNy4yMDEsMzA0LjM5NiAyMjUuMTUxLDMxOC40OTQgMTM1Ljc4MSwxODYuMTM2IDE0Ny4zNTEsMTg2LjEzNiAgIi8+PHBhdGggZD0iTTIyNy4zODEsMzY2Ljg4NmwtNjcuMDI4LTcwLjU5bC0xNy42MjEtNjQuMTJsMTkuNTA5LDI4Ljg5bDkuNjgyLDM1LjIzbDQ4LjgxOCw1MS40MDlsMC4xNiwwLjIzOSAgIGMtMC4wOSwxLjQ3OSwwLjE0MSwyLjk2LDAuNjksNC4zM0wyMjcuMzgxLDM2Ni44ODZ6Ii8+PC9nPjxnIG9wYWNpdHk9IjAuMyI+PHBvbHlnb24gZmlsbD0iI0ZGRkZGRiIgcG9pbnRzPSIzMTguNzI2LDEyMi4yMjIgMzIzLjgwNiwxMjQuOTIyIDM1OS4yNzYsMTEwLjE4MiAzNDcuNzA2LDExMC4xODIgICIvPjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iNDEzLjUwNiwxMzEuOTUyIDQ0NS4wMTYsMTY2LjExMiA0NTYuNTg3LDE2Ni4xMTIgNDE1LjQ4NiwxMjEuNTUyICAiLz48cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjQyNy40MzYsMjA0LjEzMiA0MzIuNDI3LDIxMS4wNjIgNDU2LjEyNywxODYuMTEyIDQ0NC41NTYsMTg2LjExMiAgIi8+PHBvbHlnb24gZmlsbD0iI0ZGRkZGRiIgcG9pbnRzPSIzMTcuMjE3LDE1MC41MjIgMzQ1LjAzNiwxNjYuMTEyIDM1Ni42MDYsMTY2LjExMiAzMjMuMTU2LDE0Ny4zNjIgICIvPjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iMzgwLjcxNywyNjUuNTMxIDQxOC40MDYsMjI1LjgyMSAzOTkuMDE2LDE5OC45MTIgMzk1LjgyNiwyMTAuNTQyIDQwNi44MzYsMjI1LjgyMSAgICAzODUuNDI3LDI0OC4zNzIgICIvPjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iMzc3LjIzNiwxNTQuNzMyIDM4Ny42OTYsMTYwLjU5MiAzOTYuMDg2LDExNi41MzEgMzgzLjUxNiwxMjEuNzYyICAiLz48cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjI4NC42NzcsMzA0LjM3IDI4Ni43MjYsMzE4LjQ3MSAzNzYuMDk2LDE4Ni4xMTIgMzY0LjUyNiwxODYuMTEyICAiLz48cGF0aCBkPSJNMjg0LjQ5NiwzNjYuODYybDY3LjAzLTcwLjU5bDE3LjYyLTY0LjEyMWwtMTkuNTEsMjguODkxbC05LjY4MiwzNS4yMjlsLTQ4LjgxOCw1MS40MWwtMC4xNiwwLjI0ICAgYzAuMDksMS40NzktMC4xNDIsMi45NTktMC42OSw0LjMzTDI4NC40OTYsMzY2Ljg2MnoiIGZpbGw9IiNGRkZGRkYiLz48L2c+PGc+PHBvbHlnb24gZmlsbD0ibm9uZSIgcG9pbnRzPSIyNTYsMTA1Ljg2NiAxOTkuMjkyLDEzNS45OTkgMjU2LDE2Ni4xMzMgMzEyLjcwOCwxMzUuOTk5ICAiLz48cG9seWdvbiBmaWxsPSJub25lIiBwb2ludHM9IjEyMC42MTIsMTY4LjM3OCAxNzcuMjE2LDEzNi42NjYgMTA5LjE4MywxMDguMzgzICAiLz48cG9seWdvbiBmaWxsPSJub25lIiBwb2ludHM9IjI3NS45MzksMzQ3Ljk5IDI1NiwyMTAuODE0IDIzNi4wNiwzNDcuOTkgMjU2LDM5OC4yMzggICIvPjxwb2x5Z29uIGZpbGw9Im5vbmUiIHBvaW50cz0iMTg4LjcsMTQxLjY5NSAxMzYuMTU1LDE3MS4xMzMgMjQ0LjA5OCwxNzEuMTMzICAiLz48cG9seWdvbiBmaWxsPSJub25lIiBwb2ludHM9IjI2Ny45MDIsMTcxLjEzMyAzNzUuODQ2LDE3MS4xMzMgMzIzLjMwMSwxNDEuNjk1ICAiLz48cG9seWdvbiBmaWxsPSJub25lIiBwb2ludHM9IjMzNC43ODQsMTM2LjY2NiAzOTEuMzg4LDE2OC4zNzggNDAyLjgxNiwxMDguMzgzICAiLz48cG9seWdvbiBmaWxsPSJub25lIiBwb2ludHM9IjEyNi40MDksMTgxLjEzMyAyMjguMjc4LDMzMi4wMSAyNTAuMjA5LDE4MS4xMzMgICIvPjxwb2x5Z29uIGZpbGw9Im5vbmUiIHBvaW50cz0iMTEwLjk1OCwxNzEuMTMzIDk5LjQ4LDExMC44OTEgNDMuOTIsMTcxLjEzMyAgIi8+PHBvbHlnb24gZmlsbD0ibm9uZSIgcG9pbnRzPSIyNjEuNzkxLDE4MS4xMzMgMjgzLjcyMywzMzIuMDExIDM4NS41OTIsMTgxLjEzMyAgIi8+PHBvbHlnb24gZmlsbD0ibm9uZSIgcG9pbnRzPSIxMTQuOTQ4LDE4Ny41MzUgODcuMDI2LDIyNi4yOSAxNDEuMzA4LDI4My40NTkgICIvPjxwb2x5Z29uIGZpbGw9Im5vbmUiIHBvaW50cz0iMzk3LjA1MiwxODcuNTM1IDM3MC42OTEsMjgzLjQ1OSA0MjQuOTc0LDIyNi4yOSAgIi8+PHBvbHlnb24gZmlsbD0ibm9uZSIgcG9pbnRzPSI0MDQuNzY1LDE4MS4xMzMgNDMxLjk4MSwyMTguOTEgNDY3Ljg1MSwxODEuMTMzICAiLz48cG9seWdvbiBmaWxsPSJub25lIiBwb2ludHM9IjQwMS4wNDMsMTcxLjEzMyA0NjguMDgsMTcxLjEzMyA0MTIuNTIsMTEwLjg5MSAgIi8+PHBhdGggZD0iTTM4Mi4xMTUsMjA0LjE1MmwtOTYuMjU2LDE0Mi41NjNsMC4xNjksMS4xNjFjMC4xMjYsMC44NjQsMC4wMjEsMS43NTEtMC4zMDEsMi41NjNMMjcwLjM4NSwzODkuMSAgIGw4NS43MTItOTAuMjcxTDM4Mi4xMTUsMjA0LjE1MnoiIGZpbGw9Im5vbmUiLz48cG9seWdvbiBmaWxsPSJub25lIiBwb2ludHM9IjMyMy42MjUsMTMwLjQ3NiAzODQuNDE0LDEwNS4yMDQgMjc2LjA2NiwxMDUuMjA0ICAiLz48cGF0aCBkPSJNMjI2LjI3MiwzNTAuNDM5Yy0wLjMyMy0wLjgxMy0wLjQyNi0xLjY5OC0wLjMwMS0yLjU2M2wwLjE2OC0xLjE2bC05Ni4yNTctMTQyLjU2M2wyNi4wMiw5NC42NzggICBsODUuNzExLDkwLjI3MUwyMjYuMjcyLDM1MC40Mzl6IiBmaWxsPSJub25lIi8+PHBvbHlnb24gZmlsbD0ibm9uZSIgcG9pbnRzPSIxMDcuMjM1LDE4MS4xMzMgNDQuMTQ5LDE4MS4xMzMgODAuMDE5LDIxOC45MSAgIi8+PHBvbHlnb24gZmlsbD0ibm9uZSIgcG9pbnRzPSIxODguMzc1LDEzMC40NzYgMjM1LjkzNSwxMDUuMjA0IDEyNy41ODYsMTA1LjIwNCAgIi8+PHBhdGggZD0iTTQ4My4xNzEsMTcyLjc0M2wtNzAuMDI4LTc1LjkzMWMtMC4wMDMtMC4wMDMtMC4wMDgtMC4wMDYtMC4wMTMtMC4wMDljLTAuMTU2LTAuMTctMC4zMjYtMC4zMzItMC41MTItMC40OCAgIGMtMC4wNTYtMC4wNDYtMC4xMTYtMC4wNzktMC4xNzMtMC4xMjFjLTAuMDYzLTAuMDQ2LTAuMTIyLTAuMDktMC4xODgtMC4xMzNjLTAuMjQ3LTAuMTY5LTAuNTA3LTAuMzE5LTAuNzc2LTAuNDM5ICAgYy0wLjAwNS0wLjAwMi0wLjAwOS0wLjAwNS0wLjAxNS0wLjAwN2MtMC4yNzgtMC4xMjMtMC41Ny0wLjIwOS0wLjg2NS0wLjI3OGMtMC4wNy0wLjAxNi0wLjE0MS0wLjAzMS0wLjIwOS0wLjA0NCAgIGMtMC4zMDEtMC4wNTctMC42MDQtMC4wOTMtMC45MDYtMC4wOTRjLTAuMDA4LDAtMC4wMTUtMC4wMDItMC4wMjEtMC4wMDJoLTMwNi45M2MtMC4wMDYsMC0wLjAxMiwwLjAwMi0wLjAxOCwwLjAwMiAgIGMtMC4zMSwwLjAwMS0wLjYxMywwLjAzOC0wLjkxNiwwLjA5NWMtMC4wNjYsMC4wMTMtMC4xMywwLjAyNy0wLjE5NiwwLjA0MmMtMC41OTEsMC4xMzctMS4xNTYsMC4zODItMS42NywwLjcyOSAgIGMtMC4wNjIsMC4wNDEtMC4xMTksMC4wODEtMC4xNzgsMC4xMjdjLTAuMDYsMC4wNDMtMC4xMiwwLjA3Ny0wLjE3OCwwLjEyNWMtMC4xODUsMC4xNDgtMC4zNTQsMC4zMTItMC41MTQsMC40ODEgICBjLTAuMDAyLDAuMDAyLTAuMDA1LDAuMDA0LTAuMDA4LDAuMDA3TDI4LjgzLDE3Mi43NDRjLTEuNzg1LDEuOTM1LTEuNzYzLDQuOTIzLDAuMDQ5LDYuODMzbDIyMi43MTMsMjM0LjU1NyAgIGMwLjg2LDEuNjIsMi41NDIsMi42NjEsNC40MDYsMi42NjFzMy41NDctMS4wNDEsNC40MDYtMi42NjFsMjIyLjcxMy0yMzQuNTU3QzQ4NC45MzIsMTc3LjY2Niw0ODQuOTUzLDE3NC42NzgsNDgzLjE3MSwxNzIuNzQzeiAgICBNOTkuNDgsMTEwLjg5MWwxMS40NzcsNjAuMjQySDQzLjkyTDk5LjQ4LDExMC44OTF6IE0yNjEuNzkxLDE4MS4xMzNoMTIzLjgwMUwyODMuNzIzLDMzMi4wMTFMMjYxLjc5MSwxODEuMTMzeiBNMjI4LjI3OCwzMzIuMDEgICBMMTI2LjQwOSwxODEuMTMzaDEyMy44TDIyOC4yNzgsMzMyLjAxeiBNMTg4LjcsMTQxLjY5NWw1NS4zOTgsMjkuNDM4SDEzNi4xNTVMMTg4LjcsMTQxLjY5NXogTTEyMC42MTIsMTY4LjM3OGwtMTEuNDMtNTkuOTk1ICAgbDY4LjAzMSwyOC4yODNMMTIwLjYxMiwxNjguMzc4eiBNMTk5LjI5MiwxMzUuOTk5TDI1NiwxMDUuODY2bDU2LjcwOCwzMC4xMzNMMjU2LDE2Ni4xMzNMMTk5LjI5MiwxMzUuOTk5eiBNMjU2LDIxMC44MTQgICBsMTkuOTM5LDEzNy4xNzhMMjU2LDM5OC4yMzhsLTE5LjkzOC01MC4yNDZMMjU2LDIxMC44MTR6IE0yNjcuOTAyLDE3MS4xMzNsNTUuMzk2LTI5LjQzOGw1Mi41NDcsMjkuNDM4SDI2Ny45MDJ6IE0zMzQuNzg0LDEzNi42NjYgICBsNjguMDMyLTI4LjI4M2wtMTEuNDI5LDU5Ljk5NUwzMzQuNzg0LDEzNi42NjZ6IE0zMjMuNjI1LDEzMC40NzZsLTQ3LjU1OS0yNS4yNzFoMTA4LjM0OEwzMjMuNjI1LDEzMC40NzZ6IE0xODguMzc1LDEzMC40NzYgICBsLTYwLjc4OS0yNS4yNzFoMTA4LjM1TDE4OC4zNzUsMTMwLjQ3NnogTTEwNy4yMzUsMTgxLjEzM0w4MC4wMTgsMjE4LjkxbC0zNS44NjktMzcuNzc3SDEwNy4yMzV6IE0xMTQuOTQ4LDE4Ny41MzVsMjYuMzYsOTUuOTI0ICAgTDg3LjAyNiwyMjYuMjlMMTE0Ljk0OCwxODcuNTM1eiBNMTI5Ljg4NSwyMDQuMTUybDk2LjI1NywxNDIuNTYzbC0wLjE2OCwxLjE2Yy0wLjEyNSwwLjg2NC0wLjAyMiwxLjc1MSwwLjMwMSwyLjU2M2wxNS4zNDIsMzguNjYxICAgbC04NS43MTEtOTAuMjcxTDEyOS44ODUsMjA0LjE1MnogTTI4NS43MjgsMzUwLjQzOWMwLjMyMS0wLjgxMywwLjQyNy0xLjY5OCwwLjMwMS0yLjU2M2wtMC4xNjktMS4xNjFsOTYuMjU2LTE0Mi41NjMgICBsLTI2LjAxOSw5NC42NzhsLTg1LjcxNCw5MC4yNzFMMjg1LjcyOCwzNTAuNDM5eiBNMzk3LjA1MiwxODcuNTM1bDI3LjkyMiwzOC43NTVsLTU0LjI4Miw1Ny4xNjlMMzk3LjA1MiwxODcuNTM1eiAgICBNNDA0Ljc2NSwxODEuMTMzaDYzLjA4NmwtMzUuODY5LDM3Ljc3N0w0MDQuNzY1LDE4MS4xMzN6IE00MDEuMDQzLDE3MS4xMzNsMTEuNDc5LTYwLjI0Mmw1NS41NjEsNjAuMjQySDQwMS4wNDN6IiBmaWxsPSIjMDEwMTAxIi8+PC9nPjxjaXJjbGUgY3g9IjU1Ljc5MiIgY3k9IjI4My40NTkiIGZpbGw9IiNFQTYyMjYiIHI9IjEyIi8+PGNpcmNsZSBjeD0iMzkuNTA2IiBjeT0iNDQ2LjQ1OSIgZmlsbD0iI0VBNjIyNiIgcj0iMTIiLz48Y2lyY2xlIGN4PSIxNjcuMzA5IiBjeT0iNDQ2LjQ1OSIgZmlsbD0iI0VBNjIyNiIgcj0iMTIiLz48Y2lyY2xlIGN4PSIzODAuNzE3IiBjeT0iNDQ5LjIxMSIgZmlsbD0iI0VBNjIyNiIgcj0iMTIiLz48Y2lyY2xlIGN4PSI0NjguMDgiIGN5PSIyNzcuNzk5IiBmaWxsPSIjRUE2MjI2IiByPSIxMiIvPjxjaXJjbGUgY3g9IjQ1Ni42NjgiIGN5PSI3NS43OTkiIGZpbGw9IiNFQTYyMjYiIHI9IjEyIi8+PGNpcmNsZSBjeD0iMTI1LjIxNyIgY3k9IjUxLjc5OSIgZmlsbD0iI0VBNjIyNiIgcj0iMTIiLz48Y2lyY2xlIGN4PSIyNDEuNjEzIiBjeT0iNTEuNzk5IiBmaWxsPSIjRUE2MjI2IiByPSIxMiIvPjxwb2x5Z29uIGZpbGw9IiNGRUNEMEUiIHBvaW50cz0iMTEyLjYxNSwzNzcuMjYgMTI2LjE2NCwzNTYuODU5IDEwNS4xODQsMzY5LjI4NCA4NC43ODMsMzU1Ljc0MSA5Ny4yMTEsMzc2LjcyIDgzLjY2NCwzOTcuMTE5ICAgMTA0LjY0MywzODQuNjk1IDEyNS4wNDIsMzk4LjIzOCAiLz48cG9seWdvbiBmaWxsPSIjRkVDRDBFIiBwb2ludHM9IjI4My43NjcsNDcwLjcyOSAyOTcuMzE2LDQ1MC4zMjYgMjc2LjMzNiw0NjIuNzU0IDI1NS45MzYsNDQ5LjIxMSAyNjguMzYzLDQ3MC4xODkgMjU0LjgxNyw0OTAuNTg5ICAgMjc1Ljc5NSw0NzguMTYyIDI5Ni4xOTUsNDkxLjcwNSAiLz48cG9seWdvbiBmaWxsPSIjRkVDRDBFIiBwb2ludHM9IjQ0Mi4yNiwzODkuNDQ2IDQ1Ni4wMDgsMzY5LjE3NyA0MzQuOTA2LDM4MS4zOTkgNDE0LjYzOSwzNjcuNjU2IDQyNi44NjEsMzg4Ljc1NSA0MTMuMTE3LDQwOS4wMjMgICA0MzQuMjE2LDM5Ni44MDIgNDU0LjQ4Miw0MTAuNTQzICIvPjxwb2x5Z29uIGZpbGw9IiNGRUNEMEUiIHBvaW50cz0iMzUzLjkwMiw0MC4xNDQgMzY3LjY0OSwxOS44NzYgMzQ2LjU0OSwzMi4wOTcgMzI2LjI4MiwxOC4zNTYgMzM4LjUwNCwzOS40NTQgMzI0Ljc2LDU5LjcyMSAgIDM0NS44NTcsNDcuNTAxIDM2Ni4xMjUsNjEuMjQyICIvPjxwb2x5Z29uIGZpbGw9IiNGRUNEMEUiIHBvaW50cz0iNjMuNDksNjEuNTg3IDc3LjIzNyw0MS4zMTkgNTYuMTM2LDUzLjU0IDM1Ljg2OSwzOS43OTkgNDguMDkxLDYwLjg5NyAzNC4zNDcsODEuMTY0IDU1LjQ0NSw2OC45NDQgICA3NS43MTIsODIuNjg1ICIvPjwvc3ZnPg==');
    background-size: 35px 35px;
    background-color: #cbdbfc;
}

.exit {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pjxzdmcgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTI4IDEyODsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEyOCAxMjgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6IzFDQTJCQjt9Cgkuc3Qxe2ZpbGw6I0VBQzEwMDt9Cjwvc3R5bGU+PGcgaWQ9Il94MzFfMl8zRF9QcmludGluZyIvPjxnIGlkPSJfeDMxXzFfVlJfR2VhciIvPjxnIGlkPSJfeDMxXzBfVmlydHVhbF9yZWFsaXR5Ii8+PGcgaWQ9Il94MzlfX0F1Z21lbnRlZF9yZWFsaXR5Ii8+PGcgaWQ9Il94MzhfX1RlbGVwb3J0Ij48Zz48ZWxsaXBzZSBjbGFzcz0ic3QxIiBjeD0iNjQiIGN5PSI4OCIgcng9IjUyIiByeT0iMjAiLz48Zz48cmVjdCBoZWlnaHQ9IjgiIHdpZHRoPSI4IiB4PSI5MiIgeT0iMjgiLz48cmVjdCBoZWlnaHQ9IjgiIHdpZHRoPSI4IiB4PSIyOCIgeT0iMTYiLz48cmVjdCBoZWlnaHQ9IjgiIHdpZHRoPSI4IiB4PSI0NCIgeT0iNDAiLz48cGF0aCBkPSJNMTEyLDQwdjM1LjJjLTMuMy0yLjMtNy4zLTQuMi0xMi01LjhWNDRoLTh2MjMuMUM4My4zLDY1LDczLjYsNjQsNjQsNjRjLTQsMC04LDAuMi0xMiwwLjVWNTZoLTh2OS41ICAgICBjLTIuNywwLjQtNS40LDEtOCwxLjZWMzJoLTh2MzcuNGMtNC43LDEuNi04LjcsMy41LTEyLDUuOFY1Nkg4djMyYzAsMTUuNiwyOC45LDI0LDU2LDI0czU2LTguNCw1Ni0yNFY0MEgxMTJ6IE0xNiw4OCAgICAgYzAtNSwxMC4zLTExLjUsMjgtMTQuNHYyOC45QzI2LjMsOTkuNSwxNiw5MywxNiw4OHogTTg4LDEwMS43VjgwaC04djIzYy00LjksMC42LTEwLjIsMS0xNiwxYy00LjIsMC04LjItMC4yLTEyLTAuNVY3Mi41ICAgICBjMy44LTAuMyw3LjgtMC41LDEyLTAuNWMyOS43LDAsNDgsOS4zLDQ4LDE2QzExMiw5Mi42LDEwMy4yLDk4LjUsODgsMTAxLjd6Ii8+PC9nPjwvZz48L2c+PGcgaWQ9Il94MzdfX0dsYXNzZXNzIi8+PGcgaWQ9Il94MzZfX0ZvbGRpbmdfcGhvbmUiLz48ZyBpZD0iX3gzNV9fRHJvbmUiLz48ZyBpZD0iX3gzNF9fUmV0aW5hX3NjYW4iLz48ZyBpZD0iX3gzM19fU21hcnR3YXRjaCIvPjxnIGlkPSJfeDMyX19CaW9uaWNfQXJtIi8+PGcgaWQ9Il94MzFfX0NoaXAiLz48L3N2Zz4=') no-repeat;
    background-size: 50px 35px;
    background-position: center center;
    background-color: #cbdbfc;
    opacity: 0.3;
}

.exit.show {
    opacity: 1;
}

.player {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pjxzdmcgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDggNDg7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA0OCA0OCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9Ikljb25zIj48Zz48cGF0aCBkPSJNMzEuODU0MjEsMjAuMTA4M2MyLjczNTc1LDIuMjY0NzUsNC40ODQxMiw1LjY4MDAyLDQuNDg0MTIsOS41MTE5MiAgICBjMCw2LjgxMjQ0LTUuNTI1OTksMTIuMzM4NDItMTIuMzM4MzIsMTIuMzM4NDJjLTYuODEyMzYsMC0xMi4zMzgzNC01LjUyNTk4LTEyLjMzODM0LTEyLjMzODQyICAgIGMwLTQuNjkyNTQsMi42MjcxLTguNzc4MTMsNi40ODYxOS0xMC44NjE3NSIgc3R5bGU9ImZpbGw6I0Y0RjRGNDsiLz48cG9seWdvbiBwb2ludHM9IjE5Ljc0ODgsMjIuMzM1NjEgMTQuNTIwNDIsMjkuOTE2MSAxNS45MDA5OSwzMy40OTU2MSAyNy4xMDQ5NywzMy44NzExNiAgICAgMjkuNjAxNTEsMzAuMzU4NTUgMjQsMjIuMzM1NjEgICAiIHN0eWxlPSJmaWxsOiNFMEUwRTA7Ii8+PHBhdGggZD0iTTE0LjUyMDQxLDM3LjUxNTQ5YzkuOTEzNTctNy44MDQ1MywxNS4yNzg5MywyLjk5NjI1LDE1LjI3ODkzLDIuOTk2MjUgICAgYzAuODk0NTMtMC4zNDY1OSwxLjY2NzU3LTAuODY4NSwyLjMwMzA3LTEuNTg4OTZjMCwwLTEuOTI2NTEtNS42MzM5NS04LjM3OTUxLTYuNjI2NCAgICBjLTYuNDUzLTAuOTkyNTQtMTAuNTQ2ODIsMi44MjM3Ni0xMC41NDY4MiwyLjgyMzc2QzEzLjQ4NDYxLDM2LjE0NzE3LDEzLjkzMjA5LDM2Ljk0NjYxLDE0LjUyMDQxLDM3LjUxNTQ5eiIgc3R5bGU9ImZpbGw6I0ZGQTAwMTsiLz48cGF0aCBkPSJNMTEuNjYxNjcsMjkuNjIwMjJjNi42NzMxNS0yLjg5Nzg1LDUuMzY2MjEtMTAuMTc3MTgsNS4zNjYyMS0xMC4xNzcxOGwxLjExOTk4LTAuNjg0NTYgICAgbDEuNjI0MTksMC43MTIwOWMwLDAsMS40MDE5Nyw4Ljg5MTc2LTcuODE4MzQsMTIuODI1ODEiIHN0eWxlPSJmaWxsOiNGRkEwMDE7Ii8+PHBhdGggZD0iTTI2LjExNjcyLDIwLjQxMDFjMCwwLTAuMzQ2OTIsOS4xMjQ0MywxMC4wNjExNiw5LjUwNTk5ICAgIGMwLjA5MTkyLDEuMTExMzYsMC4wNTIyNSwyLjE0MzYxLTAuMjg1LDIuOTk3MDFjLTEzLjU3MjQ1LTAuOTkyOC0xMi41NjU5NS0xMy4wNDI4LTEyLjU2NTk1LTEzLjA0MjgiIHN0eWxlPSJmaWxsOiNGRkEwMDE7Ii8+PHBhdGggZD0iTTMyLjU3NzcsMTkuMDkwOTdjMCwwLDEuMjE4Ny03LjY3NTQ3LTYuMjc1MjEtOC45NzE5NWMwLDAtNy4xMDQ4OS0xLjQwMDI2LTguODY4MTgsNy40MTYxMiIgc3R5bGU9ImZpbGw6I0Y0RjRGNDsiLz48cG9seWdvbiBwb2ludHM9IjMyLjU3NzcsMTkuMDkwOTcgMTcuNDM0MzEsMTcuNTM1MTQgMTguNDcxNTMsMTkuMzI0MzQgMzEuMzg0OSwyMC43NzYzOSAgICIgc3R5bGU9ImZpbGw6I0M5QzlDOTsiLz48Y2lyY2xlIGN4PSIyNS43NjE0MSIgY3k9IjE0LjI1NTc5IiByPSIyLjczNzkzIiBzdHlsZT0iZmlsbDojNDY0NzQ3OyIvPjxjaXJjbGUgY3g9IjI1Ljc2MTQxIiBjeT0iMTQuMjU1NzkiIHI9IjEuMzQzNTkiIHN0eWxlPSJmaWxsOiM3MDcwNzA7Ii8+PGxpbmUgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzMwMzAzMDtzdHJva2Utd2lkdGg6MC43NTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7IiB4MT0iMjkuOTY5ODkiIHgyPSIyOS45NjA4IiB5MT0iMTguODIxOTQiIHkyPSIxOC44MjE5NCIvPjxwYXRoIGQ9IiAgICBNMzEuODU0MjEsMjAuMTA4M2MyLjczNTc1LDIuMjY0NzUsNC40ODQxMiw1LjY4MDAyLDQuNDg0MTIsOS41MTE5MmMwLDYuODEyNDQtNS41MjU5OSwxMi4zMzg0Mi0xMi4zMzgzMiwxMi4zMzg0MiAgICBjLTYuODEyMzYsMC0xMi4zMzgzNC01LjUyNTk4LTEyLjMzODM0LTEyLjMzODQyYzAtNC42OTI1NCwyLjYyNzEtOC43NzgxMyw2LjQ4NjE5LTEwLjg2MTc1IiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMzAzMDMwO3N0cm9rZS13aWR0aDowLjc1O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDsiLz48cG9seWdvbiBwb2ludHM9IiAgICAzMi41Nzc3LDE5LjA5MDk3IDE3LjQzNDMxLDE3LjUzNTE0IDE4LjQ3MTUzLDE5LjMyNDM0IDMxLjM4NDksMjAuNzc2MzkgICAiIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMzMDMwMzA7c3Ryb2tlLXdpZHRoOjAuNzU7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwOyIvPjxwYXRoIGQ9IiAgICBNMzIuNTc3NywxOS4wOTA5N2MwLDAsMS4yMTg3LTcuNjc1NDctNi4yNzUyMS04Ljk3MTk1YzAsMC03LjEwNDg5LTEuNDAwMjYtOC44NjgxOCw3LjQxNjEyIiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMzAzMDMwO3N0cm9rZS13aWR0aDowLjc1O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDsiLz48Y2lyY2xlIGN4PSIyNS43NjE0MSIgY3k9IjE0LjI1NTc5IiByPSIyLjczNzkzIiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMzAzMDMwO3N0cm9rZS13aWR0aDowLjc1O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDsiLz48Y2lyY2xlIGN4PSIyNS43NjE0MSIgY3k9IjE0LjI1NTc5IiByPSIxLjM0MzU5IiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMzAzMDMwO3N0cm9rZS13aWR0aDowLjc1O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDsiLz48Y2lyY2xlIGN4PSIyMC45Mzc0MiIgY3k9IjE1LjM4NTcyIiByPSIwLjgwMzk5IiBzdHlsZT0iZmlsbDojMzAzMDMwOyIvPjxsaW5lIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMzMDMwMzA7c3Ryb2tlLXdpZHRoOjAuNzU7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwOyIgeDE9IjI0LjYxMTA2IiB4Mj0iMjQuNzA0OCIgeTE9IjEwLjA2MjY4IiB5Mj0iOC42NDk1NiIvPjxsaW5lIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMzMDMwMzA7c3Ryb2tlLXdpZHRoOjAuNzU7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwOyIgeDE9IjIzLjIzOTE5IiB4Mj0iMjMuNDE0NTgiIHkxPSIxMC4yOTUwOSIgeTI9IjYuNzgwODYiLz48Y2lyY2xlIGN4PSIyNC43MDQ3OCIgY3k9IjguMjE0ODQiIHI9IjAuNzA2NTYiIHN0eWxlPSJmaWxsOiMzMDMwMzA7Ii8+PGNpcmNsZSBjeD0iMjMuNDM0OTciIGN5PSI2LjM3MjkiIHI9IjAuNzA2NTYiIHN0eWxlPSJmaWxsOiMzMDMwMzA7Ii8+PHBhdGggZD0iTTI2LjExNjcyLDIwLjQxMDEgICAgYzAsMC0wLjM0NjkxLDkuMTI0NDQsMTAuMDYxMTUsOS41MDYiIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMzMDMwMzA7c3Ryb2tlLXdpZHRoOjAuNzU7c3Ryb2tlLW1pdGVybGltaXQ6MTA7Ii8+PHBhdGggZD0iTTIzLjMyNjkzLDE5Ljg3MDMxICAgIGMwLDAtMS4wMDY1MiwxMi4wNSwxMi41NjU5NSwxMy4wNDI3OSIgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzMwMzAzMDtzdHJva2Utd2lkdGg6MC43NTtzdHJva2UtbWl0ZXJsaW1pdDoxMDsiLz48cGF0aCBkPSJNMTcuMDI3ODgsMTkuNDQzMDMgICAgYzAsMCwxLjMwNjk1LDcuMjc5MzMtNS4zNjYyMSwxMC4xNzcxOCIgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzMwMzAzMDtzdHJva2Utd2lkdGg6MC43NTtzdHJva2UtbWl0ZXJsaW1pdDoxMDsiLz48cGF0aCBkPSJNMTkuNzcyMDQsMTkuNDcwNTYgICAgYzAsMCwxLjQwMTk3LDguODkxNzYtNy44MTgzNCwxMi44MjU4MSIgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzMwMzAzMDtzdHJva2Utd2lkdGg6MC43NTtzdHJva2UtbWl0ZXJsaW1pdDoxMDsiLz48cGF0aCBkPSJNMjkuNzk5MzMsNDAuNTExNzIgICAgYzAsMC01LjM2NTM1LTEwLjgwMDc3LTE1LjI3ODkxLTIuOTk2MjMiIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMzMDMwMzA7c3Ryb2tlLXdpZHRoOjAuNzU7c3Ryb2tlLW1pdGVybGltaXQ6MTA7Ii8+PHBhdGggZD0iTTMyLjEwMjQsMzguOTIyNzkgICAgYzAsMC0xLjkyNjUtNS42MzM5Ni04LjM3OTUtNi42MjY0MWMtNi40NTMtMC45OTI1NC0xMC41NDY4MiwyLjgyMzc1LTEwLjU0NjgyLDIuODIzNzUiIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMzMDMwMzA7c3Ryb2tlLXdpZHRoOjAuNzU7c3Ryb2tlLW1pdGVybGltaXQ6MTA7Ii8+PGxpbmUgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzMwMzAzMDtzdHJva2Utd2lkdGg6MC43NTtzdHJva2UtbWl0ZXJsaW1pdDoxMDsiIHgxPSIyOS4xNDMxNCIgeDI9IjI3LjI1NDM3IiB5MT0iMzEuMDQ2ODkiIHkyPSIzMy40NjMxOCIvPjxsaW5lIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMzMDMwMzA7c3Ryb2tlLXdpZHRoOjAuNzU7c3Ryb2tlLW1pdGVybGltaXQ6MTA7IiB4MT0iMTQuOTEwODIiIHgyPSIxNS45MDEwMyIgeTE9IjMwLjkyMjI3IiB5Mj0iMzMuMTQyNiIvPjxsaW5lIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMzMDMwMzA7c3Ryb2tlLXdpZHRoOjAuNzU7c3Ryb2tlLW1pdGVybGltaXQ6MTA7IiB4MT0iMjMuMzEwMTIiIHgyPSIxOS44NDgyOSIgeTE9IjIyLjI4MzYiIHkyPSIyMi4zODc2MyIvPjxjaXJjbGUgY3g9IjMxLjE0NjY2IiBjeT0iMzMuODcxMTYiIHI9IjAuNTg5NzkiIHN0eWxlPSJmaWxsOiMzMDMwMzA7Ii8+PGNpcmNsZSBjeD0iMjAuOTM3NDIiIGN5PSIyOC41MzU0OCIgcj0iMC41ODk3NyIgc3R5bGU9ImZpbGw6IzMwMzAzMDsiLz48cGF0aCBkPSJNMzAuODMzNDQsMjAuNzc2MzkgICAgYzAsMCwyLjQyMjU2LDMuMTM2MzYsMi44MDM2LDQuNzE1MDkiIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMzMDMwMzA7c3Ryb2tlLXdpZHRoOjAuNzU7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7Ii8+PGxpbmUgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzMwMzAzMDtzdHJva2Utd2lkdGg6MC43NTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDsiIHgxPSIzMy45MDkyNiIgeDI9IjM0LjA0NTM2IiB5MT0iMjYuNzQzNjMiIHkyPSIyNy41ODc0NiIvPjxwYXRoIGQ9Ik0xNy42Njk1NiwzOC4wMTI2NiAgICBjMCwwLDQuMjQ0MzQsMy4zMTY1NSw5LjE2MjUyLDEuNzE0OTIiIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMzMDMwMzA7c3Ryb2tlLXdpZHRoOjAuNzU7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7Ii8+PC9nPjwvZz48L3N2Zz4=');
    background-position: center center;
    background-size: 45px 45px;
    background-color: #cbdbfc
}

.header .diamond {
    background-color: transparent;
    float: right;
}

.diamond-count,
.footer {
    color: #cbdbfc;
    line-height: 35px;
    padding-left: 15px;
    font-family: Sans;
}

.diamond-count {
    float: right;
}

.footer {
    text-align: center
}

.help {
    float: left;
    font-size: 0.9em;
    color: #cbdbfc;
    line-height: var(--block-size)
}

.bye {
    animation: 1s linear teleport;
    animation-fill-mode: forwards;
}

@keyframes teleport {
    0% {
        opacity: 1;
    }
    80% {
        opacity: 0;
    }
    100% {
        background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pjxzdmcgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTI4IDEyODsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEyOCAxMjgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6IzFDQTJCQjt9Cgkuc3Qxe2ZpbGw6I0VBQzEwMDt9Cjwvc3R5bGU+PGcgaWQ9Il94MzFfMl8zRF9QcmludGluZyIvPjxnIGlkPSJfeDMxXzFfVlJfR2VhciIvPjxnIGlkPSJfeDMxXzBfVmlydHVhbF9yZWFsaXR5Ii8+PGcgaWQ9Il94MzlfX0F1Z21lbnRlZF9yZWFsaXR5Ii8+PGcgaWQ9Il94MzhfX1RlbGVwb3J0Ij48Zz48ZWxsaXBzZSBjbGFzcz0ic3QxIiBjeD0iNjQiIGN5PSI4OCIgcng9IjUyIiByeT0iMjAiLz48Zz48cmVjdCBoZWlnaHQ9IjgiIHdpZHRoPSI4IiB4PSI5MiIgeT0iMjgiLz48cmVjdCBoZWlnaHQ9IjgiIHdpZHRoPSI4IiB4PSIyOCIgeT0iMTYiLz48cmVjdCBoZWlnaHQ9IjgiIHdpZHRoPSI4IiB4PSI0NCIgeT0iNDAiLz48cGF0aCBkPSJNMTEyLDQwdjM1LjJjLTMuMy0yLjMtNy4zLTQuMi0xMi01LjhWNDRoLTh2MjMuMUM4My4zLDY1LDczLjYsNjQsNjQsNjRjLTQsMC04LDAuMi0xMiwwLjVWNTZoLTh2OS41ICAgICBjLTIuNywwLjQtNS40LDEtOCwxLjZWMzJoLTh2MzcuNGMtNC43LDEuNi04LjcsMy41LTEyLDUuOFY1Nkg4djMyYzAsMTUuNiwyOC45LDI0LDU2LDI0czU2LTguNCw1Ni0yNFY0MEgxMTJ6IE0xNiw4OCAgICAgYzAtNSwxMC4zLTExLjUsMjgtMTQuNHYyOC45QzI2LjMsOTkuNSwxNiw5MywxNiw4OHogTTg4LDEwMS43VjgwaC04djIzYy00LjksMC42LTEwLjIsMS0xNiwxYy00LjIsMC04LjItMC4yLTEyLTAuNVY3Mi41ICAgICBjMy44LTAuMyw3LjgtMC41LDEyLTAuNWMyOS43LDAsNDgsOS4zLDQ4LDE2QzExMiw5Mi42LDEwMy4yLDk4LjUsODgsMTAxLjd6Ii8+PC9nPjwvZz48L2c+PGcgaWQ9Il94MzdfX0dsYXNzZXNzIi8+PGcgaWQ9Il94MzZfX0ZvbGRpbmdfcGhvbmUiLz48ZyBpZD0iX3gzNV9fRHJvbmUiLz48ZyBpZD0iX3gzNF9fUmV0aW5hX3NjYW4iLz48ZyBpZD0iX3gzM19fU21hcnR3YXRjaCIvPjxnIGlkPSJfeDMyX19CaW9uaWNfQXJtIi8+PGcgaWQ9Il94MzFfX0NoaXAiLz48L3N2Zz4=') no-repeat;
        background-size: 50px 35px;
        background-position: center center;
        background-color: #cbdbfc;
    }
}