/* =======================================
   Alexander Belov Resume
======================================= */

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

:root{

    --bg:#0d1117;
    --window:#161b22;
    --card:#1c2128;

    --text:#e6edf3;

    --green:#3fb950;
    --blue:#58a6ff;
    --border:#30363d;

}


body{

    background:var(--bg);

    color:var(--text);

    font-family:
        Consolas,
        Monaco,
        monospace;

    line-height:1.7;

    padding:40px;

}


.container{

    max-width:1200px;

    margin:auto;

}



.terminal-window{

    background:var(--window);

    border-radius:16px;

    overflow:hidden;

    border:1px solid var(--border);

    box-shadow:

    0 0 40px rgba(0,0,0,.4);

}



.terminal-header{


height:55px;

background:#21262d;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 20px;


border-bottom:1px solid var(--border);

}




.buttons{

display:flex;

gap:10px;

}



.buttons span{


width:13px;

height:13px;

border-radius:50%;

display:block;

}


.red{

background:#ff5f57;

}


.yellow{

background:#febc2e;

}


.green{

background:#28c840;

}




.title{

color:#9da7b3;

font-size:14px;

}



.terminal-body{


padding:50px;

}




section{

margin-bottom:60px;

}




.prompt{


color:var(--green);

margin-bottom:25px;

font-size:15px;

font-weight:600;

}




.hero h1{


font-size:42px;

margin-bottom:10px;


}



.hero h2{


font-size:22px;

font-weight:400;


color:var(--blue);


margin-bottom:20px;

}




.hero p{

margin-bottom:10px;

}



.button{


display:inline-block;

margin-top:25px;

padding:12px 24px;

border-radius:8px;

text-decoration:none;

background:var(--green);

color:black;

font-weight:bold;


transition:.3s;


}


.button:hover{


transform:translateY(-2px);

opacity:.9;

}




.info-grid{


display:grid;

grid-template-columns:


repeat(auto-fit,minmax(220px,1fr));

gap:20px;

}




.card{


background:var(--card);

padding:25px;


border-radius:12px;


border:1px solid var(--border);

}



.card h3{

margin-bottom:10px;

}



.card span{


color:#8b949e;

font-size:14px;

}




.card ul{


margin-top:20px;

padding-left:20px;


}



.card li{


margin-bottom:8px;

}




.timeline{


display:grid;

gap:30px;

}




.skills{


display:grid;

gap:25px;

}



.skill{


display:grid;

grid-template-columns:

160px 1fr;

align-items:center;

gap:20px;

}



.bar{


height:12px;


background:#111;


border-radius:30px;


overflow:hidden;


}




.fill{


height:100%;

background:linear-gradient(

90deg,

#2ea043,

#3fb950

);


border-radius:30px;


}




.w95{

width:95%;

}


.w90{

width:90%;

}


.w85{

width:85%;

}


.w80{

width:80%;

}


.w75{

width:75%;

}


.w70{

width:70%;

}





a{


color:var(--blue);

text-decoration:none;

}



a:hover{

text-decoration:underline;

}





.final{


margin-top:70px;

font-size:18px;

}




#cursor{


display:inline-block;

width:10px;

height:18px;

background:var(--green);


animation:blink .8s infinite;


margin-left:5px;


}




@keyframes blink{


50%{

opacity:0;

}

}




/* ======================= */
/* MOBILE */
/* ======================= */


@media(max-width:900px){



body{

padding:15px;

}



.terminal-body{


padding:25px;

}



.hero h1{


font-size:32px;


}



.hero h2{


font-size:18px;


}



.skill{


grid-template-columns:

1fr;


gap:10px;


}



.info-grid{


grid-template-columns:1fr;


}



.card{


padding:20px;


}



}

.hidden{

opacity:0;

transform:translateY(30px);

transition:all .6s ease;

}



.visible{

opacity:1;

transform:none;

}