@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&family=Poppins:wght@400;600&family=Roboto:wght@400;700&display=swap";*{font-family:Roboto,sans-serif;padding:0;margin:0}body{background-color:#242635;overflow-x:hidden;display:flex;justify-content:center;align-items:center}.banner{padding:0 2rem;border-bottom:5px solid green;box-shadow:0 0 15px #adff2f}.frontPage{width:100%;height:372px;left:0px;top:0px}.divFrontPage{display:flex;justify-content:center;align-items:center}.inFrontPage{position:absolute;width:454px;height:176px;display:flex;justify-content:center;align-items:center;top:48px}.divSearch{display:flex;justify-content:center;align-items:center}.input{max-width:400px;height:30px;margin-top:6rem;font-size:1rem;border-radius:2px;color:gray}.input:active{color:#000}.seach-button{max-width:200px;height:30px;margin-top:6rem;color:#fff;background-color:#000;border:1px solid greenyellow;box-shadow:1px 1px 10px #adff2f;cursor:pointer;transform:translateY(-4px);transition:.2s}.seach-button:active{transform:translateY(0);box-shadow:none}.search{position:absolute;width:80%;height:20px;top:360px;display:flex;flex-direction:row;justify-content:center;align-items:center}input{width:80%;height:100%;background-color:#fbfbfb}button{width:20%;height:24px;margin-left:-4px;background-color:#fbfbfb}.divInfo{position:absolute;width:80%;height:126px;top:404px;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:10px;text-align:start;align-items:center;background:#062226;color:#fff;margin-top:4rem;border-radius:10px;border:2px inset greenyellow;box-shadow:0 0 15px #adff2f}.charactersContainer{margin-top:20rem;color:#fff;display:grid;justify-content:center;grid-template-columns:repeat(3,1fr);grid-template-rows:(0,1fr);gap:3rem;border-radius:20px}.divCharacters{width:200px;background:#0f3237;border-radius:4px 4px 0 0;padding:1rem;display:flex;justify-content:center;box-shadow:0 0 10px #32c428;margin:1rem;list-style:none;position:relative}.image{width:150px;border:2px solid rgb(130,83,83);border-radius:100%;margin-left:23px}.infoCharacters{padding:1rem}.nameCharacter{font-size:24px;font-weight:400;line-height:38px}.hr{margin-top:5px;margin-bottom:5px;height:3px;width:100%;background-color:#084851}.status{position:absolute;width:82px;height:23px;left:2px;top:2px;text-align:center;background:#062226;border-radius:0 12px 12px 0}.properties{font-weight:700;font-size:12px;line-height:21px;color:#7e7e7e;margin-top:10px}.features{font-weight:700;font-size:18px;line-height:28px}.Loader{display:flex;justify-content:center;text-align:center;flex-direction:column;background-color:#0b131cfe;align-items:center;width:190vh;height:100vh;z-index:100;color:#fbfbfb}.img{width:700px;height:500px;display:flex;justify-content:center;align-items:center}.pagination{display:flex;justify-content:space-between;list-style:none;color:#fff;margin-top:2rem;margin-bottom:1rem;padding:0 4rem;cursor:pointer}.status-dead{background-color:red;color:#fff}.status-alive{background-color:green;color:#fff}.unknown{background-color:gray}@media (max-width: 558px){.img{width:400px;height:200px}.charactersContainer{display:flex;flex-direction:column}.banner{padding:0}.frontPage{width:100%;height:200px;left:0px;top:0px}.divInfo{margin:0}.seach-button,.input{margin:0;margin-bottom:5rem}.divSearch{margin-top:5rem}}