body{background:radial-gradient(circle at 25% 25%,#c45757,#5f61c9,#634594,#b34553);font-family:Maven Pro,sans-serif}*{margin:0;padding:0;box-sizing:border-box}.main-container{display:block;margin-top:25px;flex-direction:column;justify-content:center;align-items:center;height:100vh}h1{color:#fff;text-align:center;font-family:"Jersey 20",sans-serif;font-weight:400;font-size:3.5rem;line-height:.95;padding:0 10px;cursor:default}.game-container{width:100%;max-width:700px;margin:0 auto;display:flex;flex-direction:column;justify-content:space-between;align-items:center}.city-card{width:250px;height:175px;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#b2cfed;border-radius:10px;margin-top:25px;position:relative}.city-card.hot{background-color:#f0aaaa}.city-card.cold{background-color:#a0a6f3}.city-card span{display:block;width:100%;padding:0 10px;font-size:2rem;text-align:center;cursor:default}.city-card .question,.city-card .loading-spinner{display:flex;flex-direction:column;justify-content:center;position:absolute;background:#203298 url(/backgroundtest.jpg) repeat center center;background-size:175px 175px;border-radius:10px;width:100%;height:100%;top:0;left:0;right:0;bottom:0}.city-card .question.citySelected,.city-card .loading-spinner.loaded{display:none}.city-card .question span{display:block;color:#fff;width:100%;text-align:center;cursor:default}.city-card .loading-spinner svg{margin:0 auto;color:#fff}.streak-info{margin-top:20px;cursor:default;color:#fff;text-align:center;font-family:"Jersey 20",sans-serif;font-weight:400;font-size:2.5rem}.instructions{background-color:#fff;color:#121212;padding:5px 10px 6px;border-radius:25px;position:fixed;bottom:20px;left:20px;cursor:pointer}.instructions .modal,.game-over-container{position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:#00000080;display:flex;flex-direction:column;align-items:center;justify-content:center;display:none;cursor:default}@keyframes fadeIn{0%{background-color:#c4575700}to{background-color:#c4575780}}.game-over-container{animation:fadeIn .4s ease-in-out;display:flex;background-color:#c45757a6;z-index:0}.game-over-container.hidden{display:none}@keyframes grow{0%{transform:scale(0)}to{transform:scale(1)}}.game-over-modal{animation:grow .5s ease-out;background-color:#b34553;background:radial-gradient(circle at 50% 28%,#a23c85,#864084 20%,#c45757);height:55%;width:85%;max-width:500px;padding:25px;border-radius:25px;display:flex;flex-direction:column;align-items:center;justify-content:center}.game-over-modal h2{color:#fff;font-size:2rem;font-weight:400;text-align:center;margin-top:15px}.game-over-modal button{background-color:#fff;color:#121212;padding:10px 20px 12px;border-radius:25px;cursor:pointer;font-family:Maven Pro,sans-serif;font-size:1.25rem;border:0;margin:35px auto 5px;display:block}.instructions .modal.active{display:flex}.instructions .modal .close-button{margin-left:min(75%,450px);font-size:20px;cursor:pointer;background-color:#000000d9;border-radius:100%;padding:10px;margin-bottom:8px}.instructions .modal .close-button svg{display:block}.instructions .modal .text{background-color:#000;color:#fff;background-color:#000000d9;padding:25px;border-radius:25px;width:85%;max-width:500px;margin-bottom:38px}.instructions .modal .text p{line-height:1.45;margin-top:15px}.instructions .modal .text a{color:#ffffffe6;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}.instructions .modal .text a:hover{color:#fff;text-decoration-thickness:2px}@media screen and (min-width: 990px){.main-container{margin-top:0;display:flex}.game-container{flex-direction:row}h1{font-size:5rem}.city-card{width:300px;height:300px}.city-card span{font-size:2.5rem}}.error-message-container{width:100%;max-width:700px;margin:20px auto 15px;color:#fff;background-color:#000000d9;padding:25px;border-radius:25px;width:85%;max-width:500px;line-height:1.45}.error-message-container a{color:#ffffffe6;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}.error-message-container a:hover{color:#fff;text-decoration-thickness:2px}
