body{margin:0;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}*{box-sizing:border-box;margin:0;padding:0}body{height:100vh;display:flex;align-items:center;justify-content:center;overscroll-behavior-y:none;font-family:Short Stack,sans-serif}.App{display:flex}img{width:30%}li{list-style:none}button{font-family:Happy Monkey,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;text-transform:capitalize}.homepage{min-width:100vw;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}.categoryListContainer{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto}.categoryBtn{position:relative;margin:10px;height:200px;width:400px;font-weight:bolder;font-size:26px;border-radius:10px;border:3px solid black;box-shadow:3px 5px 6px #0006}.categoryBtn span{visibility:hidden;background-color:#fff;color:#000;padding:10px 20px;border:2px solid black;border-radius:20px}.categoryBtn:hover span{visibility:visible}.categoryBtn:focus{border:2px solid rgba(4,29,120,1);box-shadow:0 0 20px #041d78}.categoryBtn:active{transform:scale(1.02)}.homepage:focus-within .startBtn{animation:hithere 3s ease-in-out}.startBtn{border:2px solid rgb(234,164,234);background-color:transparent;padding:10px 20px;border-radius:10px;font-weight:700}@keyframes hithere{30%{transform:scale(1.2)}40%,60%{transform:rotate(-20deg) scale(1.2)}50%{transform:rotate(20deg) scale(1.2)}70%{transform:rotate(0) scale(1.2)}to{transform:scale(1)}}@media only screen and (max-width: 600px){.categoryListContainer{display:flex;flex-direction:column;background-position:cover}.categoryBtn{width:auto;height:140px}}.gamePage{display:flex;text-align:center;overflow:hidden}.pictureDisplayContainer{width:50vw;height:100vh}.pictureDisplayContainer h2{position:absolute;font-size:60px;padding-top:20px;margin-left:25%;transform:translate(-50%)}.pictureDisplayContainer img{width:100%}.canvasContainer{width:50vw;height:100vh}.canvasTools{bottom:0;display:flex;align-items:center;justify-content:space-evenly}@media only screen and (max-width: 600px){.gamePage{flex-direction:column;width:100vw;overscroll-behavior-y:none}.pictureDisplayContainer{height:30vh;display:flex;justify-content:center;width:100vw}.canvasContainer{height:70vh;width:100vw}.pictureDisplayContainer h2{padding:0;font-size:40px}.pictureDisplayContainer img{width:60%;margin-top:20px}.canvasTools button{font-size:12px;margin:0;width:100px;text-align:center}}@keyframes anvil{0%{transform:scale(1) translateY(0);opacity:0;box-shadow:0 0 #f1f1f100}1%{transform:scale(.96) translateY(10px);opacity:0;box-shadow:0 0 #f1f1f100}to{transform:scale(1) translateY(0);opacity:1;box-shadow:0 0 500px #f1f1f100}}.popupContent{animation:anvil .3s cubic-bezier(.38,.1,.36,.9) forwards}.canvasTools{position:absolute;display:flex;flex-direction:column;align-items:flex-end;bottom:10px;right:10px;z-index:10}.canvasTools button{border-radius:50%;margin:5px;font-size:40px;width:80px;height:80px;display:flex;align-items:center;justify-content:center}.canvasTools .submitClearBtns{display:flex;align-items:flex-end}.canvasTools .submitClearBtns .clearAllBtn{background-color:transparent;color:red;border:2px solid red}.canvasTools .submitClearBtns .submitUserDrawingBtn{color:green;background-color:transparent;width:100px;height:100px;font-size:60px;border:2px solid green;text-align:center}@media only screen and (max-width: 600px){.canvasTools button{font-size:26px;height:50px;width:50px}.canvasTools .submitClearBtns .submitUserDrawingBtn{font-size:40px;width:70px;height:70px}}.popupContainer{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.popupContainer .popupContent{background:#fff;padding:2rem;border-radius:1rem;text-align:center}.popupContainer .popupContent .starsContainer .star{font-size:100px}.popupContainer .popupContent .Excellent .starOne,.popupContainer .popupContent .Excellent .starTwo,.popupContainer .popupContent .Excellent .starThree,.popupContainer .popupContent .Great .starOne,.popupContainer .popupContent .Great .starTwo,.popupContainer .popupContent .Good .starOne{color:#ff0}.homeBtn{background:transparent;border:1px solid red}.displaySideBtns{position:absolute;display:flex;flex-direction:column;left:10px;bottom:10px}.displaySideBtns .displayBtn{width:80px;height:80px;font-size:40px;border-radius:50%;margin:5px 0;display:flex;align-items:center;justify-content:center;background-color:transparent;border:2px solid blueviolet;color:#8a2be2}@media only screen and (max-width: 600px){.displaySideBtns{display:flex;justify-content:flex-end;flex-direction:row;top:10px;right:10px;height:60px}.displaySideBtns .displayBtn{width:50px;height:50px;font-size:26px;margin:0 5px}}.justDrawContainer{position:relative}.homeBtnJustDraw{position:absolute;bottom:10px;left:10px}.fullWidthCanvas{width:100vw;overflow:hidden}@media only screen and (max-width: 600px){.justDrawContainer{height:auto;margin:0}}
