/*
.boot-screen {
position: fixed;
inset: 0;
z-index: 9999;
background:#000;
color:#ffffff;
display;
flex-direction;
justify-content;
align-items;
font-family:"Red Hat Mono", monospace;
transition 2s ease;
}
.boot-finished {
opacity:0;
pointer-events;
}
.boot-terminal{
width(900px,90%);
}
.boot-title{
color:#fff;
font-size:18px;
font-weight:600;
line-height:1.7;
margin-bottom:28px;
}
.boot-title span{
color:#777;
font-size:13px;
font-weight:400;
}
.boot-line{
font-size:13px;
line-height:1.8;
}
.ok{
color:#ffffff;
}
.boot-progress{
position;
margin-top:28px;
height:10px;
background:#1d1d1d;
overflow;
}
.boot-progress-fill{
position;
left:0;
top:0;
height:100%;
width:0%;
background:#ffffff;
z-index:2;
transition .3s linear;
}
.boot-progress-stripes{
position;
inset:0;
background:
repeating-linear-gradient(
-45deg,
rgba(255,255,255,.7) 0 8px,
transparent 8px 16px
);
animation .45s linear infinite;
}
.boot-status{
margin-top:14px;
color:#888;
font-size:13px;
}
@keyframes stripes{
from{
background-position:0 0;
}
to{
background-position:32px 0;
}
}
*/



:root{
--bg:#fff;
--card:#f7f7f7;
--text:#111;
--muted:#666;
--border:#e5e5e5;
}

.dark{
--bg:#0d0d0d;
--card:#161616;
--text:#f5f5f5;
--muted:#999;
--border:#262626;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Red Hat Mono',monospace;
background:var(--bg);
color:var(--text);
line-height:1.7;
transition:background .35s,color .35s;
}

.navbar{
position:sticky;
top:0;
z-index:1000;
display:flex;
justify-content:space-between;
align-items:center;
max-width:700px;
margin:0 auto;
padding:8px 0;
background:var(--bg);
border-bottom:1px solid var(--border);
transition:.35s;
}

.dark .navbar{
background:#0a0a0a;
}

.logo{
display:flex;
align-items:center;
gap:8px;
}

.status-dot{
width:7px;
height:7px;
border-radius:50%;
background:#22c55e;
flex-shrink:0;
box-shadow:0 0 0 0 rgba(34,197,94,.45);
animation:statusPulse 2s infinite;
}

.navbar .logo{
font-family:'IBM Plex Mono',monospace;
font-size:.68rem;
letter-spacing:.04em;
color:var(--muted);
white-space:nowrap;
}

@keyframes statusPulse{
0%{
box-shadow:0 0 0 0 rgba(34,197,94,.45);
}
70%{
box-shadow:0 0 0 5px rgba(34,197,94,0);
}
100%{
box-shadow:0 0 0 0 rgba(34,197,94,0);
}
}

.nav-right{
display:flex;
align-items:center;
gap:12px;
}

#datetime{
font-family:'IBM Plex Mono',monospace;
font-size:.68rem;
letter-spacing:.04em;
color:var(--muted);
white-space:nowrap;
}

.theme-btn{
width:30px;
height:30px;
display:flex;
justify-content:center;
align-items:center;
background:transparent;
border:none;
color:var(--text);
cursor:pointer;
position:relative;
transition:.25s ease;
opacity:.65;
}

.sun-icon,
.moon-icon{
position:absolute;
width:16px;
height:16px;
transition:opacity .25s ease;
}

.sun-icon{
opacity:0;
}

.moon-icon{
opacity:1;
}

body.dark .sun-icon{
opacity:1;
}

body.dark .moon-icon{
opacity:0;
}

.hero{
max-width:700px;
margin:0 auto;
padding:70px 0 90px;
display:grid;
grid-template-columns:1fr 300px;
gap:45px;
align-items:center;
}

.hero-left{
display:flex;
flex-direction:column;
padding-right:20px;
}

.hero-top{
display:flex;
flex-direction:column;
}

.section-label{
font-family:'IBM Plex Mono',monospace;
font-size:.68rem;
color:var(--muted);
margin-bottom:10px;
letter-spacing:.08em;
}

.hero h1{
font-family:'Red Hat Mono',monospace;
font-size:1.7rem;
font-weight:600;
line-height:1.1;
letter-spacing:-.04em;
margin-bottom:10px;
}

.subtitle{
font-family:'JetBrains Mono',monospace;
font-weight:500;
font-size:.78rem;
color:var(--muted);
margin-bottom:10px;
}

.hero-middle{
max-width:500px;
}

.intro{
max-width:500px;
font-size:11px;
line-height:1.8;
color:var(--muted);
margin-top:2px;
}

.hero-links{
display:flex;
gap:8px;
margin-top:28px;
flex-wrap:wrap;
}

.hero-btn{
flex:1;
max-width:175px;
height:34px;
display:flex;
justify-content:center;
align-items:center;
gap:8px;
text-decoration:none;
font-family:'IBM Plex Mono',monospace;
font-size:.68rem;
color:var(--text);
background:transparent;
border:1px solid var(--border);
transition:.25s ease;
}

.hero-btn:hover{
border-color:var(--text);
}

.hero-btn .key{
font-family:'IBM Plex Mono',monospace;
font-size:.65rem;
font-weight:700;
letter-spacing:.04em;
}

.hero-right{
display:flex;
align-self:center;
}

.hero-right img{
width:100%;
height:330px;
display:block;
object-fit:cover;
border:1px solid var(--border);
}

section{
max-width:700px;
margin:0 auto;
padding:65px 0;
}

h2{
font-family:'Red Hat Mono',monospace;
font-size:1.3rem;
font-weight:600;
line-height:1.2;
letter-spacing:-.03em;
margin-bottom:24px;
}

.section-header{
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
margin-bottom:10px;
}

.view-all{
margin-left:auto;
text-decoration:none;
color:var(--muted);
font-family:'IBM Plex Mono',monospace;
font-size:.64rem;
letter-spacing:.08em;
text-transform:uppercase;
transition:.25s;
}

.view-all:hover{
color:var(--text);
}

.view-all span{
transition:none;
}

.content-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
}

#experience{
max-width:700px;
margin:0 auto;
padding:80px 0;
}

#experience .timeline{
display:flex;
flex-direction:column;
border-top:1px solid var(--border);
}

#experience .item{
display:flex;
align-items:center;
gap:14px;
min-height:70px;
padding:14px 0;
border-bottom:1px solid var(--border);
transition:.25s ease;
}

#experience .timeline-icon{
width:26px;
height:26px;
flex-shrink:0;
display:flex;
justify-content:center;
align-items:center;
border:1px solid var(--muted);
border-radius:2px;
background:transparent;
color:var(--muted);
font-size:11px;
transition:.25s ease;
}

#experience .item:hover{
transform:translateX(4px);
}

#experience .item:hover .timeline-icon{
color:var(--text);
border-color:var(--text);
}

#experience .timeline-content{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
width:100%;
}

#experience .timeline-main{
min-width:0;
}

#experience .timeline-content h3{
margin:0 0 2px;
font-family:'Red Hat Mono',monospace;
font-size:13px;
font-weight:600;
line-height:1.4;
color:var(--text);
transition:.25s ease;
}

#experience .timeline-content p{
margin:0;
font-family:'IBM Plex Mono',monospace;
font-size:9px;
line-height:1.5;
color:var(--muted);
transition:.25s ease;
}

#experience .timeline-year{
flex-shrink:0;
font-family:'IBM Plex Mono',monospace;
font-size:9px;
color:var(--muted);
white-space:nowrap;
}

@media(max-width:900px){
#experience{
padding:90px 24px;
}

#experience .item{
padding:14px 0;
min-height:68px;
}

#experience .timeline-content{
gap:12px;
}

#experience .timeline-content h3{
font-size:12px;
}

#experience .timeline-content p{
font-size:8px;
}

#experience .timeline-year{
font-size:8px;
}
}

@media(max-width:600px){
#experience{
padding:70px 20px;
}

#experience .item{
gap:10px;
min-height:64px;
}

#experience .timeline-icon{
width:24px;
height:24px;
font-size:10px;
}

#experience .timeline-content h3{
font-size:11px;
}

#experience .timeline-content p{
font-size:7px;
}

#experience .timeline-year{
font-size:7px;
}
}

.project-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px;
margin-top:18px;
}

.project-cell{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
min-height:220px;
padding:22px;
border:1px solid var(--border);
background:transparent;
cursor:pointer;
transition:.25s ease;
color:inherit;
text-decoration:none;
}

.project-cell:link,
.project-cell:visited,
.project-cell:active{
color:inherit;
text-decoration:none;
}

.project-cell h3,
.project-cell p,
.project-cell span{
text-decoration:none;
}

.project-cell:hover{
border-color:var(--text);
transform:translateY(-3px);
}

.project-icon{
width:42px;
height:42px;
color:var(--muted);
margin-bottom:16px;
transition:.25s ease;
}

.project-cell:hover .project-icon{
color:var(--text);
}

.project-cell h3{
font-family:'Red Hat Mono',monospace;
font-size:1rem;
font-weight:600;
margin-bottom:10px;
}

.project-desc{
font-size:.66rem;
line-height:1.7;
color:var(--muted);
flex:1;
display:flex;
align-items:center;
text-align:center;
}

.project-footer{
width:100%;
margin-top:18px;
padding-top:12px;
border-top:1px solid var(--border);
display:flex;
justify-content:center;
align-items:center;
font-family:'IBM Plex Mono',monospace;
font-size:.55rem;
color:var(--muted);
}

.project-more .plus{
font-size:3rem;
line-height:1;
color:var(--text);
}

.project-more p{
margin-top:12px;
font-family:'IBM Plex Mono',monospace;
font-size:.65rem;
letter-spacing:.15em;
color:var(--muted);
}

.cert-list{
border-top:1px solid var(--border);
}

.cert-item{
display:flex;
justify-content:space-between;
align-items:center;
gap:18px;
padding:10px 6px;
border-bottom:1px solid var(--border);
text-decoration:none;
color:inherit;
transition:.2s ease;
}

.cert-left{
flex:1;
}

.cert-id{
display:block;
margin-bottom:3px;
font-family:'IBM Plex Mono',monospace;
font-size:.55rem;
letter-spacing:.14em;
color:var(--muted);
}

.cert-item h3{
font-size:.78rem;
font-weight:600;
line-height:1.3;
margin-bottom:4px;
transition:.2s;
}

.cert-item p{
font-size:.63rem;
line-height:1.5;
color:var(--muted);
transition:.2s;
}

.cert-year{
font-size:.62rem;
color:var(--muted);
white-space:nowrap;
transition:.2s;
}

.cert-item:hover h3,
.cert-item:hover p,
.cert-item:hover .cert-id,
.cert-item:hover .cert-year{
color:var(--text);
}

.tech-list{
display:flex;
flex-wrap:wrap;
gap:14px 24px;
}

.tech-tag{
position:relative;
font-family:'IBM Plex Mono',monospace;
font-size:11px;
font-weight:500;
color:var(--text);
cursor:default;
transition:.25s ease;
}

.tech-tag::before{
content:"[";
opacity:0;
transform:translateX(5px);
transition:.25s ease;
}

.tech-tag::after{
content:"]";
opacity:0;
transform:translateX(-5px);
transition:.25s ease;
}

.tech-tag:hover::before{
opacity:1;
transform:translateX(0);
margin-right:5px;
}

.tech-tag:hover::after{
opacity:1;
transform:translateX(0);
margin-left:5px;
}

.blog-list{
border-top:1px solid var(--border);
}

.blog-item{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:18px;
padding:11px 6px;
border-bottom:1px solid var(--border);
text-decoration:none;
color:inherit;
transition:.25s ease;
}

.blog-left{
flex:1;
}

.blog-id{
display:block;
margin-bottom:3px;
font-family:'IBM Plex Mono',monospace;
font-size:.55rem;
letter-spacing:.15em;
color:var(--muted);
}

.blog-item h3{
font-size:.78rem;
font-weight:600;
line-height:1.35;
margin-bottom:4px;
transition:.25s;
}

.blog-item p{
font-size:.64rem;
color:var(--muted);
line-height:1.6;
transition:.25s;
}

.blog-date{
font-size:.6rem;
color:var(--muted);
white-space:nowrap;
transition:.25s;
}

.blog-item:hover h3,
.blog-item:hover p,
.blog-item:hover .blog-id,
.blog-item:hover .blog-date{
color:var(--text);
}

.quote-panel{
width:min(100%,500px);
margin:28px auto 0;
padding:18px 0 12px;
border-top:1px solid var(--border);
display:flex;
flex-direction:column;
align-items:center;
}

.quote-label{
width:100%;
font-family:'IBM Plex Mono',monospace;
font-size:.62rem;
letter-spacing:.16em;
color:var(--muted);
margin-bottom:12px;
text-align:left;
}

#rotatingQuote{
position:relative;
width:100%;
margin:0;
padding:8px 35px;
text-align:center;
font-size:1.2rem;
font-weight:600;
line-height:1.4;
letter-spacing:-.02em;
color:var(--text);
transition:opacity .35s ease;
white-space: pre-line;
}

#rotatingQuote::before{
content:"“";
position:absolute;
top:-5px;
left:5px;
font-family:Georgia,serif;
font-size:2.5rem;
font-weight:400;
color:var(--muted);
opacity:.12;
line-height:1;
pointer-events:none;
}

#rotatingQuote::after{
content:"”";
position:absolute;
right:5px;
bottom:-12px;
font-family:Georgia,serif;
font-size:2.5rem;
font-weight:400;
color:var(--muted);
opacity:.12;
line-height:1;
pointer-events:none;
}

.quote-author{
margin-top:8px;
text-align:center;
color:var(--muted);
font-size:.62rem;
}

.quote-dots{
display:flex;
justify-content:center;
gap:7px;
margin-top:10px;
}

.quote-dots span{
width:5px;
height:5px;
border-radius:50%;
background:var(--border);
transition:.3s ease;
opacity:.7;
}

.quote-dots span.active{
background:var(--text);
opacity:1;
transform:scale(1.25);
}

#writing .quote-panel{
width:min(100%,500px);
margin-left:auto;
margin-right:auto;
}

#writing{
padding-bottom:35px;
}

#gallery{
max-width:700px;
margin:0 auto;
padding:90px 0;
}

#gallery h2{
margin-bottom:30px;
}

#gallery .carousel{
position:relative;
overflow:hidden;
border-radius:12px;
border:1px solid var(--border);
background:#111;
}

#gallery .carousel-track{
display:flex;
transition:transform .55s cubic-bezier(.22,.61,.36,1);
}

#gallery .slide{
min-width:100%;
}

#gallery .slide img{
width:100%;
height:400px;
display:block;
object-fit:cover;
}

#gallery .nav{
position:absolute;
top:50%;
transform:translateY(-50%);
width:34px;
height:34px;
border:none;
border-radius:50%;
background:rgba(255,255,255,.28);
-webkit-backdrop-filter:blur(12px);
backdrop-filter:blur(12px);
color:#fff;
font-size:16px;
cursor:pointer;
transition:.25s;
}

#gallery .prev{
left:15px;
}

#gallery .next{
right:15px;
}

#gallery .dots{
position:absolute;
bottom:15px;
left:50%;
transform:translateX(-50%);
display:flex;
gap:8px;
}

#gallery .dot{
width:6px;
height:6px;
border-radius:999px;
background:rgba(255,255,255,.35);
transition:.3s;
cursor:pointer;
}

#gallery .dot.active{
width:22px;
background:#fff;
}

.divider{
max-width:700px;
height:1px;
background:var(--border);
border:none;
margin:20px auto;
}

.footer{
max-width:700px;
margin:25px auto;
text-align:center;
}

.footer-content{
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
}

.socials{
display:flex;
gap:12px;
font-size:18px;
}

.social-icons{
display:flex;
gap:12px;
}

.social-icons a{
color:inherit;
font-size:15px;
text-decoration:none;
transition:.2s ease;
display:inline-flex;
align-items:center;
justify-content:center;
padding:5px;
border-radius:6px;
}

.social-icons a:hover{
transform:translateY(-2px);
background:var(--border);
}

.footer-subtext{
font-size:10px;
color:#777;
}

.system-login{
position:fixed;
inset:0;
background:rgba(0,0,0,.55);
display:flex;
justify-content:center;
align-items:center;
z-index:9999;
-webkit-backdrop-filter:blur(6px);
backdrop-filter:blur(6px);
}

.system-window{
width:420px;
border:1px solid var(--border);
background:var(--bg);
padding:24px;
}

.system-title{
font-family:'IBM Plex Mono',monospace;
font-size:.8rem;
letter-spacing:.15em;
margin-bottom:18px;
}

.system-line{
font-family:'IBM Plex Mono',monospace;
font-size:.7rem;
color:var(--muted);
margin-bottom:8px;
}

.page{
width:100%;
}

.page .container{
max-width:700px;
margin:0 auto;
padding:70px 0;
}

.page h1{
font-size:1.7rem;
font-weight:700;
line-height:1.1;
letter-spacing:-.04em;
margin-bottom:12px;
}

.page-description{
max-width:650px;
font-size:11px;
line-height:1.8;
color:var(--muted);
margin-bottom:32px;
}

.archive-cert-list,
.writing-list{
display:flex;
flex-direction:column;
border-top:1px solid var(--border);
}

.archive-cert-item{
display:grid;
grid-template-columns:120px 1fr;
gap:20px;
padding:15px 6px;
border-bottom:1px solid var(--border);
transition:.25s ease;
}

.archive-cert-year{
font-family:'IBM Plex Mono',monospace;
font-size:.62rem;
letter-spacing:.14em;
color:var(--muted);
padding-top:3px;
}

.archive-cert-content{
min-width:0;
}

.writing-item{
display:grid;
grid-template-columns:120px 1fr;
gap:20px;
padding:15px 6px;
border-bottom:1px solid var(--border);
transition:.25s ease;
}

.writing-thumb{
width:120px;
height:75px;
overflow:hidden;
border-radius:6px;
border:1px solid var(--border);
}

.writing-thumb img{
width:100%;
height:100%;
object-fit:cover;
transition:.35s ease;
}

.writing-item:hover img{
transform:scale(1.05);
}

.archive-cert-content h3,
.writing-content h3{
font-size:.9rem;
font-weight:600;
line-height:1.4;
margin-bottom:6px;
color:var(--text);
}

.archive-cert-content p,
.writing-content p{
font-size:.68rem;
line-height:1.7;
max-width:620px;
color:var(--muted);
margin-bottom:10px;
}

.archive-cert-content a,
.writing-content a{
display:inline-flex;
align-items:center;
gap:7px;
text-decoration:none;
color:var(--muted);
font-size:.65rem;
transition:.25s ease;
}

.archive-cert-content a:hover,
.writing-content a:hover{
color:var(--text);
}

.projects-archive{
display:flex;
flex-direction:column;
border-top:1px solid var(--border);
}

.archive-project{
display:grid;
grid-template-columns:220px 1fr 20px;
gap:28px;
align-items:center;
min-height:105px;
padding:22px 6px;
border-bottom:1px solid var(--border);
text-decoration:none;
color:inherit;
transition:.25s ease;
}

.archive-project-name{
min-width:0;
}

.archive-project-name h3{
font-family:'Red Hat Mono',monospace;
font-size:.9rem;
font-weight:500;
line-height:1.4;
color:var(--text);
}

.archive-project-info{
min-width:0;
}

.archive-project-tech{
display:block;
margin-bottom:5px;
font-family:'IBM Plex Mono',monospace;
font-size:.55rem;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--muted);
transition:.25s ease;
}

.archive-project-info p{
max-width:500px;
margin:0;
font-size:.68rem;
line-height:1.7;
color:var(--muted);
transition:.25s ease;
}

.archive-project-arrow{
justify-self:end;
font-size:.8rem;
color:var(--muted);
transition:.25s ease;
}

.archive-project:hover{
background:var(--card);
}

.archive-project:hover .archive-project-name h3,
.archive-project:hover .archive-project-tech,
.archive-project:hover .archive-project-info p,
.archive-project:hover .archive-project-arrow{
color:var(--text);
}

.archive-project:hover .archive-project-arrow{
transform:translate(2px,-2px);
}

@media(max-width:600px){
.projects-archive{
width:100%;
}

.archive-project{
grid-template-columns:1fr 18px;
gap:8px 16px;
min-height:auto;
padding:18px 4px;
}

.archive-project-name{
grid-column:1;
}

.archive-project-info{
grid-column:1;
}

.archive-project-arrow{
grid-column:2;
grid-row:1/3;
align-self:center;
}

.archive-project-name h3{
font-size:.82rem;
}

.archive-project-tech{
font-size:.5rem;
}

.archive-project-info p{
font-size:.62rem;
}
}

.back-button{
display:inline-flex;
align-items:center;
gap:7px;
margin-bottom:32px;
text-decoration:none;
color:var(--muted);
font-family:'IBM Plex Mono',monospace;
font-size:.65rem;
letter-spacing:.08em;
text-transform:uppercase;
transition:.25s ease;
}

.back-button:hover{
color:var(--text);
}

.back-button span{
transition:none;
}

.tech-page{
width:100%;
}

.tech-category-list{
display:flex;
flex-direction:column;
gap:38px;
}

.tech-category-box{
width:100%;
}

.tech-label{
display:block;
font-family:'IBM Plex Mono',monospace;
font-size:.62rem;
letter-spacing:.15em;
color:var(--muted);
margin-bottom:12px;
}

.tech-header h1{
font-family:'Red Hat Mono',monospace;
font-size:1.7rem;
font-weight:700;
letter-spacing:-.04em;
line-height:1.2;
margin-bottom:12px;
}

.tech-header p{
max-width:600px;
font-size:11px;
line-height:1.8;
color:var(--muted);
}

.tech-category-label{
display:block;
font-family:'IBM Plex Mono',monospace;
font-size:.58rem;
letter-spacing:.16em;
color:var(--muted);
margin-bottom:7px;
}

.tech-category-box h3{
font-size:.9rem;
font-weight:600;
margin-bottom:14px;
}

.tech-tools{
display:flex;
flex-wrap:wrap;
gap:10px 20px;
}

.tech-tools span{
font-family:'IBM Plex Mono',monospace;
font-size:.68rem;
color:var(--text);
transition:.25s ease;
cursor:default;
}

.blog-page{
max-width:700px;
}

.article-header{
margin-bottom:40px;
}

.article-meta{
display:flex;
align-items:center;
gap:7px;
font-family:'IBM Plex Mono',monospace;
font-size:.62rem;
letter-spacing:.15em;
color:var(--muted);
margin:0;
}

.article-meta::before{
content:"•";
color:var(--border);
margin-right:2px;
}

.article-header h1{
font-size:2.2rem;
max-width:750px;
line-height:1.15;
letter-spacing:-.05em;
margin-bottom:16px;
}

.article-subtitle{
max-width:650px;
font-size:12px;
line-height:1.8;
color:var(--muted);
}

.article-info{
margin-top:25px;
display:flex;
align-items:center;
gap:9px;
font-family:'IBM Plex Mono',monospace;
font-size:.62rem;
color:var(--muted);
}

.article-author{
display:flex;
align-items:center;
gap:7px;
color:var(--text);
}

.article-author img{
width:24px;
height:24px;
border-radius:50%;
object-fit:cover;
border:1px solid var(--border);
}

.article-cover{
width:100%;
height:380px;
object-fit:cover;
border:1px solid var(--border);
margin-bottom:50px;
}

.article-content{
max-width:700px;
}

.article-content h2{
margin-top:45px;
margin-bottom:18px;
font-size:1.3rem;
}

.article-content p{
font-size:12px;
line-height:2;
color:var(--muted);
margin-bottom:22px;
}

.article-content ul{
margin:22px 0;
padding-left:22px;
color:var(--muted);
}

.article-content li{
margin-bottom:8px;
font-size:12px;
}

.article-footer{
margin-top:65px;
}

@media(max-width:900px){
.navbar{
padding:12px 24px;
}

#datetime{
display:block;
font-size:.62rem;
white-space:nowrap;
}

.nav-right{
gap:7px;
}

.hero{
grid-template-columns:1fr;
gap:35px;
padding:70px 24px;
text-align:center;
}

.hero-left{
align-items:center;
}

.hero-middle{
max-width:600px;
}

.hero-links{
justify-content:center;
flex-wrap:wrap;
}

.hero-btn{
max-width:165px;
}

.hero-right{
justify-content:center;
order:-1;
}

.hero-right img{
width:230px;
height:290px;
}

section{
padding:65px 24px;
}

.content-grid{
grid-template-columns:1fr;
}

h2{
font-size:1.3rem;
}

.footer{
padding:50px 24px 35px;
}

.project-grid{
grid-template-columns:repeat(2,1fr);
}

.page .container{
padding-left:24px;
padding-right:24px;
}

.article-header h1{
font-size:1.8rem;
line-height:1.2;
}

.article-subtitle{
font-size:11px;
line-height:1.8;
}

.article-info{
flex-direction:column;
align-items:flex-start;
gap:9px;
}

.article-author{
width:100%;
}

.article-meta{
display:flex;
align-items:center;
gap:7px;
margin:0;
}

.article-meta::before{
display:none;
}

.article-cover{
height:230px;
margin-bottom:35px;
}

.article-content{
max-width:100%;
}

.article-content p{
font-size:11px;
line-height:1.9;
}

.article-content h2{
font-size:1.2rem;
}

.hero-links{
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
margin-top:28px;
}

.hero-btn{
width:210px;
height:38px;
display:flex;
justify-content:center;
align-items:center;
gap:8px;
white-space:nowrap;
flex:none;
max-width:none;
}

#gallery{
padding:70px 20px;
}

#gallery .slide img{
height:240px;
}

#gallery .nav{
width:32px;
height:32px;
font-size:16px;
}

.project-item,
.archive-cert-item,
.writing-item{
grid-template-columns:1fr;
gap:14px;
}

.project-thumb,
.writing-thumb{
width:100%;
height:200px;
}

.blog-item{
flex-direction:column;
}

.blog-date{
margin-top:5px;
}

#writing .writing-item{
flex-direction:column;
align-items:flex-start;
gap:16px;
}

#writing .writing-right{
justify-content:flex-start;
}
}

@media(max-width:650px){
.project-grid{
grid-template-columns:1fr;
}
}  

@media(max-width:600px){
.tech-header h1{
font-size:1.5rem;
}

.tech-tools{
gap:9px 14px;
}
}