/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

/* ---------- Base (large desktop, above 1024px) ---------- */

*, *::before, *::after{
box-sizing: border-box;
}

img{
max-width: 100%;
height: auto;
display: block;
}

body{
background-color: #f0f0f0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
line-height: 1.5;
overflow-x: hidden;
}

header{
margin: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2em;
}

header img{
border-radius: 50%; width: 150px; height: 150px; object-fit: cover; flex-shrink: 0;
}

header p{
padding: 20px; background-color: #282323; color: white; border-radius: 30px; width: auto; max-width: 420px; margin-left: 20px;
}

main{
display: flex;
flex-direction: column;
align-items: center;
padding: 0 20px 40px;
}

#social{
position: absolute;
top: 50px;
right: 50px;
}

#social ul{
display: flex;
align-items: center;
gap: 10px;
}

#social a{
color: #282323;
text-decoration: none;
font-weight: 600;
}

#social a:hover,
#social a:focus-visible{
color: #E91C24;
}

#social img{
width: 24px;
height: 24px;
}

.content{
display: flex;
flex-direction: column;
gap: 40px;
border-top: 2px solid #282323;
width: 50vw;
max-width: 900px;
padding: 40px;
}

.content h1{
font-size: 2em;
font-weight: 700;
line-height: 1.2;
}

/* ---------- Laptop / small desktop (1024px and below) ---------- */
@media (max-width: 1024px) {
header{
margin: 20px;
font-size: 1em;
}

header img{
width: 130px; height: 130px;
}

header p{
max-width: 360px;
}

#social{
top: 30px;
right: 30px;
}

.content{
width: 75vw;
}
}

/* ---------- Tablet (768px and below) ---------- */
@media (max-width: 768px) {
header{
flex-direction: column;
text-align: center;
font-size: .95em;
}

header img{
width: 120px; height: 120px;
}

header p{
margin-left: 0;
margin-top: 15px;
max-width: 90%;
}

/* Social links move into the normal flow so they never overlap the header */
#social{
position: static;
margin-bottom: 20px;
}

#social ul{
justify-content: center;
}

.content{
width: 100%;
padding: 30px;
}

.content h1{
font-size: 1.6em;
}
}

/* ---------- Phone (480px and below) ---------- */
@media (max-width: 480px) {
header{
margin: 15px;
font-size: .85em;
}

header img{
width: 100px; height: 100px;
}

header p{
padding: 14px 18px;
border-radius: 20px;
max-width: 100%;
}

main{
padding: 0 12px 24px;
}

#social ul{
gap: 16px;
}

.content{
padding: 20px;
}

.content h1{
font-size: 1.35em;
}

.content p{
font-size: .95em;
}
}