@font-face{font-family:Avenir;src:url(/src/assets/Font/AvenirNextLTPro-Regular.otf);font-weight:400}@font-face{font-family:Avenir;src:url(/src/assets/Font/AvenirNextLTPro-Demi.otf);font-weight:600}@font-face{font-family:Avenir;src:url(/src/assets/Font/AvenirNextLTPro-Bold.otf);font-weight:700}*{font-family:Jost,sans-serif;box-sizing:border-box;margin:0}html,body{overflow-x:hidden;overflow-y:hidden;height:100%}a{text-decoration:none;color:inherit}@font-face{font-family:Avenir;src:url(/src/assets/Font/AvenirNextLTPro-Regular.otf);font-weight:400}@font-face{font-family:Avenir;src:url(/src/assets/Font/AvenirNextLTPro-Demi.otf);font-weight:600}@font-face{font-family:Avenir;src:url(/src/assets/Font/AvenirNextLTPro-Bold.otf);font-weight:700}@keyframes fadeInOut{to{opacity:1;transform:scale(.9)}50%{opacity:1;transform:scale(1)}to{opacity:1;transform:scale(1)}}@keyframes fadeIn{0%{opacity:0;transform:scale(.5)}50%{opacity:0;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@keyframes growAndShrink{0%{transform:scale(.5)}50%{transform:scale(1.4)}to{transform:scale(1)}}.intro-buttons{display:flex;flex-direction:row;justify-content:space-between;gap:4rem;padding-bottom:4.8vh}.intro__container{display:flex;flex-direction:column;justify-content:space-between;align-items:center;height:90vh;padding-bottom:4vh}.game__container{position:relative;display:flex;justify-content:center;align-items:center;width:20vw;height:50vh;min-width:300px;border-radius:6px;outline:5px solid #007bff;outline-offset:1rem;overflow:hidden;padding-bottom:3rem;margin:3rem auto 2.5rem;overflow:visible}@media (min-width: 768px){.game__container{width:60vw;height:80vh}}@media (min-width: 900px){.game__container{width:20vw;height:50vh}}@media (min-width: 900px){.game__container{margin-top:3rem}}.box-background{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:16px;padding-top:3rem;margin-top:2rem;width:20vw;height:50vh;min-width:250px;overflow:visible}.pic-logo{width:250px;height:auto;animation:growAndShrink 1.5s ease-in-out forwards;z-index:1}.text-logo{width:250px;height:auto;animation:fadeInOut 1.5s ease-in-out forwards;animation:growAndShrink 1.5s ease-in-out forwards}.text-logo2{position:relative;top:-80px;width:250px;height:auto;animation:fadeIn 1.5s ease-in-out forwards}.button__cont{margin:1.5rem 1rem}@keyframes slideInFromRight{0%{transform:translate(100%);opacity:0}70%{transform:translate(-15%);opacity:1}to{transform:translate(0);opacity:1}}.play-button{width:120px;height:60px;padding:1rem 0;font-size:1rem;text-align:center;font-weight:600;background-color:#007bff;color:#fff;border:none;border-radius:5px;cursor:pointer;animation:slideInFromRight 1.5s ease-out forwards;position:relative}.play-button:hover{background-color:#0056b3}@keyframes slideInFromLeft{0%{transform:translate(-100%);opacity:0}70%{transform:translate(15%);opacity:1}to{transform:translate(0);opacity:1}}.how-to-play__button{width:120px;height:60px;padding:1rem 0;font-size:1rem;text-align:center;font-weight:600;background-color:#0c6;color:#fff;border:none;border-radius:5px;cursor:pointer;animation:slideInFromLeft 1.5s ease-out forwards;position:relative}.how-to-play__button:hover{background-color:#4caf50}.nav-bar{display:flex;justify-content:space-between;align-items:center;z-index:100;width:100%;padding:1rem;height:80px;border-bottom:1px solid rgba(32,32,32,.5)}.nav-bar__side-bar__button{height:45px;padding-right:41px;width:auto;cursor:pointer}.nav-bar__logo{width:100px;height:auto}.nav-bar__caption{font-family:Jost,sans-serif;font-size:1rem;font-weight:600;text-align:center;transition:transform 1s ease-in-out}.nav-bar__title{font-family:Jost,sans-serif;font-size:1rem;font-weight:700;transition:transform 1s ease-in-out}.nav-bar__title:hover{animation:wiggle 1s ease-in-out infinite;background-color:#32323200}.nav-bar__icons{width:35px;height:auto}.nav-bar__icons__container{display:flex;justify-self:right;align-items:flex-end;gap:.5rem}.auth{display:flex;align-items:center;gap:.5rem}.auth__name{flex-wrap:wrap;justify-content:right;width:100%;color:#000;text-decoration:none}.auth__profile{display:flex;flex-direction:column;justify-content:center;align-items:center}.auth__profile-icon{height:42px;width:auto}.auth__log-signin{display:flex;gap:1rem;text-decoration:none}.auth__logout{font-size:.8rem;text-align:right;margin:0;cursor:pointer}.auth__logout:hover{cursor:pointer;color:#0075ff}.auth__logout:active{scale:1.2;padding-right:.5rem}.auth__link{color:#333}@media (max-width: 910px){.navbar{height:auto;padding:1rem 1.5rem;gap:1rem}.navbar__logo{height:40px;margin-right:2rem}.auth__right{display:none}}@media (max-width: 700px){.navbar{flex-wrap:wrap;justify-content:space-around}}@font-face{font-family:Avenir;src:url(/src/assets/Font/AvenirNextLTPro-Regular.otf);font-weight:400}@font-face{font-family:Avenir;src:url(/src/assets/Font/AvenirNextLTPro-Demi.otf);font-weight:600}@font-face{font-family:Avenir;src:url(/src/assets/Font/AvenirNextLTPro-Bold.otf);font-weight:700}.game{display:flex;justify-content:center;align-items:center}.main{display:flex;flex-direction:column;justify-content:space-between;align-items:center;height:90vh}.face-box__container{position:relative;display:flex;justify-content:center;align-items:center;width:20vw;height:50vh;min-width:300px;border-radius:6px;outline:5px solid #007bff;outline-offset:1rem;overflow:hidden;margin-top:6vh;margin-bottom:4vh}@media (min-width: 768px){.face-box__container{width:40vw;height:90vh}}@media (min-width: 900px){.face-box__container{width:20vw;height:50vh}}@media (min-width: 900px){.face-box__container{margin-top:3rem}}.face__image{object-fit:cover;object-position:top;width:100%;height:100%}.overlay{display:flex;flex-direction:column;position:absolute;top:0;left:0;width:99.9%;height:100%;z-index:1}.credits{text-align:center;margin:0;padding-right:8rem}.credits__container{display:flex;justify-content:center;margin-bottom:1rem}@keyframes flicker{0%{opacity:1}25%{opacity:0}50%{opacity:1}75%{opacity:0}99%{opacity:1}to{opacity:0}}.overlay-cell{width:100%;display:inline-block;cursor:pointer;border:2px outset #323232;border-radius:10px;transition:opacity .5s ease}.overlay-cell.filled{background-color:#202020}.overlay-cell.flicker-animation{animation:flicker .5s ease forwards}.overlay-cell.transparent{background-color:transparent;border:none;opacity:0}@font-face{font-family:Avenir;src:url(/src/assets/Font/AvenirNextLTPro-Regular.otf);font-weight:400}@font-face{font-family:Avenir;src:url(/src/assets/Font/AvenirNextLTPro-Demi.otf);font-weight:600}@font-face{font-family:Avenir;src:url(/src/assets/Font/AvenirNextLTPro-Bold.otf);font-weight:700}.input-container{display:flex;justify-content:center;justify-content:space-between;flex-wrap:wrap;z-index:1;padding:1rem 1rem 3rem;margin-bottom:2rem;gap:1rem;height:auto;width:auto}@media (min-width: 768px){.input-container{padding-bottom:3rem}}.results-dropdown{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-top:none;list-style:none;margin:0;padding:0}.results-dropdown li{padding:8px;cursor:pointer}.results-dropdown li:hover{background:#f0f0f0}.label{display:flex;flex-direction:column;justify-content:center}.name-input{height:60px;padding:1rem;font-size:1rem;border:1px solid #ccc;border-radius:5px;flex-grow:1}.name-input__cont{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;align-items:center;flex-grow:1}.name-input::placeholder{font-family:Jost,sans-serif;font-size:1rem;color:#323232}.name-input:focus{outline:3px solid #007bff}.show{display:block;height:60px}.hide{display:none}.submit-button{width:110px;height:60px;padding:1rem;font-size:1rem;text-align:center;font-weight:600;background-color:#007bff;color:#fff;border:none;border-radius:5px;cursor:pointer}.skip-button{display:flex;width:110px;height:60px;padding:.5rem 1rem;font-size:1rem;text-align:center;font-weight:600;background-color:#ff5100;color:#fff;border:none;border-radius:5px;cursor:pointer}.submit-button:hover{background-color:#0056b3}.buttons{width:100%;display:flex;justify-content:center;justify-content:space-between;align-items:flex-start}.scores-tries__container{display:flex;flex-direction:column;align-items:center}.scores-box{background-color:#d3d3d3;border-radius:6px;margin-top:.5rem}.scores-box p{margin:0}.tries-counter{font-family:Jost,sans-serif;font-weight:600;text-align:center}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:1000}.modal-content{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;padding:20px;border-radius:8px;z-index:1001;box-shadow:0 4px 8px #0003}.close-modal{position:absolute;top:10px;right:10px;background:none;border:none;cursor:pointer}.share-button{margin-top:10px;padding:8px 16px;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}.share-button:hover{background-color:#0056b3}@font-face{font-family:Avenir;src:url(/src/assets/Font/AvenirNextLTPro-Regular.otf);font-weight:400}@font-face{font-family:Avenir;src:url(/src/assets/Font/AvenirNextLTPro-Demi.otf);font-weight:600}@font-face{font-family:Avenir;src:url(/src/assets/Font/AvenirNextLTPro-Bold.otf);font-weight:700}.sidebar{position:fixed;display:flex;flex-direction:column;left:0;top:0;height:100%;width:100vw;background-color:#fff;box-shadow:2px 0 5px #00000080;z-index:2;overflow-y:scroll;overflow-x:hidden}@media (min-width: 768px){.sidebar{width:66.6vw}}@media (min-width: 900px){.sidebar{width:33.3vw}}.sidebar__nav{position:fixed;display:flex;height:80px;width:100vw;gap:1rem;justify-content:space-between;padding:1rem;background-color:#fff;border-bottom:1px solid black;z-index:5}@media (min-width: 768px){.sidebar__nav{width:66.6vw}}@media (min-width: 900px){.sidebar__nav{width:33.3vw}}.sidebar__nav__controls{display:flex;gap:2rem}.sidebar__close{display:flex;align-items:center}.sidebar__close__button{height:45px;width:auto;cursor:pointer}.sidebar__back{display:flex;align-items:center}.sidebar__back__button{height:48px;width:auto;cursor:pointer}.sidebar__menu{margin-top:80px}.sidebar__item{font-size:2rem;padding:1.5rem 0;cursor:pointer}.sidebar__item__cont{display:flex;width:100%;height:auto;list-style-type:none}.sidebar__item__cont:hover{background-color:azure}.side-bar__overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:2;display:none}.side-bar__overlay.show{display:block}@font-face{font-family:Avenir;src:url(/src/assets/Font/AvenirNextLTPro-Regular.otf);font-weight:400}@font-face{font-family:Avenir;src:url(/src/assets/Font/AvenirNextLTPro-Demi.otf);font-weight:600}@font-face{font-family:Avenir;src:url(/src/assets/Font/AvenirNextLTPro-Bold.otf);font-weight:700}.categories-container{padding:1rem 0;margin-top:80px;width:100%}.categories-list{list-style-type:none;padding:0;padding-left:2rem;width:50%}.category-item{font-size:1.5rem;padding:1.5rem 0;cursor:pointer;position:relative;width:100%}.category-item:hover{box-shadow:2px 0 5px #00000080}@media (min-width: 768px){.category-item{font-size:2rem}}.subcategories-list{display:none;min-width:130%;list-style-type:none;padding-inline-start:0;border-radius:4px;margin:0;position:absolute;top:-.5%;left:100%;background-color:#fff;box-shadow:2px 0 5px #00000080;z-index:1000}.category-item:hover .subcategories-list,.subcategories-list:hover{display:block}.subcategory-item{font-size:1.2rem;padding:1.25rem 1rem;cursor:pointer}.subcategory-item:hover{background-color:#cdc9c3}@media (min-width: 768px){.grayscale{filter:grayscale(100%) contrast(100%)}}.grayscale:hover{filter:grayscale(0%) contrast(100%);background-color:#cdc9c3}.login-container,.signup-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background-color:#f9f9f9;font-family:Arial,sans-serif}.login-container h2,.signup-container h2{color:#333;margin-bottom:20px}.login-container form,.signup-container form{display:flex;flex-direction:column;gap:10px;width:100%;max-width:320px}.login-container form input,.signup-container form input{padding:10px;font-size:16px;border:1px solid #ccc;border-radius:4px}.login-container form input:focus,.signup-container form input:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 .2rem #007bff40}.login-container form button,.signup-container form button{padding:10px 20px;font-size:16px;color:#fff;background-color:#007bff;border:none;border-radius:4px;cursor:pointer}.login-container form button:hover,.signup-container form button:hover{background-color:#0056b3}.login-container .error,.signup-container .error{color:#dc3545;margin-bottom:15px}.login-container button:not(:first-child),.signup-container button:not(:first-child){margin-top:15px}.gsi-material-button{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-webkit-appearance:none;background-color:#fff;background-image:none;border:1px solid #747775;-webkit-border-radius:4px;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#1f1f1f;cursor:pointer;font-family:Roboto,arial,sans-serif;font-size:14px;height:40px;letter-spacing:.25px;outline:none;overflow:hidden;padding:0 12px;position:relative;text-align:center;-webkit-transition:background-color .218s,border-color .218s,box-shadow .218s;transition:background-color .218s,border-color .218s,box-shadow .218s;vertical-align:middle;white-space:nowrap;width:auto;max-width:400px;min-width:min-content}.gsi-material-button .gsi-material-button-icon{height:20px;margin-right:12px;min-width:20px;width:20px}.gsi-material-button .gsi-material-button-content-wrapper{-webkit-align-items:center;align-items:center;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;height:100%;justify-content:space-between;position:relative;width:100%}.gsi-material-button .gsi-material-button-contents{-webkit-flex-grow:1;flex-grow:1;font-family:Roboto,arial,sans-serif;font-weight:500;overflow:hidden;text-overflow:ellipsis;vertical-align:top}.gsi-material-button .gsi-material-button-state{-webkit-transition:opacity .218s;transition:opacity .218s;bottom:0;left:0;opacity:0;position:absolute;right:0;top:0}.gsi-material-button:disabled{cursor:default;background-color:#ffffff61;border-color:#1f1f1f1f}.gsi-material-button:disabled .gsi-material-button-contents{opacity:38%}.gsi-material-button:disabled .gsi-material-button-icon{opacity:38%}.gsi-material-button:not(:disabled):active .gsi-material-button-state,.gsi-material-button:not(:disabled):focus .gsi-material-button-state{background-color:#303030;opacity:12%}.gsi-material-button:not(:disabled):hover{-webkit-box-shadow:0 1px 2px 0 rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);box-shadow:0 1px 2px #3c40434d,0 1px 3px 1px #3c404326}.gsi-material-button:not(:disabled):hover .gsi-material-button-state{background-color:#303030;opacity:8%}.profile{display:flex;flex-direction:column;background-color:#fff;background-image:url(src/assets/images/transparent-white-paper-texture-15.png);box-shadow:0 2px 5px #0003;padding:16px;margin:16px;justify-content:left;align-items:center}.profile__image{width:100px;height:auto;padding-right:1rem}.profile__topics{display:flex;flex-wrap:wrap;justify-content:center;width:100%}.profile__topic{display:flex;justify-content:space-between;flex-direction:row;width:60%;gap:1rem;padding:.5rem 0;background-color:#fff;background-image:url(src/assets/images/transparent-white-paper-texture-15.png);box-shadow:0 2px 5px #0003;padding:16px;margin:16px}.profile__buttons{display:flex;gap:1rem}.profile__button{height:42px;border-radius:3px;padding:0rem 1rem;box-shadow:0 0 5px #0003}.profile__delete-button{background-color:#f5e9e9}.user-settings{display:flex;flex-direction:row;gap:1rem;max-width:600px;margin:1rem auto;padding:2rem;background-color:#fff;border-radius:8px;box-shadow:0 0 10px #0000001a;overflow:scroll}.user-settings h1{text-align:center;margin-bottom:2rem}.user-settings .form-group{margin-bottom:1.5rem}.user-settings .form-group label{display:block;margin-bottom:.5rem;font-weight:700}.user-settings .form-group input{width:100%;padding:.5rem;border:1px solid #ccc;border-radius:4px;margin-bottom:.5rem}.user-settings .form-group button{display:inline-block;padding:.5rem 1rem;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}.user-settings .form-group button:hover{background-color:#0056b3}