body{color:#333;background:#f0f0f0;margin:0;padding:0;font-family:system-ui}h1,h2,h3,h4,h5,h6{font-family:Montserrat,sans-serif;font-weight:600}header{z-index:9999;text-align:center;background:#fff;padding:15px;font-family:Pacifico,sans-serif;font-weight:400;line-height:30px;position:fixed;top:0;left:0;right:0;box-shadow:0 3px 5px #0003}header a{color:orange;font-size:22px;font-weight:400;text-decoration:none}header a.logo{color:orange;font-size:22px;font-weight:400;text-decoration:none;display:inline-block}header a.timerLink{padding:15px;font-size:22px;font-weight:400;text-decoration:none;display:inline-block;position:absolute;top:0;right:0}main{box-sizing:border-box;max-width:1200px;margin:0 auto;padding-top:60px}.recipes{grid-gap:20px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));padding:20px;display:grid}.recipe{border-radius:6px;text-decoration:none;box-shadow:0 3px 4px #00000026}.recipe .bg{background-color:#ccc;background-position:50%;background-repeat:no-repeat;background-size:cover;border-top-left-radius:6px;border-top-right-radius:6px;padding-bottom:40%;display:block}.recipe .info{background:orange;border-bottom-right-radius:6px;border-bottom-left-radius:6px;padding:20px;display:block}.recipe h2{text-align:center;color:#fff;margin:0;font-size:24px}.Recipe .hero{background-position:50%;background-size:cover;height:30vh;display:block}.Recipe .title{color:#fff;background:orange;flex-direction:row;align-items:center;padding:20px;display:flex}.Recipe .title .info{flex:auto}.Recipe .title h1,.Recipe .title p{margin:0}.Recipe a.share{color:#fff;cursor:pointer;font-size:20px;text-decoration:none}.Recipe .ingredients{padding:20px}.Recipe .ingredients li{line-height:140%}.Recipe .instructions{padding:20px}.Recipe .step{flex-direction:row;margin-bottom:20px;display:flex}.Recipe .step .number{flex:0 1.3em;font-size:32px}.Recipe .step .text{flex:1 0;font-size:16px;line-height:140%}.Timer{background:#fff;border-radius:100%;width:300px;height:300px;margin:30px auto;padding:15px;font-size:2em;box-shadow:0 3px 6px #0000001a}.Timer .name{text-align:center;margin-top:20px;display:block}.Timer .center{text-align:center;padding:20px 0;display:block}.Timer input{text-align:center;border:2px solid orange;border-radius:3px;margin:30px auto;padding:8px 15px;font-size:1em;display:block}.Timer button{color:#fff;background:orange;border:2px solid orange;border-radius:3px;margin:20px auto;font-size:1em;display:block}.Timer .timeLeft{text-align:center;margin-top:30px;font-size:3em}.message{text-align:center;padding:100px 30px;font-size:1.2em}
