@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;700&display=swap'); * { box-sizing: border-box; padding: 0; margin: 0; } :root { --text-color: #00aa00; } body { font-family: 'Roboto Mono', sans-serif; background-color: #333; color: #ccc; font-size: 18px; line-height: 1.6; } h1 { color: var(--text-color); font-size: 50px; letter-spacing: -5px; margin-bottom: 20px; } h2 { color: var(--text-color); } h3 { margin-bottom: 10px; } ul { list-style-type: none; } a { color: var(--text-color); text-decoration: none; } p { margin: 20px 0; } nav { width: 30%; } nav ul { display: flex; justify-content: space-around; align-items: center; } nav ul li { color: var(--text-color); cursor: pointer; } .container { max-width: 600px; margin: auto; height: 70vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } .wb-body { background: #111; padding: 20px; } .hidden { display: none; } .cursor { font-weight: 700; animation: 1s blink step-end infinite; } @keyframes blink { from, to { color: transparent; } 50% { color: var(--text-color); } } div.avatar { /* cambia estos dos valores para definir el tamaño de tu círculo */ height: 150px; width: 150px; /* los siguientes valores son independientes del tamaño del círculo */ background-repeat: no-repeat; background-position: 50%; border-radius: 50%; background-size: 100% auto; }