@import url("./flip-grid-horizontal.css");
@import url("./flip-grid-vertical.css");
@import url("./grid.css");

body {
    display:grid;
    grid-template-rows: min-content 1fr min-content;
}

/*header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0;

}

header hgroup {
    text-align: center
}

header h1 {
    font-size: 1.4rem;
    margin:0
}

header p {
    font-size: 1rem
}*/

body > header {
        justify-content: space-between;
        flex-direction: row;
}
body > header hgroup {
    display: flex;
    flex-direction: column;
    text-align: center;
}

body > header h1 {
    font-size: 1.5rem;
    margin: 0;
}

body > header p {
        font-size: 0.95rem;
}

body > header p:before {
    content: attr(data);
    margin-right:0.25rem
}

main {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    padding-top: 0;
}

.toolbar {
    list-style: none;
    margin: 0;
    display: flex;
    justify-content: space-around;
    padding: 1.5rem;
    justify-content: space-around;
    box-sizing: border-box;
}

.toolbar svg {
    width: 2.3rem;
    height: 2.75rem;
}

.toolbar button {
    flex-direction: column;
    gap:0.25rem
}





.players {
    margin: 0;
    list-style: none;
    padding: 0;
    z-index: 10;
    display: flex;
    width: 100vw;
    left: 0;
    position: relative;
}

.players li {
    position: relative;
}

.players button {
    flex-direction: column-reverse;
}

.players button span {
    display: block;
    rotate: -45deg;
    left: -0.65rem;
    top: 0.75rem;
    position: relative;
}

.players button svg {
    width:3rem;
    height:3rem;
}

#app-title.boom {
    animation-name: boom;
    animation-direction: alternate;
    animation-fill-mode: backwards;
    animation-duration: 1.5s;
}

@keyframes boom {
    0% {         
    }

    50% {
        z-index: 9;     
        rotate: 6deg;
        scale: 150%; 
        /*box-shadow: 8px 6px 11px 0px rgba(0, 0, 0, 0.35);*/      
    }

    100% {
    }
}

#app-title.boom-out {
    animation-name: boom-out;
    animation-direction: alternate;
    animation-fill-mode: backwards;
    animation-duration: 1.5s;
}

@keyframes boom-out {
    0% {         
    }

    50% {
        z-index: 9;     
        rotate: -6deg;
        scale: 150%; 
        /*box-shadow: 8px 6px 11px 0px rgba(0, 0, 0, 0.35);*/      
    }

    100% {
    }
}