@font-face {
   font-family: 'JetBrains Mono';
   src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'JetBrains Mono';
   src: url('../fonts/JetBrainsMono-ThinItalic.woff2') format('woff2');
   font-weight: 100;
   font-style: italic;
   font-display: swap;
}

:root {
   --bc:             #efeeee;
   --font-family-monospace: 'JetBrains Mono', monospace;
   --red:            #da2c4d;
   --white:          #ffffff;
   --terminal-bg:    #300a24;
   --terminal-fg:    #f2f2f2;
   --terminal-user:  #13a10e;
   --terminal-path:  #0037da;
   --terminal-symbol:#f2f2f2;
}

* {
   box-sizing: border-box;
}

html,
body {
   margin: 0;
   width: 100%;
   min-height: 100vh;
   overflow-x: hidden;
   font-family: 'JetBrains Mono', monospace;
   font-weight: 400;
   scroll-behavior: smooth;
   -webkit-font-smoothing: antialiased;
   background-color: var(--bc);
}

.u-flex-center {
   display: flex;
   justify-content: center;
   align-items: center;
}

.u-flex-center-top {
   display: flex;
   justify-content: center;
   align-items: flex-start;
}

.u-flex-left-center {
   display: flex;
   justify-content: flex-start;
   align-items: center;
}

.u-flex-column-center {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}

.page-wrapper {
   width: 100%;
   min-height: 100dvh;
   display: flex;
   justify-content: center;
   align-items: center;
}

.content-row {
   width: 100%;
   max-width: 900px;
   display: flex;
   align-items: flex-start;
   justify-content: center;
   gap: 2em;
}

.content-column {
   flex: 1 1 35%;
   min-width: 280px;
}

.terminal-column {
   flex: 2 1 65%;
}

.panel {
   border-radius: 25px;
   background-color: var(--bc);
   width: 100%;
}

.panel-terminal {
   border-top-left-radius: 25px;
   border-top-right-radius: 25px;
   border-bottom-left-radius: 25px;
   background-color: var(--terminal-bg);
   min-height: clamp(280px, 35vh, 480px);
   display: flex;
   flex-direction: column;
   width: 100%;
}

.panel-shadow {
   box-shadow: 16px 4px 64px rgba(18, 61, 101, 0.3), -16px -16px 40px rgba(255, 255, 255, 0.8), inset -8px -6px 80px rgba(255, 255, 255, 0.18);
}

.profile-card {
   width: 250px;
   min-height: clamp(260px, 35vh, 420px);
   position: relative;
   text-align: center;
}

.profile-photo {
   top: -75px;
   width: 200px;
   height: 200px;
   position: relative;
   border-radius: 50%;
   overflow: hidden;
}

.profile-photo>img {
   width: 100%;
}

.profile-header {
   top: -40px;
   position: relative;
}

.profile-name {
   margin: 0;
   color: rgba(161, 181, 201, .8);
   text-shadow: 2px 2px 2px #d6e1ef99, 0 0 0 #000, 2px 2px 2px #d6e1ef00;
   font-weight: 100;
   font-style: italic;
}

.profile-subtitle {
   margin: 1em 0 2em 0;
   color: rgba(161, 181, 201, .8);
   text-shadow: 2px 2px 2px #d6e1ef99, 0 0 0 #000, 2px 2px 2px #d6e1ef00;
}

.window-controls {
   position: absolute;
   right: 1em;
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 0.5em;
   z-index: 5;
}

.control-close {
   margin: .3em;
   width: 15px;
   height: 15px;
   border-radius: 50%;
   background-color: #ff5f57;
}

.control-minimize {
   margin: .3em;
   width: 15px;
   height: 15px;
   border-radius: 50%;
   background-color: #ffbd2e;
}

.control-maximize {
   margin: .3em;
   width: 15px;
   height: 15px;
   border-radius: 50%;
   background-color: #28c840;
}

.window-bar {
   width: 100%;
   min-height: 56px;
   padding: 0 1.25em;
   position: relative;
   border-top-left-radius: 25px;
   border-top-right-radius: 25px;
   background-color: #222222;
   display: flex;
   align-items: center;
   justify-content: center;
}

.window-title {
   margin: 0;
   font-size: 100%;
   font-weight: 400;
   color: var(--terminal-fg);
   text-align: center;
}

.terminal-body {
   padding: 0;
   background-color: var(--terminal-bg);
   color: var(--terminal-fg);
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow-y: auto;
}

.terminal-log {
   max-width: 100%;
   flex: 1;
   padding: 0;
}

.terminal-line {
   color: var(--terminal-fg);
   padding: 0.1em 0.30em;
    margin-top: auto;
}

.line-spacer {
   margin: 0 0 .5em 0;
}

.token-command {
   color: var(--red);
}

.token-path {
   color: var(--terminal-path);
}

.token-user,
.token-host {
   color: var(--terminal-user);
}

.token-separator,
.token-colon,
.token-prompt {
   color: var(--terminal-symbol);
}

.input-proxy {
   position: absolute;
   left: -9999px;
   width: 1px;
   height: 1px;
   opacity: 0;
   pointer-events: none;
}

.token-accent {
   color: #79cfe0;
}

::selection {
   color: var(--white);
   background: rgba(161, 181, 201, .8);
}

::-webkit-scrollbar-track {
   background-color: #a6a6a6;
}

::-webkit-scrollbar {
   width: 6px;
   background-color: #a6a6a6;
}

::-webkit-scrollbar-thumb {
   background-color: rgba(161, 181, 201, .8);
}

@media screen and (max-width: 768px) {
   .content-row {
      flex-direction: column;
   }
}