:root{--white:#fff;--yellow:#ffd166;--green:#06d6a0;--navy:#26547c;--pink:#ef476f;--black:#000;--gray:#f4f5f6;--light-navy:rgba(38,84,124,0.48);--dark-gray:#616c76}@font-face{font-family:"Roboto-Thin";src:url(/static/media/Roboto-Thin.321de678.ttf)}@font-face{font-family:"Roboto-Regular";src:url(/static/media/Roboto-Regular.11eabca2.ttf)}@font-face{font-family:"Roboto-Thin-Italic";src:url(/static/media/Roboto-ThinItalic.35a9c89a.ttf)}@font-face{font-family:"Roboto-Bold";src:url(/static/media/Roboto-Bold.e07df86c.ttf)}body,html{margin:0;min-height:100%;display:flex;flex:1 1;font-family:"Roboto",Arial,Helvetica,sans-serif}#root,.Container--container{display:flex;flex-direction:column;flex:1 1}.Container--container{background-color:var(--gray);text-align:center}.App--container{background-color:var(--gray);text-align:center;display:flex;flex-direction:column;flex:1 1}.Start--container{display:flex;flex-direction:column;text-align:center;position:relative;overflow:hidden;height:100%}.Start--logo{margin:100px auto 0;width:250px;height:180px}.Start--description{margin:20px 0 80px;font:16px "Roboto-Thin"}.Start--top-shape{width:300px;height:200px;background-color:var(--navy);position:absolute;right:-160px;top:-80px;transform:rotate(50deg)}.Start--bottom-shape{width:400px;height:300px;background-color:var(--green);position:absolute;left:-160px;bottom:-180px;transform:rotate(-30deg)}.Start--footer{margin:50px 0 0;padding:0 0 20px}.Start--footer-attribution{font:13px "Roboto-Regular";margin:5px}.Start--spotify-text{color:var(--green)}.Start--developer-text{color:var(--black)}.Start--github-link,.Start--github-link:visited{text-decoration:underline;color:var(--black)}.Start--api-status{color:var(--black);text-decoration:none;font:13px "Roboto-Regular"}@media only screen and (max-width:800px){.Start--bottom-shape{width:400px;height:300px;background-color:var(--green);position:absolute;left:-200px;bottom:-250px;transform:rotate(-30deg)}}@media only screen and (max-width:400px){.Start--bottom-shape{width:400px;height:300px;background-color:var(--green);position:absolute;left:-240px;bottom:-300px;transform:rotate(-30deg)}@media only screen and (max-height:600px){.Start--bottom-shape{display:none}}}.Button--button{background-color:var(--white);border:none;border-radius:8px;color:var(--black);font:24px "Roboto-Thin";cursor:pointer;min-height:45px;width:130px;margin:0 auto;padding:7px}.RoundSelection--container{padding-top:80px}.RoundSelection--options-container{margin:10px;display:grid;grid-template-columns:50% 50%;grid-template-rows:50% 50%}.RoundSelection--question{font:26px "Roboto-Thin"}.Option--button{border-radius:50%;width:5em;height:5em;color:var(--white);display:flex;justify-content:center;cursor:pointer;background-color:var(--white);border:none;font:24px "Roboto-Thin";padding:7px;margin:20px auto}.Option--button:hover{transition:transform .2s;transform:scale(.95)}.Option--button:active{transition:transform 1s;transform:scale(1.1)}.Option--button p{align-self:center}.navy{background-color:var(--navy)}.yellow{background-color:var(--yellow)}.green{background-color:var(--green)}.pink{background-color:var(--pink)}.Round--container{padding:20px 0}.Round--album-image{width:200px;height:200px;margin-bottom:20px;background-color:var(--dark-gray)}.Round--artists-container{display:grid;justify-content:center}.Progress--container{min-width:250px;max-width:400px;background-color:var(--navy);border-radius:15px;margin:0 auto 40px}.Progress--percentage{font:16px "Roboto-Thin";display:block;height:100%;max-width:100%;background-color:var(--yellow);border-radius:15px;cursor:default}.Artist--container{background-color:var(--white);color:var(--black);cursor:pointer;height:70px;width:330px;display:flex;justify-content:flex-start;align-items:center;border-radius:10px;margin:5px;border:none;font:24px "Roboto-Thin";padding:7px}.Artist--container:hover{background-color:var(--light-navy);color:var(--white)}.Artist--container span{font:22px "Roboto-Regular"}.Artist--image{width:50px;max-height:50px;margin-right:20px;background-color:var(--dark-gray)}.Artist--name{margin-right:20px;text-align:left}.Artist--number{margin:0 10px;width:20px}.Loading--container{font-size:24px;display:inline-flex;align-items:center;height:100vh;align-self:center}.Loading--emoji{display:inline-block;-webkit-animation:rotation 5s linear infinite;animation:rotation 5s linear infinite;margin:5px}@-webkit-keyframes rotation{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes rotation{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}.Result--container{flex:1 1;padding:0 0 20px}.Result--container,.Result--container.correct{background:linear-gradient(180deg,var(--white),var(--green))}.Result--container.incorrect{background:linear-gradient(180deg,var(--white),var(--pink))}.Result--album-image{margin:80px 0 0;width:200px;height:200px;background-color:var(--dark-gray)}.Result--result{font:36px "Roboto-Bold";color:var(--white);padding:10px;margin:10px}.Result--payload{font:24px "Roboto-Regular";color:var(--white);margin:10px 10px 40px}.FinalResult--container{padding:20px 0}.FinalResult--albums{display:flex;flex-wrap:wrap;justify-content:center}.FinalResult--single-album{width:150px;height:150px;background-color:var(--dark-gray);margin:5px}.FinalResult--single-album.incorrect{opacity:.2}.FinalResult--user-text{font:30px "Roboto-Regular";color:var(--black)}.FinalResult--score-container{margin-top:20px;margin-bottom:60px;display:grid;grid-template-columns:1fr;place-items:center}.FinalResult--score-background{grid-column-start:1;grid-row-start:1}.FinalResult--social-container{margin-top:20px}.FinalResult--social-container>button{margin:0 20px}.FinalResult--score-text{color:var(--black);grid-column-start:1;grid-row-start:1;font:40px "Roboto-Regular"}.FinalResult--score-text-span{color:var(--black);font:18px "Roboto-Thin"}@media only screen and (max-width:800px){.FinalResult--single-album{width:100px;height:100px}.FinalResult--score-text{font:35px "Roboto-Regular"}}.ShareButton--button{background-color:var(--white);border:none;border-radius:8px;cursor:pointer;margin:0 auto;padding:5px;height:60px;width:60px}.ShareButton--icon{width:40px}.Error--container{background-color:var(--gray);height:100vh;text-align:center}.Error--heading{font:36px "Roboto-Regular";padding-top:20px;margin:0}.Error--image{width:200px;height:200px;background-color:var(--dark-gray)}.Error--text{font:26px "Roboto-Thin";margin:30px 10px}
/*# sourceMappingURL=main.1c873b08.chunk.css.map */