@import url(https://fonts.googleapis.com/css2?family=Inter&family=Poor+Story&display=swap);#take-userName,body{justify-content:center}#main-question,header{font-family:Inter,sans-serif}#joker,#main-box{border-radius:20px;display:flex}#form1,#input,#joker,#joker-img,#life,#main-box,.display1,.head-item,.head-item1,body,header{display:flex}#form1>button,#joker,#joker-img,.joker-img,svg{cursor:pointer}#Timer,#form1,#name{width:50%}.ribbon::after,.ribbon::before{content:"";height:1.5rem;width:1.5rem;bottom:-.8rem;transform:rotate(45deg);background-color:#5c5be5;z-index:-1}#score,#take-userName,form{width:100%;height:100%}#form1,#form1>input,#joker,#score,form{text-align:center}*{padding:0;margin:0}body{background-image:url("imges/ferris.jpg");background-color:#000;background-size:contain;background-repeat:no-repeat;background-position:right;height:100vh;align-items:center;overflow:hidden}.visibility{visibility:hidden}.cracker,.visibility1{visibility:visible}#main-box{height:470px;width:800px;background-color:#1b1b1b;flex-direction:column;align-items:stretch;justify-content:space-evenly}header{width:100%;height:9vh;flex-direction:row;justify-content:space-around}.joker-img{width:30px}.head-item{width:39%;justify-content:space-around;align-items:center}.head-item1{width:20%;justify-content:space-evenly;align-items:center}#joker-img{align-items:center;justify-content:space-evenly;width:50%}#life{justify-content:space-between;align-items:center}#main-question{width:80%;font-size:38px;color:#fff;margin:auto}#joker{width:6em;font-family:Poor Story;height:2em;background-color:#1d71a0;font-size:24px;justify-content:space-around;align-items:center;padding:0 5px;margin-left:82px;line-height:19px}#form1>input,#input-ans{font-size:20px;padding-left:5px}.used-joker-animation{animation:2s ease-in-out forwards showjoker}#input-ans{width:90%;margin-left:14px;height:79%;background:0 0;color:red;border:0}#input{height:40px;width:85%;border:1px solid #000;background:#000;border-radius:20px;justify-content:space-between;align-items:center;margin:auto}#form1>input:focus,#input-ans:focus{outline:0}svg{width:53px;height:43px;opacity:.6}.cracker1{position:absolute;left:10px;top:-7px;width:300px;visibility:hidden}.cracker2,.cracker3{width:200px;visibility:hidden;position:absolute}.cracker2{left:10px;bottom:50px}.cracker3{right:20px;top:0;bottom:30px}.cracker4{position:absolute;right:10px;width:300px;visibility:hidden}.cracker5{position:absolute;left:10vw;bottom:30vh;visibility:hidden;width:200px}.cracker6{position:absolute;right:12vw;bottom:0;visibility:hidden;width:300px}.rotate-joker{animation:1s ease-in-out forwards rotate}.write_ans{box-shadow:0 0 20px green}.wrong_ans{box-shadow:0 0 20px red}#form1{height:40%;justify-content:space-evenly;flex-direction:column;margin:60px 10px;font-size:3rem}#Timer,#name,#score{font-size:2rem;display:flex;color:#fff}#form1>input{border-radius:5px;background:#fff;border:0}#form1>button{height:36px;font-size:23px;color:grey;background:#1b1b1b;border:0;border-radius:5px}#take-userName{display:flex;flex-direction:column;align-items:center;position:absolute;background:#ca2f2f;color:#f0f8ff}#name{top:0;margin:auto;justify-content:center}button{background:0 0;border:0}form{display:flex;flex-direction:column;justify-content:center}#Timer{bottom:0;justify-content:space-around}nav{display:flex;position:absolute;top:0;width:100%;margin-top:2vh}.ribbon{width:42rem;height:5.5rem;top:-.5rem;background-color:#5c5be5;position:absolute;left:-1rem;-webkit-box-shadow:0 15px 11px -6px #7a7a7d;box-shadow:0 15px 11px -6px #7a7a7d}.ribbon::before{left:.35rem;position:absolute}.ribbon::after{right:.35rem;position:absolute}#score{visibility:hidden;justify-content:center;flex-direction:row;position:absolute;top:50%}#oposite-score{display:flex;flex-direction:column;justify-content:space-around;position:absolute;left:2rem;color:#fff}@keyframes rotate{0%{color:transparent}25%{rotate:90deg}50%{rotate:180deg}75%{rotate:270deg}100%{rotate:360deg;color:red}}@keyframes showjoker{0%{background:red}50%{background:#adff2f;rotate:180}100%{background:orange;rotate:360deg}}