:root{--blue: #44b1f9;--white: #ffffff;--secondary-color: #2ecc71;--font-size-large: 18px}body *{box-sizing:border-box}body{margin:0;font-family:roboto}.header{background-color:var(--blue);text-align:center;padding:2rem;color:var(--white)}.header h1{cursor:pointer;margin:0}.menu{font-weight:800;color:var(--white);border:none;position:absolute;top:30px;left:10px;padding:1rem;background-color:transparent}.menu:hover{background-color:var(--blue)}.navigation{border:1px solid var(--blue);position:absolute;width:300px}.open{transform:translate(0);transition-duration:.3s}.close{transition-duration:.3s;transform:translate(-300px)}nav{margin-top:-1px}nav ul{list-style:none;margin:0;padding:0}nav ul li{display:flex;width:100%;line-height:2rem;padding:1rem;border:1px solid var(--blue);background-color:var(--white)}nav ul li:hover{cursor:pointer;background-color:var(--blue);color:var(--white)}.container{display:flex}.component{width:740px;margin:0 auto;line-height:2rem}.component h2{text-align:center}.bold{font-weight:600}.code{display:block;padding:1rem;margin:1rem 0;width:100%;background-color:#000;border-radius:1rem;color:var(--white)}ol li{margin:1rem}