generar html para *{ margin: 0; padding: 0; box-sizing: border-box; } html{ background-color: rgb(12, 4, 4); font-family: 'Nunito', sans-serif; } :root{ --Amarillo: #FBBE36; --Negro: #000; --Blanco: #fff; } h1{ font-size: 400; color: var(--Amarillo); } h2{ font-size: 300; color: var(--Amarillo); } h3{ font-size: 200; color: var(--Blanco); } p{ font-size: 1rem; } .centrado{ width: 70%; margin: 0 auto; } .flexbox{ display: flex; } .btn-1{ text-decoration: none; text-transform: uppercase; font-weight: bold; font-size: 1rem; color: var(--Negro); background-color: var(--Blanco); padding: .5rem; transition: all .5s ease; border-radius: 20px; overflow: hidden; } .btn-1:hover{ background-color: var(--Amarillo); color: var(--Blanco); } .activo{ background-color: var(--Amarillo); color: var(--Blanco); } /* HEADER */ header{ background: var(--Negro) url(../img/01.jpg) no-repeat center center fixed; background-size: contain; } header a.logo::before{ content: ""; display: block; border-top: 10px solid var(--Amarillo); } header div.flexbox{ flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; } div p{ color: var(--Blanco); } div p>b{ background-color: var(--Amarillo); color: var(--Negro); padding-right: 1rem; }