*{margin:0;padding:0;box-sizing:border-box}body{font-family:Questrial,sans-serif;font-weight:400;font-style:normal}a{text-decoration:none}ul{list-style:none}@media(max-width:500px){header .header-right ul li a{font-size:.8rem}header .header-left h3{font-size:1rem}header{padding:10px 20px}.authors p{max-width:300px}.input .input-right input{width:200px}.input .input-left p{font-size:1.2rem!important}}@media(max-width:330px){header .header-right ul li a{font-size:.7rem}}@media(max-width:300px){header .header-right{display:none}header{justify-content:center}header .header-left h3{font-size:1.5rem}}@media(max-width:400px){.homepage .h-books img{width:70px}.homepage p{max-width:200px}.homepage h1{border-bottom:1px solid #cccccc;padding:10px 0}}@media(max-width:310px){.homepage .h-books img{width:50px}}@media(max-width:250px){.homepage .h-books{display:flex;justify-content:center;align-items:center;flex-direction:column}.homepage .h-books img{margin:20px 0}.homepage .h-books img{width:70px}.homepage .h-books img:nth-child(2){transform:scale(1)}.homepage .h-books img:hover{transform:scale(1.2);margin:0}.new h1{font-size:1.2rem}.new .n-books .n-book{padding:10px 15px}.bestselling h1{font-size:1.2rem}.bestselling .bs-books .bs-book{padding:10px 15px}.authors h1{font-size:1.2rem}.authors .a-box{padding:0}.input .input-right input{width:150px}}@media(max-width:600px){.brand{padding:5px}.brand p{font-size:1rem;max-width:400px}.bestselling p{max-width:300px}.authors p{max-width:400px}}@media(max-width:210px){.bestselling h1{font-size:1rem}.bestselling p{font-size:.7rem}}@media(max-width:900px){.input{display:flex;justify-content:center;align-items:center;flex-direction:column}.input .input-left p{border-radius:10px;padding:5px;background:#00000080;max-width:300px;line-height:30px;color:#fffc;font-size:1.3rem;text-align:center;margin:30px 0}}@media(max-width:350px){.input-right{display:flex;justify-content:center;align-items:center;flex-direction:column}.input-right a{margin:10px 0}.input .input-right input{text-align:center}}@media(max-width:1000px){footer .footer1 p{max-width:150px}footer .footer1 ul li{width:20px;height:20px}footer .footer1 ul li a{font-size:.7rem}}@media(max-width:800px){footer{flex-wrap:wrap}footer .f{margin:10px}footer .footer1{order:6}}.brand{width:100%;height:100%;padding:100px;background-image:url(/react-first-exercise/img/brand.jpeg);background-position:center;background-size:cover;display:flex;justify-content:center;align-items:center}.brand p{color:#fff;font-size:1.5rem;background:#0000004d;padding:10px;border-radius:10px;text-align:center;max-width:500px}.new{padding:20px;width:100%;height:100%;background:#fff;display:flex;justify-content:center;align-items:center;flex-direction:column}.new h1{font-size:1.5rem;color:#262626;padding:10px 0;border-bottom:1px solid #cccccc}.new p{margin:10px 0;font-size:.8rem;text-align:center;max-width:300px;color:#6d6d6d}.new .n-books{margin:30px auto;display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.new .n-books .n-book{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:10px 30px;border-radius:15px;border:1px solid #c7c7c7;margin:10px;cursor:pointer}.new .n-books .n-book:hover{background-color:#ffe9c8}.new .n-books .n-book p{color:#262626;font-size:.8rem}.new .n-books .n-book h3{font-size:1rem}.input{width:100%;height:100%;display:flex;justify-content:space-between;align-items:center;padding:50px;background:url(/react-first-exercise/img/input.jpg);background-position:center;background-size:cover}.input .input-left p{border-radius:10px;padding:5px;background:#00000080;max-width:300px;line-height:30px;color:#fffc;font-size:1.5rem}.input-right{display:flex;justify-content:center;align-items:center}.input .input-right a{background-color:#000;color:#ffffffb3;border:1px solid rgba(255,255,255,.5);border-radius:2px;padding:10px 12px;display:block;margin-left:10px}.input .input-right a:hover{background-color:#fff;color:#000;border:1px solid rgba(0,0,0,.5)}.input .input-right input{color:#000;border:1px solid rgba(255,255,255,.5);border-radius:2px;padding:10px 12px;width:300px;outline:none;border:none}.input .input-right input::placeholder{color:#262626}.input .input-right input:hover{box-shadow:0 0 14px #ffcd45}footer{background:#ffe9c8;width:100%;height:100%;padding:50px;display:flex;justify-content:space-between;align-items:start}footer .footer1{display:flex;justify-content:center;align-items:center;flex-direction:column}footer .footer1 h1{margin:10px 0;font-size:1.3rem}footer .footer1 p{font-size:.8rem;max-width:250px;color:#333;text-align:center;margin-bottom:10px}footer .footer1 ul{display:flex;justify-content:center;align-items:center}footer .footer1 ul li{margin:0 10px;background:#000;width:30px;height:30px;display:flex;justify-content:center;align-items:center;border-radius:50%;border:1px solid #262626}footer .footer1 ul li a{color:#fff;font-size:.9rem}footer .footer1 ul li:hover a{color:#000}footer .footer1 ul li:hover{background:#fff}footer .f h3{margin-bottom:10px;color:#262626}footer .f ul li a{color:#6d6d6d;margin:10px 0;font-size:.9rem;display:block}footer .f ul li a:hover{text-decoration:underline;color:#000}header{width:100%;height:50px;display:flex;justify-content:space-between;align-items:center;padding:10px 50px;box-shadow:0 5px 8px #0000004d}header .header-right ul{display:flex;justify-content:center;align-items:center}header .header-right ul li{margin:0 10px}header .header-right ul li a{font-size:1rem;color:#6d6d6d}header .header-right ul li .fa-star{color:#003615}header .header-right ul li a:hover{color:#000}.homepage{background:#ffe9c8;width:100%;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:20px}.homepage h1{font-size:1.5rem;color:#262626}.homepage p{margin:10px 0;font-size:.8rem;text-align:center;max-width:300px;color:#6d6d6d}.homepage a{color:#262626;font-size:1rem;padding:5px 8px;border:1px solid #26262626;margin-bottom:20px;transition:.2s}.homepage .h-books{margin-top:20px}.homepage .h-books img{margin:0 5px;cursor:pointer;transition:.5s}.homepage .h-books img:nth-child(2){transform:scale(1.2)}.homepage .h-books img:hover{transform:scale(1.2);margin:0 20px}.homepage a:hover{background-color:#fff;color:#000}.authors{padding:20px;width:100%;height:100%;background:#ffe9c8;display:flex;justify-content:center;align-items:center;flex-direction:column}.authors h1{font-size:1.5rem;color:#262626;padding:10px 0;border-bottom:1px solid #cccccc}.authors p{margin:10px 0;font-size:.8rem;text-align:center;max-width:500px;color:#6d6d6d}.authors .as-box{margin:30px auto;display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.authors .a-box{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:10px 30px;margin:10px}.authors .a-box img{width:100px;height:100px;border-radius:50%;object-fit:cover}.authors .a-box h3{margin:10px 0 2px;font-size:1rem;text-align:center}.authors .a-box p{font-size:.8rem;text-align:center}