header{display:flex;gap:100px;padding:16px}header i{display:grid;place-items:center;font-size:2rem;cursor:pointer}header i:hover{scale:1.1}form{position:relative;margin-top:32px;display:flex;justify-content:center;align-items:start;flex-wrap:wrap;gap:16px}form input{width:360px;height:40px;font-size:1rem;outline:none;border:none;border:2px solid #000;color:#000;padding-inline:16px;border-radius:20px;background-color:#fff}::placeholder{font-style:italic}@keyframes inputBlink{0%{border-color:#000}30%{border-color:#000}to{border-color:transparent}}.inputAnimation{animation-name:inputBlink;animation-duration:1s;animation-iteration-count:infinite;animation-direction:alternate}@keyframes fail{0%{border-color:red}50%{border-color:red}to{border-color:#000}}.failAnimation{animation-name:fail;animation-duration:1s;animation-iteration-count:1}.btnSubmit{width:140px;height:40px;border-radius:20px}.btnSubmit:hover{scale:1.1}.results{position:absolute;z-index:10;width:360px;margin-top:8px}.results ul{max-height:150px;overflow-x:hidden;overflow-y:auto;border:1px solid #000;list-style:none}.results ul li{padding:.5rem;border-bottom:1px solid #000;cursor:pointer;color:#000;background-color:#fff}.results ul li:hover{color:#000;text-shadow:none;background-color:#fff458}.results ul li:active{color:#000;text-shadow:none;background-color:#faf49f}.card{background:transparent;border-radius:.6rem;box-sizing:border-box;color:#000;font-size:17px;font-weight:400;position:relative;text-align:center}.card span{align-items:center;backface-visibility:hidden;border-radius:.6rem;display:flex;flex-direction:column;font-size:2rem;height:100%;justify-content:center;position:absolute;transition:transform 1s;width:100%}.card span:nth-child(1){background-color:#fff458;transform:rotateY(0)}.cardTurn{cursor:pointer}.cardTurn:hover{scale:1.05}.card span:nth-child(2){background-color:#faf49f;transform:rotateY(180deg)}.card span p{padding:4px}.card span:nth-child(2) img{height:100%;width:auto;border-radius:.6rem}@keyframes cardBlink{0%{background-color:#fff458;color:#000}30%{background-color:#fff458;color:#000}to{background-color:#fff;color:#fff}}.cardAnimation{animation-name:cardBlink;animation-duration:1s;animation-iteration-count:infinite;animation-direction:alternate}.hints{margin-top:32px;margin-bottom:32px}.hints h2{text-align:center;text-shadow:1px 1px 3px #363636}.cards{margin-top:24px;display:grid;grid-template-areas:"poster    director    genres" "poster    actor       date  ";grid-template-rows:266px 266px;grid-template-columns:368px 368px 368px;gap:20px}.poster{grid-area:poster}.director{grid-area:director}.actor{grid-area:actor}.genres{grid-area:genres}.date{grid-area:date}@media (max-width: 1180px){.cards{grid-template-areas:"poster    director" "poster    actor   " "date      genres  ";grid-template-rows:266px 266px 266px;grid-template-columns:368px 368px}}@media (max-width: 800px){.cards{grid-template-areas:"poster  " "poster  " "date    " "director" "actor   " "genres  ";grid-template-rows:266px 266px 266px 266px 266px 266px;grid-template-columns:368px}}.turnInfo{display:flex;align-items:center;gap:24px;height:40px;margin-top:32px;font-size:1.25rem;text-shadow:1px 1px 3px #363636}.turnInfo button{width:140px;height:100%;border-radius:5px}.turnInfo button:hover{background-color:red;color:#fff}.endgameInfo{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:32px;font-size:1.25rem;text-align:center}.success{color:#90ff46;text-shadow:1px 1px 3px rgb(54,136,0)}.fail{color:red;text-shadow:1px 1px 3px rgba(255,150,150,.418)}.footer{position:fixed;left:16px;bottom:16px;text-align:left;background:rgba(0,0,0,.7);padding:8px 24px;border-radius:32px;opacity:.95;backdrop-filter:blur(8px);color:#fff}.shadowBg{position:fixed;width:100vw;height:100vh;background-color:#000000b3;z-index:9999}.infoBox{position:absolute;top:100px;width:350px;border-radius:8px;margin:0 auto;padding:16px;border:1px solid #fff;background-color:#000;color:#fff;z-index:99999}.infoBox h2{text-align:center}.infoBox p{margin-top:8px;font-size:1.05em}.infoBox i{display:grid;place-items:center;position:absolute;top:10px;right:10px;font-size:1.5rem;cursor:pointer}.infoBox i:hover{color:red}*{margin:0;padding:0;box-sizing:border-box;font-family:Open Sans,sans-serif}body{background-image:url(https://res.cloudinary.com/leprechaunotd/image/upload/v1678444916/tutti-muvi/blurred-bubbles_ewl6ap.webp);background-size:cover}.page{display:flex;flex-direction:column;align-items:center;max-width:1000px;min-height:100vh;margin:auto;color:#fff}main{margin-top:32px;display:flex;justify-content:center;align-items:center;flex-direction:column}button{cursor:pointer;border:none;outline:none;background-color:#fff;font-size:1.1rem;font-weight:600}.btnNextMovie{height:45px;width:180px;border-radius:5px;font-size:1.25rem}.btnNextMovie:hover{scale:1.1}