body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}html{min-height:100vh}body{margin:0;padding:0;font-family:Indie Flower,cursive;background-color:rgba(128,214,240,.2)}.navbar{border-bottom:.2px solid #d3d3d3;font-size:2em}.navbar__elements{padding:.75rem;display:flex;justify-content:space-between}.navbar__elements>:nth-child(2){cursor:pointer;-webkit-transition:transform .25s ease-in;transition:transform .25s ease-in}.navbar__elements>:nth-child(2):hover{-webkit-transform:scale(.9);transform:scale(.9)}.App{display:flex;flex-direction:column}.App>:nth-child(2){flex-grow:1}.board{width:100%}.board__elements{text-align:center;font-size:1.5em;padding:2rem 0}.board__element{font-size:1.5em;width:-webkit-max-content;width:-moz-max-content;width:max-content}.board__element--hidden{margin-right:.5rem;opacity:0;-webkit-animation:appear 2s linear 2s forwards;animation:appear 2s linear 2s forwards}.welcome{position:absolute;top:0;width:100%;background-color:#90ee90;z-index:2}.welcome>.form{font-family:Luckiest Guy,cursive;position:fixed;left:50%;top:50vh;-webkit-transform:translate(-50%,-50%) scale(2);transform:translate(-50%,-50%) scale(2);text-align:center;display:flex;flex-direction:column}.welcome>.form h2{margin:1rem;border:none}.welcome>.form input{text-align:center;border:none;background-color:rgba(1,1,1,0)}.welcome>.form button{margin:1rem 16px;border-radius:1.5rem;border:none;padding:.25rem 0;background-color:#d3d3d3}.welcome>.form button,.welcome>.form button:hover{-webkit-transition:-webkit-transform 1s;transition:-webkit-transform 1s;transition:transform 1s;transition:transform 1s,-webkit-transform 1s}.welcome>.form button:hover{-webkit-transform:scale(1.2);transform:scale(1.2);cursor:pointer}.welcome--blur{-webkit-filter:blur(10px);filter:blur(10px)}.loading{top:0;height:100vh;z-index:3;display:block}.loading,.loading>div{position:fixed;width:100%}.loading>div{top:50%;text-align:center;-webkit-transform:translateY(-100%) scale(4);transform:translateY(-100%) scale(4);-webkit-animation:blink 1s ease-out 0s infinite alternate;animation:blink 1s ease-out 0s infinite alternate}.add-form{position:relative;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);display:flex;flex-direction:column;width:300px;font-family:Indie Flower,Permanent Marker,cursive!important}.add-form h2{text-align:center}.add-form select{padding:.5rem;background-color:rgba(1,1,1,0);border:none}.add-form input{padding:.5rem 1rem}.add-form__input{position:relative;margin:.5rem 0}.add-form__input>div{width:100%;display:flex}.add-form__input>div>input{flex-grow:1}.add-form__input>span{position:absolute;left:0;top:0;-webkit-transform:scale(1.3) translate(30%,30%);transform:scale(1.3) translate(30%,30%)}.add-form button{margin-top:.5rem;border-radius:.5rem;padding:.5rem 0}.shake{-webkit-animation:shake 1s ease-out 0s 1;animation:shake 1s ease-out 0s 1}.display-none{display:none}.grid-col-2{display:grid;grid-template:auto/repeat(2,1fr);grid-gap:.5rem}@media (max-width:600px){.grid-col-2{grid-template:auto/1fr}}h1,h2{margin:0;text-align:center;font-family:Permanent Marker,cursive}.messages{overflow:auto;max-height:40vh}.messages>:nth-child(2n - 1){background-color:rgba(240,128,128,.2)}.message{border-radius:.5rem;padding:1rem;margin:1rem 2rem}.message__header{display:flex;flex-direction:row;justify-content:space-between}@-webkit-keyframes appear{0%{opacity:0}to{opacity:1}}@keyframes appear{0%{opacity:0}to{opacity:1}}@-webkit-keyframes blink{0%{opacity:.2}to{opacity:1}}@keyframes blink{0%{opacity:.2}to{opacity:1}}@-webkit-keyframes shake{0%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}30%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes shake{0%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}30%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}
/*# sourceMappingURL=main.5da1c891.chunk.css.map */