.home{padding-top:100px}.home-wrapper{padding-inline:3vw;margin-bottom:9rem}.home_title{min-height:36.4375rem;background-image:url(/img/League-of-Legends-Guide-fuer-Anfaenger\ 1.jpeg);background-repeat:no-repeat;background-position:center;background-size:cover;margin-bottom:6rem;margin-left:-29px}.home_title h1{width:20ch;padding-top:20.625rem;padding-left:5rem;color:#fff}@media (min-width: 320px) and (max-width: 650px){.home_title h1{padding-inline:3vw;width:13ch;margin-left:1.875rem}}.pc{display:flex;flex-direction:column;width:100%}.top-component-pc-flex{margin-top:3rem;display:flex;gap:2rem}.top-card{background-color:var(--card-bg-blue);width:40%;border-radius:1.5rem;padding:1rem 1.5rem;display:flex;flex-direction:column}.top-games-pc-flex-vertCards{display:flex;flex-direction:column;gap:2rem}@media only screen and (max-width: 900px){.top-component-pc-flex{display:flex;flex-direction:column}.top-card{background-color:var(--card-bg-blue);width:100%;border-radius:1.5rem;padding:1rem 1.5rem;display:flex;flex-direction:column}}.top-card-content h1{padding-top:75%}.top-card-rank-wrapper{padding-left:90%}.top-card-tags-flex span{cursor:pointer}.top-card-content .top-card-rank-wrapper .op-card-tags-flex{padding-top:20px}.top-card-content .solid-button{margin-bottom:1.875rem}.platform-tags{background-color:var(--card-bg-blue)}.rank-container{display:flex;align-items:center;justify-content:center;background-color:var(--bg-black);text-align:center;width:2.8125rem;height:2.8125rem;border-radius:3rem;border:1px solid var(--accent-color-magenta)}.card-horizontal{display:flex;justify-content:flex-start;align-items:center;background-color:var(--card-bg-blue);border-radius:1.5rem;overflow:hidden;height:24vh;position:relative;gap:50px}.card-horizontal-rank-wrapper{position:absolute;top:5%;left:3%}.card-horizontal-content{display:flex;flex-direction:column;gap:.8125rem}.card-horizontal img{border-radius:1.5rem;height:100%;max-width:50%;object-fit:cover;object-position:center}.card-horizontal-tags-flex{display:flex;flex-wrap:wrap}.card-horizontal-tags-flex a{font-size:1rem;font-family:Oswald,Arial;border:1px solid var(--accent-color-magenta);font-weight:600;padding:.4rem .8rem;border-radius:.9375rem;text-transform:capitalize;margin-right:.4rem}@media (min-width: 320px) and (max-width: 650px){.card-horizontal{gap:12px}}.top-games-browser{margin-top:6rem}.top-games-browser-grid{margin-bottom:6rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(15.625rem,1fr));grid-gap:1.5rem}.top-games-browser .top-games-browser-grid .card-content{gap:1.25rem}.top-games-browser h2{margin-bottom:3rem}.card-vertical{display:flex;flex-direction:column;border-radius:1.5rem;overflow:hidden;background-color:var(--card-bg-blue)}.card-content{padding:2rem;display:flex;flex-direction:column;justify-content:space-between;height:100%}.card-vertical img{border-radius:1.5rem}.tags-flex{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;border-top:.125rem var(--cardBorder) solid;padding-top:1.5rem}.tags-flex a{font-size:1rem;font-family:Oswald,Arial;border:1px solid var(--accent-color-magenta);font-weight:600;padding:.4rem .8rem;border-radius:.9375rem;text-transform:capitalize;margin-right:.4rem}.recently-component-content{margin-bottom:6rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(15.625rem,1fr));grid-gap:1.5rem}.recently-component{display:flex;flex-direction:column}.recently-component h2{margin-bottom:3rem}.recently-component .recently-component-content .card-content>p:first-of-type{color:var(--lightBlue);padding-top:1rem;font-weight:300}.recently-component .recently-component-content{min-height:520px}.backToTop-icon{position:fixed;bottom:10px;right:10px}.all-games{padding-top:6.25rem;padding-inline:3vw;margin-bottom:9rem}.allgames-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.875rem}.suggestion{position:fixed;right:95px;top:55px;overflow-y:scroll;height:18.75rem;width:17.3125rem;padding:.3125rem;background-color:var(--card-bg-blue);border-radius:12px}.suggestion-items{display:flex;align-items:center;gap:.75rem;margin:.75rem .3125rem;width:15.625rem;padding:.3125rem;background-color:var(--darkBlue);border-radius:12px}.suggestion-items:hover{background-color:var(--accent-color-magenta)}.suggestion-items img{width:60px}.more-btn{display:flex;align-items:center;justify-content:center;gap:.75rem;margin:1.25rem}@media only screen and (max-width: 1150px){.allgames-cards{grid-template-columns:repeat(3,1fr)}}@media only screen and (max-width: 900px){.allgames-cards{grid-template-columns:repeat(2,1fr)}}@media (min-width: 320px) and (max-width: 650px){.allgames-cards{grid-template-columns:repeat(1,1fr)}}.all-games .allgames-cards .card-content{gap:1.25rem}.hauptfilter{display:flex;align-items:start;justify-content:start;margin-bottom:1.25rem;gap:1.25rem}.filter{display:flex;flex-direction:column;justify-content:center;width:17.8125rem}.filter-headline{display:flex;align-items:center;justify-content:space-between;background-color:var(--accent-color-magenta);padding:.75rem 1.5rem;border-radius:.75rem;z-index:2;overflow:hidden}.filter-headline h3{text-transform:uppercase;font-weight:700}.filter svg{cursor:pointer}.arrowUp{transform:rotate(180deg)}.filter-list{display:flex;flex-direction:column;gap:.75rem;overflow-y:scroll;background-color:var(--card-bg-blue);transition:1s;margin-top:-1.25rem;padding-top:1.25rem;margin-bottom:1.25rem;border-radius:0px 0px .75rem .75rem;margin-right:.125rem;padding-left:.3125rem}::-webkit-scrollbar{width:.25rem}::-webkit-scrollbar-thumb{background:var(--lightBlue);border-radius:.9375rem}::-webkit-scrollbar-thumb:hover{background:var(--darkBlue)}.is-closed{max-height:0px;visibility:hidden}.is-open{max-height:15.625rem}.filter-items{cursor:pointer;display:flex;align-items:center;gap:.75rem;background-color:var(--darkBlue);padding:.75rem 1.5rem;margin-inline:.625rem;border-radius:.75rem}.filter-items h3{text-transform:capitalize}.filter-list div:nth-of-type(1){margin-top:1.125rem}.filter-list div:last-of-type{margin-bottom:1.25rem}.show-filter{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem}.show-filter p{font-family:Oswald,sans-serif;font-size:1rem;text-transform:capitalize;font-weight:600}.show-filter div{display:flex;justify-content:center;border:.0625rem solid var(--accent-color-magenta);padding:.375rem .75rem;border-radius:.75rem;gap:.75rem;cursor:pointer}@media (min-width: 320px) and (max-width: 650px){.hauptfilter{flex-direction:column;align-items:center;margin-top:-50px;margin-left:-10px;gap:0}.filter{width:200px}}.allGames-title{min-height:30.6875rem;background-image:url(/img/League-of-Legends-Guide-fuer-Anfaenger\ 1.jpeg);background-repeat:no-repeat;background-position:center;background-size:cover;margin-bottom:6rem;border-radius:24px;color:#fff}.allGames-title h1{width:20ch;padding-top:22.5rem;padding-left:5rem}@media (min-width: 320px) and (max-width: 650px){.allGames-title h1{width:13ch}}.recently-added{margin-inline:3vw;margin-bottom:9rem}.recently-added article{margin-top:1.25rem}.recently-added article{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:1.875rem}@media (min-width: 320px) and (max-width: 650px){.allGames-title h1{padding-left:2vw}}.details{padding-top:100px;padding-inline:3vw;margin-bottom:9rem;color:var(--font-white)}.details h1{display:none}.details h2,.details h3,.details h4{font-family:Oswald,Arial,Helvetica,sans-serif;font-weight:800}.details h2{font-size:3rem;margin-left:2.5rem;text-transform:uppercase}.details h3{font-size:1.5rem}.details__right p{font-family:Titillium Web,Arial,Helvetica,sans-serif;line-height:1.5rem}.details__add-info h4{font-family:Oswald,Arial,Helvetica,sans-serif;font-size:1.125rem;font-weight:800}.details__add-info p{font-family:Titillium Web,Arial,Helvetica,sans-serif;font-size:1.125rem}.details__game-info{margin-top:3rem;display:flex;flex-direction:row;justify-content:flex-start;gap:8vw}.detail__left{margin-left:5rem;display:flex;flex-direction:column;justify-content:flex-start;align-items:start;gap:2.5rem}.detail__left img{margin-left:-2.5rem;width:40vw;border-radius:24px}.detail__left button{cursor:pointer}.details__right{width:30vw;display:flex;flex-direction:column;justify-content:flex-start;align-items:start;gap:1.875rem}.details__images{margin-top:6rem;display:flex;align-items:baseline;overflow-x:scroll;gap:1.5625rem;padding-bottom:1.25rem}.details__images img{width:40vw;border-radius:24px}.details__add-info{margin-top:5.625rem;display:grid;grid-template-columns:repeat(2,1fr)}.details__add-info--left{margin-left:5rem;display:flex;flex-direction:column;justify-content:flex-start;align-items:start;gap:3rem;width:27vw}.details__add-info--left--container{display:grid;grid-template-columns:repeat(2,1fr);column-gap:3.125rem;gap:3.125rem}.details__add-info--left--container div{line-height:3.125rem}.details__add-info--right{margin-top:3rem;display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}.details__add-info--right h4{padding-bottom:.75rem}@media (min-width: 320px) and (max-width: 768px){.details__game-info{flex-direction:column;gap:2vw;align-items:center}.detail__left{margin-left:-1rem;display:flex;flex-direction:column;justify-content:flex-start;align-items:start;gap:1rem}.detail__left img{margin-left:0rem;width:80vw;border-radius:24px}.details__right{width:70vw;display:flex;flex-direction:column;justify-content:flex-start;align-items:start;gap:1.875rem}.details__add-info{margin-top:5.625rem;display:flex;flex-direction:column}.details__add-info--left{margin-left:0rem;gap:1rem;width:88%;padding-bottom:4rem}.details__add-info--right{margin-top:2rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}}.app{margin-left:100px}header{display:flex;justify-content:space-between;align-items:start}@media (min-width: 320px) and (max-width: 650px){.app{margin:0}}.navbar{background-color:var(--bg-black);height:100vh;border-right:.125rem solid var(--font-white);display:flex;flex-direction:column;align-items:center;justify-content:center;position:fixed;z-index:4}.navbar svg{cursor:pointer}.burger{position:absolute;top:0;left:0}.exit{position:absolute;top:0;right:-12.5rem}nav{padding:.625rem;display:flex;flex-direction:column;align-items:center;gap:2.25rem}.active svg{cursor:pointer;background-color:var(--accent-color-magenta);border-radius:15px}.active p{background-color:var(--accent-color-magenta);border-radius:15px}.navleiste{display:flex;flex-direction:row;align-items:center}.hide{display:none}.show{display:flex;flex-direction:column;width:16.25rem}.mobile-nav{position:relative;display:none}.mobile-menu{position:absolute;top:50px;left:10px;background-color:var(--bg-black);width:100vw;border-right:2px solid white;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:start;gap:1.5rem;padding-top:50px;z-index:5}.mobile-menu p{width:300px}.mobileHide{position:fixed;top:70px;left:0;transition:1s}.mobileShow{position:fixed;top:70px;left:-101vw;transition:1s}@media (min-width: 320px) and (max-width: 650px){.navbar{display:none}.mobile-nav{display:block}.burger{position:fixed}}.searchbar{display:flex;justify-content:space-between;align-items:center;width:95vw;padding:.75rem 2vw;padding-left:3.75rem;position:fixed;right:0;z-index:3}.searchbar div{display:flex;align-items:center;justify-content:center;gap:1.25rem}.logo-text{font-size:1.5rem;font-family:Oswald,Arial;font-weight:800;color:#fff;text-transform:uppercase}#search{border-radius:12px;padding:.8125rem 1.25rem;width:17.3125rem;border-style:none;background-color:var(--darkBlue);color:var(--font-white)}#search:focus{outline:none}.user-input{position:relative}.user-input svg{position:absolute;right:.625rem}.slide{margin-left:16.25rem}@media (min-width: 320px) and (max-width: 650px){.logo-text{display:none}.slide{margin-left:0}#search{width:70px;transition:1s}.searchbar{justify-content:end;width:70vw;gap:12px}#search:focus{width:200px}.searchbar a div svg{position:fixed;left:80px}}.tracking-in-contract-bck{-webkit-animation:tracking-in-contract-bck 2s cubic-bezier(.215,.61,.355,1) both;animation:tracking-in-contract-bck 2s cubic-bezier(.215,.61,.355,1) both}.loading{display:flex;justify-content:center;align-items:center;flex-direction:column;height:100vh}.loading h1{margin-bottom:20px;font-size:4rem}@-webkit-keyframes tracking-in-contract-bck{0%{letter-spacing:1em;-webkit-transform:translateZ(400px);transform:translateZ(400px);opacity:0}40%{opacity:.6}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes tracking-in-contract-bck{0%{letter-spacing:1em;-webkit-transform:translateZ(400px);transform:translateZ(400px);opacity:0}40%{opacity:.6}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.loader{width:1.25rem;aspect-ratio:1;display:grid}.loader:before,.loader:after{content:"";grid-area:1/1;background:var(--accent-color-magenta);clip-path:polygon(0 0,105% 0,0 100%);animation:l13 2s infinite}.loader:after{--s: -1, -1}@keyframes l13{0%,10%{transform:scale(var(--s, 1)) translate(0) rotate(0)}33%{transform:scale(var(--s, 1)) translate(20px,-20px) rotate(0)}66%{transform:scale(var(--s, 1)) translate(20px,-20px) rotate(180deg)}90%,to{transform:scale(var(--s, 1)) translate(0) rotate(180deg)}}@font-face{font-family:Roboto;font-style:normal;src:url(/fonts/Roboto-Bold.ttf);font-weight:400}@font-face{font-family:Roboto;font-style:normal;src:url(/fonts/Roboto-Regular.ttf);font-weight:800}@font-face{font-family:Oswald;src:url(/fonts/Oswald-Variable.ttf)}@font-face{font-family:Titillium Web;src:url(/fonts/TitilliumWeb-Regular.ttf)}@font-face{font-family:Source Sans Pro;src:url(/fonts/SourceSans3-Variable.ttf)}*{margin:0;padding:0;box-sizing:border-box}image{max-width:100%}html{background-color:var(--bg-black);color:var(--font-white);font-size:1rem;font-family:Oswald,Arial,Helvetica,sans-serif}:root{--bg-black: #040f14;--font-white: #ffffff;--card-bg-blue: #102130;--accent-color-magenta: #ff4654;--lightBlue: #afc7df;--darkBlue: #375470;--cardBorder: #ffffff33}a{font-family:Source Sans Pro,Verdana,Geneva,Tahoma,sans-serif;font-size:1.5rem;text-decoration:none;color:var(--font-white)}h1{font-size:3rem;line-height:120%;font-weight:800;padding-bottom:2vh;text-transform:uppercase}h2{font-size:1.5rem;font-weight:800}h3{font-size:1.125rem}.solid-button{font-family:Oswald,Arial,Helvetica,sans-serif;background-color:var(--accent-color-magenta);border-radius:1rem;font-size:1.125rem;font-weight:800;color:var(--font-white);text-transform:uppercase;border:none;padding:.75rem 1.5rem;margin:.6rem 0rem;cursor:pointer;transition:.35s}.solid-button:hover{background-color:#a12c36}.card-tags{border:1px solid var(--accent-color-magenta);font-weight:600;padding:.4rem .8rem;border-radius:.9375rem;text-transform:capitalize;margin-right:.4rem}svg{cursor:pointer}