:root{--red: #780400;--dark-red: #410E0B;--white: rgb(201, 172, 172);--light-grey: #f1f1f4;--text-color-dark: #333;--text-color-light: #f1f1f1;--white: #f1f1f1}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body,html{background-color:var(--white);color:var(--text-color-dark);font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;height:100%;line-height:1.5;margin:0;padding:0}h1{font-size:3.2em;line-height:1.1}h2,h3{font-weight:500;letter-spacing:.1px}a{color:var(--red);text-decoration:none;transition:.5s}a:hover{color:var(--dark-red)}textarea,input,button,select{font-size:1rem;font-family:inherit;border:none;border-radius:8px;padding:1rem;box-shadow:0 0 1px #0003,0 1px 2px #0003;background-color:#fff;line-height:1.5;margin:0}button{color:var(--white);font-weight:500;cursor:pointer;padding:1em 2em;background-color:var(--red);transition:.5s;width:100%}button:hover{background-color:var(--white);color:var(--red)}textarea:hover,input:hover,button:hover{box-shadow:0 0 1px #0009,0 1px 2px #0003}button:active{box-shadow:0 0 1px #0006;transform:translateY(1px)}form[action$=destroy] button,.btn-cancel{background-color:var(--white);color:var(--dark-red)}form[action$=destroy] button:hover,.btn-cancel:hover{background-color:var(--dark-red);color:var(--white)}form input{width:100%}form .btns{grid-column:2}form img{max-width:100%;border-radius:8px;box-shadow:0 0 1px #0003,0 1px 2px #0003}.btns{display:flex;gap:.5em}form{display:grid;grid-template-columns:1fr 2fr;gap:1em;align-items:center;box-shadow:1px 1px 8px #00000040;padding:1.5em;background-color:var(--white);transition:.5s;animation:fadeIn .5s;border-radius:8px;margin:auto}#sign-in-form,#sign-up-form{width:35rem}nav{background-color:var(--red);display:grid;left:0;position:fixed;right:0;text-align:center;top:0;padding:1em 2em;grid-template-columns:1fr 1fr;gap:1em}nav a{display:inline-block;color:var(--text-color-light);text-align:center;padding:20px 16px;text-decoration:none;letter-spacing:.1em;text-transform:uppercase;border:2px solid var(--red);font-weight:500;font-size:1.2em;border-radius:8px;transition:.5s}nav a:hover{background-color:var(--white);color:var(--red)}nav a.active{background-color:var(--white);color:var(--red)}.page{animation:fadeIn .5s;padding:140px 2em 2em}.container{max-width:700px;margin:auto}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.grid{display:grid;grid-template-columns:1fr;gap:1em}@media (min-width: 600px){.grid{grid-template-columns:1fr 1fr}}@media (min-width: 992px){.grid{grid-template-columns:1fr 1fr 1fr}}.grid>.game-card{cursor:pointer}.grid-filter{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1em;padding:1em;background-color:var(--white);box-shadow:1px 1px 8px #00000040;border-radius:8px;margin:0 0 1em;align-items:center}.grid-filter select{width:100%;padding:1.1rem}.grid-filter input,.grid-filter select{margin:1em 0 0}.game-card{box-shadow:1px 1px 8px #00000040;padding:1.5em;background-color:var(--white);transition:.5s;animation:fadeIn .5s;cursor:pointer;border-radius:10px}.game-card:hover{box-shadow:0 8px 16px 0 var(--red)}.game-card img{width:100%;height:200px;object-fit:cover;border-radius:10px}.game-card h2{margin:.5em 0 0}.game-card .title{margin:0}.avatar{display:flex;align-items:center;margin:0 0 1.2em;text-align:left}.avatar span{margin:0 0 0 1em}.avatar h3,.avatar p{margin:0;line-height:1.2}.game-card .avatar img{max-width:50px;max-height:50px;object-fit:cover;border-radius:50%}#game-page .game-card>img{height:auto}#game-page .btns{padding:1em 0}#sign-in-page,#sign-up-page{display:flex;flex-direction:column;align-items:center;justify-content:center;height:85vh}.error-message{color:var(--dark-red);margin-top:10px;grid-column:2}