/* =====================================
   SERGEY OTRYADNOV PORTFOLIO
   SYSTEM ARCHITECT THEME
===================================== */


/* =====================================
   FONTS
===================================== */


@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap');



/* =====================================
   RESET
===================================== */


* {

    box-sizing:border-box;

}



html {

    scroll-behavior:smooth;

}



body {

    margin:0;

    background:#f5f3ed;

    color:#222;

    font-family:"Courier Prime", monospace;

}



a {

    color:inherit;

    text-decoration:none;

}



section {

    padding:80px 20px;

}




/* =====================================
   HEADER
===================================== */


.main-header {


    width:100%;

    padding:25px 50px;

    display:flex;

    justify-content:space-between;

    align-items:center;


}



.logo {


    font-size:28px;

    font-weight:bold;


}



.logo span {

    color:#2f6b55;

}




.main-header nav {


    display:flex;

    gap:30px;


}



.main-header nav a {


    font-size:15px;

    color:#555;

    transition:.3s;


}



.main-header nav a:hover {


    color:#2f6b55;


}





/* =========================
      TERMINAL HEADER
========================= */

.terminal-header{

    max-width:1200px;

    margin:40px auto;

    padding:25px 35px;

    background:#111;

    border-radius:12px;

    color:#b8ffb8;

    box-shadow:0 20px 50px rgba(0,0,0,.18);

}

.terminal-top{

    font-family:"Courier Prime", monospace;

    margin-bottom:18px;

}

.prompt{

    color:#4cff4c;

}

.command{

    color:white;

}

.terminal-menu{

    display:flex;

    flex-wrap:wrap;

    gap:25px;

    list-style:none;

    margin:0;

    padding:0;

}

.terminal-menu li{

    position:relative;

}

.terminal-menu li::before{

    content:">";

    margin-right:8px;

    color:#4cff4c;

}

.terminal-menu a{

    color:#b8ffb8;

    text-decoration:none;

    transition:.2s;

}

.terminal-menu a:hover{

    color:white;

}

.terminal-menu .active>a{

    color:white;

}

/* =====================================
   BOOT TERMINAL
===================================== */


.terminal-screen {


    position:fixed;

    inset:0;

    background:#f5f3ed;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

    transition:opacity 1s ease;


}



.terminal-window {


    width:min(800px,90%);

    background:#111;

    border-radius:12px;

    overflow:hidden;

    box-shadow:
    0 30px 80px rgba(0,0,0,.25);


}




.terminal-header,
.profile-header,
.services-header,
.projects-header,
.knowledge-header,
.contact-header {


    height:45px;

    background:#202020;

    display:flex;

    align-items:center;

    gap:8px;

    padding:0 18px;

    color:#aaa;


}




.terminal-header span,
.profile-header span,
.services-header span,
.projects-header span,
.knowledge-header span,
.contact-header span {


    width:12px;

    height:12px;

    border-radius:50%;

    background:#777;


}



.terminal-header span:first-child,
.profile-header span:first-child,
.services-header span:first-child,
.projects-header span:first-child,
.knowledge-header span:first-child,
.contact-header span:first-child {

    background:#ff5f56;

}



.terminal-header span:nth-child(2),
.profile-header span:nth-child(2),
.services-header span:nth-child(2),
.projects-header span:nth-child(2),
.knowledge-header span:nth-child(2),
.contact-header span:nth-child(2) {

    background:#ffbd2e;

}



.terminal-header span:nth-child(3),
.profile-header span:nth-child(3),
.services-header span:nth-child(3),
.projects-header span:nth-child(3),
.knowledge-header span:nth-child(3),
.contact-header span:nth-child(3) {

    background:#27c93f;

}




.terminal-body {


    padding:35px;

    color:#b8ffb8;

    min-height:300px;


}




/* =====================================
   HERO
===================================== */


.hero {


    min-height:650px;

    display:grid;

    grid-template-columns:1fr 450px;

    gap:60px;

    align-items:center;

    max-width:1200px;

    margin:auto;


}



.small-title {


    letter-spacing:4px;

    color:#777;

    margin-bottom:20px;


}



.hero h1 {


    font-size:70px;

    line-height:1;

    margin:0 0 20px;


}



.hero h2 {


    font-size:22px;

    font-weight:normal;

    color:#555;


}



.hero p {


    max-width:550px;

    font-size:18px;

    line-height:1.7;


}



.skills-line {


    margin:25px 0;

    color:#555;


}




.button {


    display:inline-block;

    padding:14px 30px;

    background:#2f6b55;

    color:white;

    border-radius:6px;

    border:none;

    font-family:inherit;

    cursor:pointer;

}

/* =====================================
   ENGINEER MONITOR
===================================== */


.engineer-monitor {


    background:#111;

    color:#b8ffb8;

    border-radius:12px;

    overflow:hidden;

    box-shadow:
    0 30px 80px rgba(0,0,0,.25);

    font-size:16px;

}



.monitor-header {


    height:45px;

    background:#202020;

    display:flex;

    align-items:center;

    gap:8px;

    padding:0 18px;

    color:#aaa;


}



.monitor-body {


    padding:35px;


}



.monitor-title {


    color:white;

    letter-spacing:2px;

    margin-bottom:25px;


}



.metric {


    display:grid;

    grid-template-columns:80px 1fr 50px;

    align-items:center;

    gap:15px;

    margin-bottom:20px;


}



.bar {


    height:8px;

    background:#333;

    overflow:hidden;


}



.bar span {


    display:block;

    height:100%;

    background:#2f6b55;


}



.monitor-body hr {


    border:none;

    border-top:1px solid #333;

    margin:35px 0;


}



.services-list {


    list-style:none;

    padding:0;

    line-height:2;


}



.status-online {


    margin-top:25px;

    color:#4cff4c;


}






/* =====================================
   COMMON TERMINAL WINDOWS
===================================== */


.profile-window,
.services-window,
.projects-window,
.knowledge-window,
.contact-window {


    max-width:1000px;

    margin:auto;

    background:#111;

    color:#b8ffb8;

    border-radius:12px;

    overflow:hidden;

    box-shadow:
    0 30px 80px rgba(0,0,0,.22);


}




.profile-body,
.services-body,
.projects-body,
.knowledge-body,
.contact-body {


    padding:40px;


}





/* =====================================
   PROFILE.EXE
===================================== */


.profile-command,
.services-command,
.projects-command,
.knowledge-command,
.contact-command {


    color:white;

    margin-bottom:35px;


}



.profile-row {


    display:grid;

    grid-template-columns:180px 1fr;

    gap:30px;

    padding:20px 0;

    border-bottom:1px solid #333;


}



.label {


    color:#888;

    letter-spacing:2px;


}



.value {


    line-height:1.7;


}



.online {


    color:#4cff4c;


}






/* =====================================
   SERVICES TREE
===================================== */


.tree {


    font-size:18px;

    line-height:1.8;


}



.folder {


    color:white;

    margin-top:25px;


}



.items {


    padding-left:25px;


}






/* =====================================
   PROJECTS GIT LOG
===================================== */


.commit {


    border-left:3px solid #2f6b55;

    padding-left:30px;

    margin-bottom:50px;


}



.commit-id {


    color:#888;

    font-size:14px;


}



.commit h3 {


    color:white;

    font-size:22px;


}



.commit-desc {


    color:#aaa;


}



.commit ul {


    list-style:none;

    padding:0;

    line-height:2;


}







/* =====================================
   KNOWLEDGE TREE
===================================== */


.tree-view {


    font-size:18px;

    line-height:1.8;


}



.main {


    color:#4cff4c;


}



.branch {


    color:white;

    margin-top:20px;


}



.child {


    color:#b8ffb8;

    padding-left:20px;


}






/* =====================================
   CONTACT SERVICE
===================================== */


.service-status {


    color:#4cff4c;

    margin-bottom:40px;


}



.contact-grid {


    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;


}



.contact-info h3,
.contact-form h3 {


    color:white;

    letter-spacing:2px;


}



.contact-info ul {


    list-style:none;

    padding:0;

    line-height:2;


}



.contact-info a {


    color:#b8ffb8;


}



.contact-form input,
.contact-form textarea {


    width:100%;

    background:#222;

    border:1px solid #333;

    color:#b8ffb8;

    padding:15px;

    margin-bottom:15px;

    font-family:inherit;


}



.contact-form textarea {


    height:130px;

}






/* =====================================
   INTERACTIVE TERMINAL
===================================== */


.terminal-toggle {


    position:fixed;

    right:30px;

    bottom:30px;

    width:60px;

    height:60px;

    border-radius:50%;

    background:#111;

    color:#b8ffb8;

    border:none;

    font-family:inherit;

    font-size:22px;

    cursor:pointer;

    box-shadow:
    0 10px 30px rgba(0,0,0,.3);


}



.interactive-terminal {

    position:fixed;

    right:30px;

    bottom:100px;

    width:420px;

    height:450px;

    background:#111;

    color:#b8ffb8;

    border-radius:10px;

    display:none;

    overflow:hidden;

    box-shadow:
    0 20px 60px rgba(0,0,0,.4);

}



.interactive-header {


    height:40px;

    background:#202020;

    padding:10px 15px;

    color:#aaa;


}



.interactive-header span {


    float:right;

    cursor:pointer;


}



.interactive-body {

    padding:20px;

    height:calc(100% - 40px);

    overflow-y:auto;

    scroll-behavior:smooth;

}



.input-line {


    display:flex;

    gap:10px;


}



.input-line input {


    flex:1;

    background:none;

    border:none;

    color:#b8ffb8;

    outline:none;

    font-family:inherit;


}







/* =====================================
   RESPONSIVE
===================================== */


@media(max-width:900px){


.hero {


    grid-template-columns:1fr;

    text-align:center;


}



.hero h1 {


    font-size:50px;


}



.contact-grid {


    grid-template-columns:1fr;


}



.profile-row {


    grid-template-columns:1fr;


}



.main-header {


    padding:20px;

    flex-direction:column;

    gap:20px;


}


}



@media(max-width:600px){


section {


    padding:50px 15px;


}



.hero h1 {


    font-size:42px;


}



.monitor-body,
.profile-body,
.services-body,
.projects-body,
.knowledge-body,
.contact-body {


    padding:25px;


}



.tree {


    font-size:15px;


}



.interactive-terminal {


    width:90%;

    right:5%;


}


}

.interactive-body::-webkit-scrollbar {

    width:8px;

}


.interactive-body::-webkit-scrollbar-track {

    background:#111;

}


.interactive-body::-webkit-scrollbar-thumb {

    background:#333;

    border-radius:5px;

}

/* =====================================
   FOOTER
===================================== */


.main-footer {

    margin-top:80px;

    padding:40px 20px;

    background:#111;

    color:#b8ffb8;

    font-family:"Courier Prime", monospace;

}


.footer-terminal {

    max-width:1000px;

    margin:auto;

    line-height:1.8;

}


.footer-status {

    color:#4cff4c;

    margin-top:15px;

}


.footer-copy {

    max-width:1000px;

    margin:30px auto 0;

    padding-top:20px;

    border-top:1px solid #333;

    color:#777;

    font-size:14px;

}
.terminal-message {

background:#111;

color:#b8ffb8;

padding:30px;

border-radius:10px;

font-family:"Courier Prime", monospace;

line-height:1.8;

}


.terminal-message span {

color:#4cff4c;

}
/* ==============================
   TERMINAL HEADER MENU
================================ */


.terminal-header {

    max-width:1200px;

    margin:30px auto;

    padding:25px 35px;

}


.terminal-console {

    background:#111;

    border-radius:12px;

    padding:25px;

    font-family:"Courier Prime", monospace;

    color:#b8ffb8;

    box-shadow:0 15px 40px rgba(0,0,0,.15);

}


.terminal-prompt {

    color:#4cff4c;

    margin-bottom:20px;

}


.cursor {

    animation:blink 1s infinite;

}


@keyframes blink {

    50% {
        opacity:0;
    }

}



#terminal-nav {

    opacity:0;

    transform:translateY(10px);

    transition:.5s;

}


#terminal-nav.show {

    opacity:1;

    transform:none;

}



.terminal-menu {

    list-style:none;

    padding:0;

    margin:0;

    display:flex;

    flex-wrap:wrap;

    gap:25px;

}



.terminal-menu li::before {

    content:"> ";

    color:#4cff4c;

}



.terminal-menu a {

    color:#b8ffb8;

    text-decoration:none;

    transition:.2s;

}



.terminal-menu a:hover {

    color:white;

}