*{box-sizing:border-box;outline:none}body{margin:0;background-color:#000}header{display:flex;background-color:#fff;color:#0b0b00;width:100vw;justify-content:space-between;padding:30px;font-size:xx-large;z-index:10;background:linear-gradient(to bottom,#e25822,#ffa50000)}.mainPage{background:url(/img/background.png);background-repeat:no-repeat;background-position:center;background-attachment:fixed;background-size:cover;height:100vh;width:100vw;display:flex;flex-direction:column;justify-content:start;align-items:center;overflow-y:auto;gap:20px}.startPage{position:relative;height:100vh;width:100vw;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow-y:auto}.mainPage{opacity:0;transform:translateY(-50%);transition:opacity 1s ease,transform 1s ease}.mainPage.show{opacity:1;transform:translateY(0)}.background-video{position:fixed;top:0;left:0;width:100vw;height:100vh;object-fit:cover;z-index:-1;pointer-events:none}#root{margin:0;overflow-y:auto;display:flex;flex-direction:column;justify-content:start;align-items:center;min-height:100vh;width:100vw}.cardBox{width:calc(100vw - 40px);display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;justify-content:center;max-width:1040px;margin:20px;outline:black}.card{display:flex;flex-direction:column;padding:20px;border:5px solid white;background-color:#fefefe80;place-items:center;border-radius:10px;font-size:x-large}.card.spin{animation:spinIn .6s ease-in-out}@keyframes spinIn{0%{transform:rotateY(360deg)}to{transform:rotateY(0)}}.card:hover,.card:focus{background-color:#fffc;border-radius:10px;cursor:pointer}.card:active{background-color:#ff0}.card img{height:20vh}.modalOverlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100;overflow-y:auto;padding:20px}.modalContent{background:linear-gradient(to bottom,#e45821,#ffa500e6);padding:20px;border-radius:20px;font-size:x-large;display:flex;flex-direction:column;align-items:flex-end;max-width:90vh;max-width:95vw;overflow-y:auto}.flameButton{background:#e25822;border:none;color:#fff;padding:12px 24px;font-weight:700;font-size:16px;border-radius:6px;cursor:pointer;box-shadow:0 4px 8px #e2582299;transition:background .3s ease,box-shadow .3s ease}.rules{border-radius:10px;background-color:#000;border:2px solid orange}.name{color:#fff;font-weight:700;text-shadow:0 0 10px #ffa500,0 0 20px #ff4500,0 0 30px #ff0000,0 0 40px #ff0000,0 0 70px #ff8c00,0 0 100px #ff8c00}.flameButton:hover,.flameButton:focus{background:#f60;box-shadow:0 6px 12px #f60c}.modalContent>.flameButton:hover,.modalContent>.flameButton:focus{background-color:#a43030;animation:glow 2s infinite ease-in alternate}.scoreButtons{display:flex}.scoreButton{border-radius:10px;background-color:#000;border:2px solid orange;color:#fff;padding:12px 24px;margin:20px}@keyframes glow{0%{box-shadow:0 0 0 2px red}50%{box-shadow:0 0 20px 6px red}to{box-shadow:0 0 0 2px red}}.startButtons{background-color:#ffffff4d;display:flex;align-items:center;padding:20px 40px;border-radius:10px;flex-direction:column;gap:20px;animation:dropIn .7s ease-out}@keyframes dropIn{0%{transform:translateY(-100vh)}80%{transform:translateY(1vh)}to{transform:translateY(0)}}.drop-out{animation:dropOut .7s ease-in}.drop-in{animation:dropIn .7s ease-out}@keyframes dropOut{0%{transform:translateY(0)}20%{transform:translateY(1vh)}to{transform:translateY(-100vh)}}.levels{display:flex;gap:20px}.startButtons button{border:2px solid black;border-radius:5px;padding:10px 20px;font-size:x-large;background:linear-gradient(to bottom,#e25822,#ffa5004d);transition:transform .5s ease-in-out}.startButtons>button{width:50%}.startButtons button:hover,.startButtons button:focus{transform:scale(1.1);background-color:#e25822}.container{display:flex;margin:20px;gap:20px}.startButtons button.selected{transform:scale(1.1);background:#f60;box-shadow:0 6px 12px #f60c;border:2px solid #ff6600}.flameHover{font-size:x-large}.flameHover:hover,.flameHover:focus{background:#f60;color:#fff}@media (orientation: portrait){.mainPage{background:url(/img/phoneBackground.png);background-repeat:no-repeat;background-position:center;background-attachment:fixed;background-size:cover;height:100vh;width:100vw}.modalOverlay{align-items:start}}
