body{background-color:#c8d0d2;margin:0;font-family:Cairo,sans-serif}.container{max-width:1300px;margin:1rem 2rem}.header{display:flex;justify-content:space-evenly;align-items:center;flex-wrap:wrap;background-color:#fff;padding:0 1rem;box-shadow:0 0 5px 2px #0000004d;max-width:100%;height:100%}@media (max-width: 768px){.form-group{flex-direction:column}}.form-group{display:flex;align-items:center;margin:.5rem}.form-group>label{font-size:1rem;margin-bottom:.25rem;margin-right:.5rem;font-weight:700;color:#0af}input,select{border:2px solid hsl(200,100%,50%);border-radius:4px}option{background-color:#b5c1c4;color:#00111a;font-size:15px}input:out-of-range{color:red}select:focus,input:focus{outline:none;border:2px solid hsl(200,100%,40%)}.btn{background-color:#0af;color:#fff;padding:.5em 1em;border-radius:.3em;border:none;cursor:pointer;font-size:1rem}.btn:hover{background-color:#08c}.card_grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;align-items:center}.card{display:flex;justify-content:center;align-items:center;position:relative;border-radius:.25rem;box-shadow:0 0 5px 2px #0000004d;background-color:#fff;transform-style:preserve-3d;transition:.15s;cursor:pointer;transform:perspective(1000px) rotateY(var(--rotate-y, 0)) translateY(var(--translate-y, 0))}.card:hover{--translate-y: -2px;box-shadow:0 0 5px 2px #00000080}.card.flip{--rotate-y: 180deg}.card .front{left:0}.card .front,.card .back{position:absolute;padding:1rem;backface-visibility:hidden}.card .back{transform:rotateY(180deg);font-size:1.5rem;font-size:700;color:#08c}.options{margin-top:.5rem}.option{margin-top:.25rem;color:#555;font-size:1rem}.option:first-child{margin-top:0}.before{display:flex;justify-content:center;align-items:center;padding:20px;margin:auto}.before h3{font-size:20px;font-weight:700;color:#0af}.q-name{color:#08c;font-weight:700;line-height:1.4;font-size:1.1rem}