body{color:#fff;background-color:#000}*{margin:0;padding:0}nav{z-index:50;background-color:#262627e9;grid-template-columns:200px 250px 550px 80px;justify-content:space-between;align-items:center;height:8vh;margin:0 0 10px;padding:5px;display:grid;position:sticky;top:0}#theme{justify-content:center;align-items:center;width:50%;padding:7px;display:flex}#theme>img{width:80%;height:80%}nav>h1{color:#ff650a}nav select:focus,nav input:focus{outline:none}nav select{color:#fff;text-align:center;background-color:#000;border:1px solid #ff650a;border-radius:20px;height:60%}nav>div{justify-content:center;align-items:center;height:100%;display:flex}nav input{color:#fff;text-align:center;background-color:#000;border:1px solid #ff650a;border-radius:20px;width:80%;height:60%;margin-right:20px;transition:all .3s}nav input:focus{border:2px solid #ff650a}nav input::placeholder{text-align:center;color:#fff}nav button{color:#fff;background-color:#ff650a;border:none;border-radius:20px;width:20%;height:60%;transition:all .3s}nav button:hover{transform:scale(1.1)}nav button:active{background-color:#c45b1e}.cards img{border-radius:10px;width:100%;height:100%;transition:all .3s}#cards-container{flex-wrap:wrap;justify-content:space-evenly;display:flex}.cards:hover{cursor:pointer;color:#1b1b1a;transform:scale(1.1);box-shadow:0 0 15px red}.cards{background-color:#1b1b1a;border-radius:10px;grid-template-rows:260px 1fr 1fr;justify-content:center;align-items:center;row-gap:7px;width:180px;height:auto;margin:15px;padding:10px;transition:all .3s;display:grid;position:relative}.cards span{text-align:center;font-size:small}#mal-score{color:gold}#hover-effect{color:#fff;opacity:0;text-align:center;background-color:#1a1a19d2;border-radius:10px;grid-template-rows:2fr 1fr 1fr 4fr;justify-content:space-evenly;align-items:center;row-gap:10px;width:180px;height:95%;padding:10px;transition:all .3s;display:grid;position:absolute;top:0}#hover-effect:hover{opacity:1}#hover-effect p{color:#bcbbbb}#hover-effect span{-webkit-line-clamp:10;line-clamp:10;-webkit-box-orient:vertical;font-size:.9rem;display:-webkit-box;overflow:hidden}#heading{margin-left:20px}.loading{border-top:2px solid #ff650a;border-radius:50%;width:60px;height:60px;margin-top:30vh;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.light{color:#000;background-color:#f4eee8}.light nav{background-color:#ffffffa6}.light select{color:#000;background-color:#fff;border-color:#000}.light input::placeholder{color:#000}.light input{color:#000;background-color:#fff;border-color:#000}.light .cards{background-color:#f7f9fb;box-shadow:1px 1px 5px #000}.light #hover-effect{color:#545454;background-color:#ffffffc8}.light p #mal-score{color:#ff7300}.light .cards:hover{color:#0000}.light #hover-effect p{color:#424242}