:root{

--bg:#f8f9fa;
--text:#2d3748;
--accent:#2b6cb0;
--card:#ffffff;

}

body.dark{

--bg:#1a202c;
--text:#edf2f7;
--accent:#63b3ed;
--card:#2d3748;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

font-family:Inter,Arial,sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.7;
transition:.3s;

}

.container{

max-width:1000px;
margin:auto;
padding:40px 20px;

}

header{

background:var(--bg);
position:sticky;
top:0;
border-bottom:1px solid #ddd;

}

header .container{

display:flex;
justify-content:space-between;
align-items:center;

}

.logo{

font-size:1.3rem;
font-weight:bold;

}

.logo img{

    height:70px;
    width:auto;
    display:block;

}
nav{

display:flex;
gap:20px;
align-items:center;

}

nav a{

text-decoration:none;
color:var(--text);

}

#theme-toggle{

background:none;
border:none;
font-size:1.2rem;
cursor:pointer;

}

.hero{

padding:100px 20px;
text-align:center;

}

.hero h1{

font-size:3rem;
margin-bottom:25px;

}

.hero p{

font-size:1.2rem;
max-width:700px;
margin:auto;

}

.button{

display:inline-block;
margin-top:35px;
padding:14px 28px;
background:var(--accent);
color:white;
border-radius:8px;
text-decoration:none;

}

section{

padding:70px 0;

}

.alt{

background:rgba(0,0,0,.03);

}

.cards{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
margin-top:30px;

}

.card{

background:var(--card);
padding:25px;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,.08);

}

.interests{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:10px;
margin-top:25px;
margin-left:20px;

}

blockquote{

margin-top:50px;
font-size:1.3rem;
font-style:italic;
border-left:4px solid var(--accent);
padding-left:20px;

}

footer{

padding:40px;
text-align:center;
font-size:.9rem;

}

@media(max-width:700px){

header .container{

flex-direction:column;
gap:15px;

}

.hero h1{

font-size:2rem;

}

.logo img{

    height:45px;

}
}