*{margin:0;padding:0;box-sizing:border-box}nav{position:fixed;width:100vw;left:0;top:0;display:flex;align-items:center;background-color:#ed1e79}nav h1{margin:0 10px;font-size:large}nav .spacer{flex-grow:1}.navbar{overflow:hidden}.navbar a{float:left;display:block;color:#fff;text-align:center;padding:14px 16px;text-decoration:none;text-transform:uppercase}.navbar a:hover,.navbar .selected{background-color:#ddd;color:#ed1e79}.spacer{height:30px}.login-btn{padding:14px 16px;margin-right:10px;display:inline-block;width:100px;text-transform:uppercase;text-align:center}.login-btn:hover{background-color:#ddd;color:#ed1e79}.dao-wrapper,.vote-wrapper{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.dao-wrapper .card,.vote-wrapper .card{display:flex;flex-direction:column;align-items:center;border:1px solid violet;border-radius:4px;height:250px}.dao-wrapper .card form,.vote-wrapper .card form{display:flex;flex-direction:column}.dao-wrapper .card form input[type=button],.vote-wrapper .card form input[type=button]{align-self:center}.card .tiny-card{display:flex;justify-content:space-between;gap:20px}.card .space5{height:5px}.modal{position:fixed;left:0;top:0;width:100%;height:100%;display:none;justify-content:center;align-items:center;z-index:1000;overflow:auto;background-color:#000c}.modal.modal-show{display:flex;animation:fadeIn .1s ease-in-out forwards}.modal.modal-hide{animation:fadeOut .1s ease-in-out .1s forwards}.modal-content{position:relative;background-color:#fff;color:#ed1e79;margin:2rem;padding:2rem;border-radius:.25rem;width:35%;max-height:75%;overflow:auto;box-shadow:0 4px 20px #0006}.modal.modal-show .modal-content{animation:fadeInDown .3s ease-in-out forwards}.modal.modal-hide .modal-content{animation:fadeOutUp .2s ease-in-out forwards}.modal-close{position:absolute;top:0;right:0;font-size:1.75rem;font-weight:700;padding:0 .75rem;color:#0003;cursor:pointer;-webkit-user-select:none;user-select:none}.modal-close:hover,.modal-close:focus{color:#00000080}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-3rem)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOutUp{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-3rem)}}@media (max-width: 992px){.modal-content{width:80%}}@media (max-width: 767px){.modal-content{padding:2rem 1rem 1rem;width:90%}}.popup-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center}.popup-wrapper h2{color:var(--background)}.member-wrapper{margin-top:20px;display:flex;justify-content:center;flex-wrap:wrap;gap:10px;min-height:50vh}.member-wrapper .card{display:flex;flex-direction:column;align-items:center;border:1px solid violet;border-radius:4px;height:250px;padding:20px}.member-wrapper .card h3{text-transform:capitalize}.member-wrapper .card .image-wrapper{width:100px;height:100px;border-radius:50%}.member-wrapper .card .image-wrapper img{object-fit:contains}.unity-wrapper{width:800px;height:600px;margin-top:20px}.unity-wrapper canvas{width:100%;height:100%}.fosset-wrapper{display:flex;flex-direction:column;gap:10px}.fosset-wrapper .btns{display:flex;justify-content:center}.fosset-wrapper .fosset-cards{display:flex;justify-content:space-evenly}.canvas-wrapper{display:flex;justify-content:center}canvas{outline:1px solid whitesmoke}#character{display:none}.ui h1,.ui h2,.ui p{color:#5f9ea0}#gameover,#restart,#start{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background-color:#faebd7;padding:30px;border-radius:4px;min-width:300px}.restart-btn{padding:5px 14px;color:#5f9ea0;font-size:large}#restart .score p{margin:10px;font-weight:700}#gameover.activate,#restart.activate,#start.activate{display:flex;flex-direction:column;align-items:center}@media (width < 768px){canvas{outline:none}}
