:root{--primary:#ddd;--dark:#333;--light:#fff;--shadow:0 1px 5px rgba(103,104,104,.8)}html{box-sizing:border-box;font-family:'Noto Sans',sans-serif;color:var(--dark)}body{background:#ebebeb;padding:30px}.wrapper{width:80%;margin:auto}.btn{color:var(--dark);font-size:1.2rem;text-transform:uppercase;border:1px solid var(--dark);padding:10px 20px;border-radius:7px;background:var(--light)}.btn-small{color:var(--dark);font-size:1rem;text-transform:uppercase;border:1px solid var(--dark);padding:5px 10px;border-radius:5px;background:var(--light);cursor:pointer}.btn:hover,.btn-small:hover{background:#c5c5c5;color:var(--light)}header{border-bottom:1px solid var(--dark)}header img{height:125px}header .login-link{float:right}header a{text-decoration:none;color:var(--dark)}header a:hover{color:#597f50}header .active{font-weight:800}header ul{padding:10px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);list-style:none;width:40%;grid-gap:20px}header li{text-align:center;font-size:1.2rem}.top-container{display:grid;grid-template-columns:2fr 1fr;grid-gap:20px}.showcase{margin:30px 10px;min-height:400px;background:url(img/xshowcase.jpg.pagespeed.ic.cPN_qDGP-O.jpg);background-size:cover;background-position:center;padding:2rem}.showcase h1{font-size:2rem;margin-bottom:0;color:var(--light)}.showcase p{padding-left:30px;padding-top:25px;font-size:1rem;margin-top:0;color:var(--light)}.top-container .info{margin:20px;background:var(--primary);text-align:center;box-shadow:var(--shadow);padding:1.5rem}.top-container .info h4{font-size:2.5rem}.top-container .info ul{padding:0}.top-container .info li{font-size:1rem;list-style:none;line-height:2rem}.top-container .info a{text-decoration:none;line-height:6rem}footer{width:100%;border-top:1px solid var(--dark);text-align:center;margin-top:20px}.features{width:80%;margin:40px auto;display:grid;grid-template-areas:'main tasks' 'computer computer';grid-gap:20px}.features .box{padding:.5rem 2rem;box-shadow:var(--shadow);background:var(--primary)}.features h1{text-align:center;font-size:2rem}.features p{line-height:1.2rem}.features .main{grid-area:main}.features .tasks{grid-area:tasks}.features .computer{grid-area:computer}.features .list{display:grid;grid-template-columns:repeat(2,1fr);grid-column-gap:20px}.signup{width:50%;margin:40px auto}.signup .box{padding:.5rem 2rem;box-shadow:var(--shadow);background:var(--primary)}.signup h1{text-align:center;font-size:2rem}.signup p{line-height:1.2rem}.input{font-family:'Noto Sans',sans-serif}.login-form{margin-top:50px;text-align:center}.login-form .input{margin-top:25px;margin-left:15px;border:none;border-bottom:1px solid #333;background:transparent;font-size:1rem;color:#333}.login-form .btn-small{margin-top:40px}@media (max-width:900px){.wrapper{width:95%}.top-container{grid-template-columns:1fr;grid-gap:0}header ul{padding:10px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);list-style:none;width:60%;grid-gap:20px}.features{grid-template-areas:'main' 'tasks' 'computer';width:95%}.features .list{grid-template-columns:1fr}.signup{width:90%}}@media (max-width:560px){header img{height:65px}body{padding:8px}.btn{font-size:1rem}header ul{width:95%;grid-gap:5px}header li{text-align:center;font-size:1rem}.showcase{min-height:300px}}