@import"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap";html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,button,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;text-decoration:none;color:inherit}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}body{background:var(--bg-body);margin:0 auto;display:flex;justify-content:center;min-width:320px;min-height:100vh;transition:.5s;position:relative}#root{margin-top:40px}.container{width:min(100vw,1440px);margin:0 auto;padding:0 32px;display:grid;gap:40px;align-items:start;grid-auto-rows:min-content min-content 1fr;grid-auto-columns:min-content 1fr}@media (width <= 768px){body{height:100vh}#root{margin-top:20px}.container{padding:0 16px;gap:2rem;grid-auto-columns:1fr;grid-auto-rows:min-content min-content min-content 1fr}}:root{font-family:Nunito,sans-serif;font-size:8px}h1,h2,h3{font-family:Raleway,sans-serif;color:var(--headings-color);font-weight:700}p{color:var(--font-color);font-size:2rem;line-height:1.04}h1{font-size:4rem}h2{font-size:2.25rem}h2:hover{color:var(--font-color-hover)}h3{font-size:2rem;line-height:1.04}h1,h2{line-height:1.08}.card{font-size:2rem;color:var(--font-color)}.card .card__suggestions{font-weight:700}.card a.card__tag{color:var(--tag)}.card a.card__tag:hover{color:var(--tag-hover)}.navbar{font-size:3rem}.filter__button{cursor:pointer;background-color:inherit;font-size:3rem}.filter__button:hover{color:var(--font-color-hover)}.filter__button.active{color:var(--tag)}.filter__button-delete{font-size:2.5rem}:root{--bg-body: #10141f;--bg-navbar: #161d2f;--headings-color: #d4d4d4;--font-color: #fafafa;--font-color-hover: #8c91f2;--tag: #646cff;--tag-hover: #8c91f2;--bg-buttons: #2F3B59;--bg-game-details: hsla(223,36%,14%, 68%);--white: #fafafa}.light{--bg-body: #f1f1f1;--bg-navbar: #dbdbdb;--headings-color: #10141f;--font-color: #161d2f;--tag: #6146af;--tag-hover: #46386f;--bg-buttons: #dbdbdb;--bg-game-details: hsla(0, 0%, 86%, .507)}.container.news{grid-template-areas:"navbar search" "navbar sortbar" "navbar main"}@media (width <= 768px){.container.news{grid-template-areas:"search " "sortbar" "main"}}.container.game{grid-template-areas:"navbar game" "navbar game" ". game";grid-auto-rows:auto;grid-auto-columns:min-content 1fr}.container.error{grid-area:error}.container.error{grid-template-areas:"navbar error";grid-auto-rows:auto;grid-auto-columns:min-content 1fr}.card{width:280px;min-height:300px;border-radius:8px;box-shadow:0 0 10px 2px #8c91f240;overflow:hidden}.card:hover{transform:scale(1.02)}.card .card__top{position:relative;height:180px;overflow:hidden}.card .card__top .card__image{width:100%;height:100%;object-fit:cover}.card .card__top .card__image:hover{transform:scale(1.2)}.card .card__top .card__platforms{display:flex;align-items:center;justify-content:center;gap:8px;position:absolute;bottom:8px;right:8px;padding:8px;border-radius:32px;background-color:var(--bg-game-details);color:var(--white)}.card .card__top .card__platforms svg{pointer-events:none}.card .card__bottom{display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:16px;min-height:120px}.card .card__bottom .card__title{width:100%;display:flex;gap:16px;justify-content:space-between;align-items:flex-start}.card .card__bottom .card__title .card__suggestions{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px;background-color:var(--bg-buttons);padding:4px 4px 4px 16px;border-radius:16px}.card .card__bottom .card__title .card__suggestions>*{pointer-events:none}.card .card__bottom .card__details{display:flex;justify-content:space-between;align-items:flex-end;width:100%}.card .card__bottom .card__details .card__tags{display:flex;flex-wrap:wrap;gap:8px}@media (width <= 768px){.card{position:relative;min-height:unset}.card .card__top .card__platforms{z-index:999}.card .card__bottom{position:absolute;background:var(--bg-game-details);height:100%;width:100%;top:0}.card .card__bottom .card__details{display:flex;flex-direction:column;gap:1rem;align-items:flex-start;width:100%}}.games{grid-area:main}.games .games__list{display:flex;justify-content:space-around;flex-wrap:wrap;gap:40px;margin-top:40px}@media (width <= 768px){.games{overflow-y:hidden}.games h1{position:sticky;top:0;left:0}.games .games__list{flex-wrap:unset;margin-top:20px}}.filters{grid-area:filters;display:flex;flex-direction:column;align-items:center;gap:8px}.filters h3{align-self:flex-start}.filters .filters__platforms{display:flex;align-items:center;align-self:flex-start;gap:8px;padding:8px;border-radius:32px;background-color:var(--bg-buttons);color:var(--font-color)}.filters .filters__platforms svg{pointer-events:none}@media (width <= 768px){.filters .filters__platforms{margin-top:2rem;position:absolute;background-color:var(--bg-buttons);z-index:9999}}.game__details{display:grid;grid-area:game;grid-template-areas:"header header" "pictures info" "about about";grid-template-columns:3fr 2fr;gap:4rem;font-size:2rem;color:var(--font-color)}.game__details h3{margin-bottom:2rem}.game__header{grid-area:header}.game__header h1{margin-bottom:3rem}.game__header .header__subtitles{display:flex;gap:2rem}.game__pictures{grid-area:pictures;display:grid;grid-template-rows:70% 30%;width:100%}.game__pictures img{width:100%;height:100%;object-fit:cover}.game__pictures .picture__main{grid-column:1/4}.game__pictures .picture__secondary{display:grid;grid-template-columns:repeat(4,25%)}.game__info{grid-area:info;display:grid;grid-template-columns:repeat(2,1fr);column-gap:3rem;background:var(--bg-game-details);padding:2rem}.game__info--left,.game__info--right{width:100%;display:grid;grid-template-rows:repeat(3,1fr);gap:3rem}.game__info .details__tags{grid-column:1/3}.game__about{grid-area:about}.game__about h2{margin-bottom:2rem}.game__about p{line-height:1.25}@media (width <= 768px){.game__details{grid-template-areas:"header" "pictures" "about" "info";grid-template-columns:1fr}}.navbar{grid-area:navbar;width:60px;height:80vh;position:sticky;display:flex;flex-direction:column;justify-content:space-between;border-radius:30px;background-color:var(--bg-navbar);color:var(--font-color)}.navbar__icons{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:30px}.navbar button{background-color:transparent;cursor:pointer;transition:.5s;margin-bottom:30px}.navbar button:hover,.navbar a :hover{color:var(--tag-hover)}.navbar a .active{color:var(--tag)}@media only screen and (max-width: 768px){.navbar{flex-direction:row;justify-content:center;position:fixed;height:10vh;width:250px;top:90vh;left:50%;align-items:center;z-index:9999;transform:translate(-50%)}.navbar__icons{flex-direction:row;margin-top:0;margin-right:20px}.navbar button{margin-bottom:0}}.search{grid-area:search;background-color:var(--bg-game-details);border-radius:10px;display:flex;align-items:center;padding-left:10px;font-size:2rem}.search .search-icon{margin:0 1rem;color:#fff;background-color:transparent}.search .search-icon svg{pointer-events:none}.search input{height:100%;width:100%;border:none;border-radius:10px;background-color:var(--bg-game-details);color:var(--font-color);padding:1.5rem;font-family:inherit;font-size:inherit}@media (width <= 768px){.search{width:calc(100vw - 32px)}}details{color:#fff;position:relative;font-size:2rem;cursor:pointer}details summary{width:100%}.sortbar{grid-area:sortbar;display:flex;gap:5rem}.sort__types{display:flex;gap:16px;background:var(--bg-body);padding:1rem;z-index:9999}.sort__types .sort__type{display:flex;align-items:center;text-align:center;gap:16px;border-radius:16px;padding:4px;color:var(--font-color);background-color:var(--bg-buttons)}.sort__types .sort__type:has(button.active){background-color:transparent;box-shadow:0 0 10px 2px #8c91f240}.filter__button>*{pointer-events:none}@media (width <= 768px){.sort{align-items:unset;flex-wrap:wrap}.sort .sort__types{margin-top:2rem;position:absolute;gap:8px}.sort .sort__types .sort__type{gap:8px}}