/*

    Template Author : pixelhint.com
    Author Email    : contact@pixelhint.com
    Template Name   : Magnetic
    
    
    *****************************************
    
    
    - Fonts
    - General CSS
    - Header
    - Home/portfolio 
    - Inner page 
    - Map/Contact page  
    - Tooltip 
    - Responsive code
  
    
*/

/*  Fonts  */

@font-face {
    font-family: 'raleway-regular';
    src: url('../fonts/raleway-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'raleway-bold';
    src: url('../fonts/raleway-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'raleway-semibold';
    src: url('../fonts/raleway-semibold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.bg-gradient {
    background: rgb(249, 38, 114);
    background: linear-gradient(158deg, rgba(249, 38, 114, 1) 0%, rgba(4, 21, 78, 1) 40%, rgba(3, 15, 21, 1) 74%);
}
.about-img {
    flex-grow: 1;
    max-width: 750px;
    /* Set a maximum width for the image */
}
.about-flex {
    gap: 60px;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
.about-text {
    width: 60%;
}

.logo {
    flex-direction: column;
  align-items: center; /* centers caption under title */
}

.side-by-side {
  display: flex;
  align-items: center;     /* vertical alignment */
  gap: 1rem;             /* space between text and ascii */
}

.logo-text {
  white-space: nowrap;     /* prevents breaking into multiple lines */
}

#ascii,
#ascii * {
  color: #f8f8f2 !important;
}

#ascii {
  flex-shrink: 0;          /* prevents ascii from collapsing */
}

.about-text {
  position: relative;
  overflow: hidden; /* keeps logo clipped to div */
}

/* logo layer */
.about-text::after {
  content: "";
  position: absolute;
  bottom: 0rem;
  right: 0rem;

  width: 20%;              /* scales with the div */
  aspect-ratio: 1 / 1;     /* or your logo ratio */
  background: url("/img/logo_white.png") no-repeat bottom right;
  background-size: contain;

  opacity: 0.15;           /* watermark feel */
  z-index: 0;
}

/* content always on top */
.about-text > * {
  position: relative;
  z-index: 1;
}


.hr-text {
    line-height: 1em;
    position: relative;
    outline: 0;
    border: 0;
    color: black;
    text-align: center;
    height: 1.5em;
    opacity: 0.5;
}
.hr-text:before {
    content: '';
    background: linear-gradient(to right, transparent, #818078, transparent);
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
}
.hr-text:after {
    content: attr(data-content);
    position: relative;
    display: inline-block;
    color: black;
    padding: 0 0.5em;
    line-height: 1.5em;
    color: #818078;
    background-color: #fcfcfa;
}
.content .about-text p {
    font-size: 22px;
}

.brands-section {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid rgba(248, 248, 242, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.brands-label {
    font-family: 'raleway-regular';
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(248, 248, 242, 0.45);
}

.brands-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
}

.brand-logo {
    height: 62px;
    width: auto;
    opacity: 0.65;
    transition: opacity 0.2s ease;
}

.brand-logo:hover {
    opacity: 0.9;
}

.brand-logo--hbo {
    height: 46px;
    filter: brightness(0) invert(1);
}

/*  General CSS*/

.emphasis-text {
    color: #ff8cb6;
}
:root {
    --yellow: #EDB74D;
    --red: #EB6666;
    --green: #6FB18A;
}
body {
    background: #000F14;
}
.video-div {
    padding: 10px;
}
.bc-widget {
    height: 200px;
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
}
.social-div {
    gap: 100px;
    display: flex;
    flex-direction: row;
    align-content: center;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
}
header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
    padding: 32px 0;
    background-image:
        radial-gradient(ellipse 45% 90% at 100% 0%, rgba(249, 38, 114, 0.18) 0%, transparent 100%),
        linear-gradient(210deg, rgba(4, 21, 78, 1) 15%, rgba(0, 0, 0, 1) 70%);
}

/* Everything below the header starts invisible and fades in after boot */
section.main,
section.bio,
.site-footer {
    opacity: 0;
    transition: opacity 1s ease;
}

/* Centered title-card column */
.header-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

/* Title: restore the large size lost when .logo wrapper was removed */
header .header-center > a {
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'raleway-regular';
    font-size: 4em;
    color: #f8f8f2;
    transition: color .1s linear;
}

header .header-center > a:hover {
    color: #F92672;
    text-decoration: none;
}

/* Terminal widget */
.terminal-window {
    width: 60vw;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(0, 210, 235, 0.18);
    box-shadow:
        0 14px 48px rgba(0, 0, 0, 0.75),
        0 0 0 1px rgba(0, 210, 235, 0.06),
        0 0 32px rgba(0, 210, 235, 0.07);
    margin: 0;
    flex-shrink: 0;
}

/* CRT scanlines overlay */
.terminal-window::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.10) 2px,
        rgba(0, 0, 0, 0.10) 4px
    );
    pointer-events: none;
    border-radius: 8px;
    z-index: 2;
}

.terminal-body {
    padding: 14px 20px 16px;
    font-family: 'Courier New', Courier, monospace;
    font-size: clamp(12px, 1.1vw, 17px);
    line-height: 1.6;
    white-space: nowrap;
    overflow: hidden;
    /* Fixed at exactly 5 lines — page never shifts during boot */
    height: calc(5 * 1.6em + 30px);
    box-sizing: border-box;
}

/* zsh prompt colours */
.tp-arrow,
.tp-sm-arrow { color: #5af78e; text-shadow: 0 0 8px rgba(90, 247, 142, 0.65), 0 0 22px rgba(90, 247, 142, 0.25); }
.tp-dir    { color: #5af78e; text-shadow: 0 0 8px rgba(90, 247, 142, 0.65), 0 0 22px rgba(90, 247, 142, 0.25); }
.tp-git    { color: rgba(248, 248, 242, 0.38); }
.tp-branch { color: #F92672; }
.tp-dirty  { color: #ff5c57; }

/* command text — tagline spans */
.terminal-body #tagline-middle,
.terminal-body .tagline-static,
.terminal-body .tp-cmd {
    color: #f8f8f2;
    font-family: inherit;
    font-size: inherit;
}
.tagline-static--sm { display: none; }
.tp-line-break      { display: none; }
.tp-sm-arrow        { display: none; }

/* chromatic aberration during glitch scramble */
.glitch-split {
    text-shadow: 2px 0 rgba(249, 38, 114, 0.75), -2px 0 rgba(0, 210, 235, 0.75);
}

/* blinking block cursor */
.terminal-cursor {
    color: #f8f8f2;
    animation: cursor-blink 1s step-end infinite;
}

@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* Boot sequence — all lines start hidden via CSS, JS fades them in */
.boot-line,
.terminal-prompt-line,
.terminal-output-line {
    opacity: 0;
}
.boot-line {
    display: flex;
    justify-content: space-between;
    padding-right: 2ch;
}
.boot-label { color: rgba(248, 248, 242, 0.45); white-space: pre; }
.boot-ok    { color: #5af78e; text-shadow: 0 0 8px rgba(90, 247, 142, 0.5); }

/* Output line */
.tp-output-prefix { color: rgba(248, 248, 242, 0.22); }
.tp-output-val    { color: rgba(248, 248, 242, 0.40); font-style: italic; }
#name-title {
    display: inline-block;
    letter-spacing: 4px;
    filter: url(#noiseFilter);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
nav ul li a:hover {
    color: #f8f8f2;
}
header ul.social li a:hover {
    color: #ADADAD;
}
header ul.social li a {
    color: #f8f8f2;
}
#social-menu-item-tw, #social-menu-item-yt, #social-menu-item-bc, #social-menu-item-sp {
    transition: color .1s linear;
    -webkit-transition: color .1s linear;
    -moz-transition: color .1s linear;
    -o-transition: color .1s linear;
}
#social-menu-item-tw:hover, #social-menu-item-yt:hover, #social-menu-item-bc:hover, #social-menu-item-sp:hover {
    color: white;
}
#social-menu-item-tw {
    color: #a1efe4;
}
#social-menu-item-yt {
    color: #fd5ff0;
}
#social-menu-item-bc {
    color: #a1efe4;
}
#social-menu-item-sp {
    color: #a6e22e;
}
#name-title {
    color: #f8f8f2;
}
#name-title {
    transition: color .1s linear;
}
a {
    transition: color .1s linear;
    -webkit-transition: color .1s linear;
    -moz-transition: color .1s linear;
    -o-transition: color .1s linear;
}
#name-title:hover {
    color: #F92672;
}
#name-title:first-letter {
    color: #F92672;
    font-weight: bold;
    font-size: 1.5em;
}
#name-title:hover:first-letter {
    color: #f8f8f2;
}
header ul.social li a, .main .work a .caption {
    transition: color .1s linear;
    -webkit-transition: color .1s linear;
    -moz-transition: color .1s linear;
    -o-transition: color .1s linear;
}
/* Registered custom properties allow gradient color stops to be transitioned */
@property --bc-c1 { syntax: '<color>'; inherits: false; initial-value: rgba(255, 182, 161, 1); }
@property --bc-c2 { syntax: '<color>'; inherits: false; initial-value: rgba(127, 185, 183, 1); }
@property --bc-c3 { syntax: '<color>'; inherits: false; initial-value: rgba(0, 0, 0, 1); }
@property --c1-c1 { syntax: '<color>'; inherits: false; initial-value: rgba(255, 2, 94, 1); }
@property --c1-c2 { syntax: '<color>'; inherits: false; initial-value: rgba(84, 99, 203, 1); }
@property --c1-c3 { syntax: '<color>'; inherits: false; initial-value: rgba(161, 239, 229, 1); }
@property --sp-c1 { syntax: '<color>'; inherits: false; initial-value: rgba(255, 255, 255, 1); }
@property --sp-c2 { syntax: '<color>'; inherits: false; initial-value: rgba(70, 249, 80, 1); }
@property --sp-c3 { syntax: '<color>'; inherits: false; initial-value: rgba(32, 115, 95, 1); }

.c1, .c2 {
    background-size: 270% 270%;
    background-image: linear-gradient(45deg, var(--c1-c1) 15%, var(--c1-c2) 67%, var(--c1-c3) 100%);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    transition: --c1-c1 0.35s ease, --c1-c2 0.35s ease, --c1-c3 0.35s ease;
}
.bc1 {
    background: linear-gradient(66deg, var(--bc-c1) 0%, var(--bc-c2) 15%, var(--bc-c3) 85%);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    transition: --bc-c1 0.35s ease, --bc-c2 0.35s ease, --bc-c3 0.35s ease;
}
.bc1:hover {
    --bc-c1: white;
    --bc-c2: white;
    --bc-c3: white;
}
.c1:hover {
    --c1-c1: white;
    --c1-c2: white;
    --c1-c3: white;
}
.sp3 {
    background: linear-gradient(66deg, var(--sp-c1) 0%, var(--sp-c2) 15%, var(--sp-c3) 85%);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    transition: --sp-c1 0.35s ease, --sp-c2 0.35s ease, --sp-c3 0.35s ease;
}
.sp3:hover {
    --sp-c1: white;
    --sp-c2: white;
    --sp-c3: white;
}
.c1, .c2, .bc1, .sp3 {
    -webkit-animation: AnimateBG 5s linear infinite;
    animation: AnimateBG 5s linear infinite;
}
.c3 {
    background-size: 200% 200%;
    background-image: linear-gradient(233deg, rgba(84, 99, 203, 1) 6%, rgba(161, 238, 229, 1) 80%, rgba(255, 255, 255, 1) 100%);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
}
.c3 {
    -webkit-animation: AnimateBG 5s linear infinite;
    animation: AnimateBG 5s linear infinite;
}
.main .work a .caption {
    transition: all .1s linear;
    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -o-transition: all .1s linear;
}
.logo a {
    transition: color .1s linear;
    -webkit-transition: color .1s linear;
    -moz-transition: color .1s linear;
    -o-transition: color .1s linear;
}
h1, h2, h3, h4, h5, h6 {
    color: #4b4848;
    font-family: "raleway-regular", arial;
    letter-spacing: 1px;
}
h1 {
    font-size: 2em;
    margin: .67em 0
}
h2 {
    font-size: 1.5em;
    margin: .75em 0
}
h3 {
    font-size: 1.17em;
    margin: .83em 0
}
h5 {
    font-size: .83em;
    margin: 1.5em 0
}
h6 {
    font-size: .75em;
    margin: 1.67em 0
}
h1, h2, h3, h4, h5, h6 {
    font-weight: bolder
}
.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}


.menu-flex {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
}
header {
    box-sizing: border-box;
    padding: 36px 60px;
    display: flex;
    top: 0;
    left: 0;
    height: auto;
    min-width: 100%;
    float: left;
    z-index: 9999;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
header .logo {}
header .logo a, header .logo a:active, header .logo a:visited {
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'raleway-regular';
    font-size: 4em;
}
header .logo a:hover {
    text-decoration: none;
    font-size: 4em;
}
.social-menu-color a:hover {
    color: #f8f8f2;
}
nav ul li a {
    padding-left: 15px;
    color: #F92672;
    font-family: "raleway-regular", arial;
    font-size: 1.2em;
    text-decoration: none;
    letter-spacing: 1px;
}
/*  Header  */

a {
    text-decoration: none;
}

a.vibrant {
    color: rgb(249, 56, 125);
    text-decoration: underline;
}

a.vibrant:hover {
    color: #f8f8f2;
}

.contact-cta {
    margin-top: 28px;
}
.contact-cta a {
    font-family: 'raleway-regular';
    font-size: 15px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #F92672;
    text-decoration: none;
    border-bottom: 1px solid rgba(249, 38, 114, 0.4);
    padding-bottom: 2px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.contact-cta a:hover {
    color: #f8f8f2;
    border-bottom-color: rgba(248, 248, 242, 0.4);
}



@media (min-width:1099px) {
    header .logo a, header .logo a:active, header .logo a:visited {
        text-decoration: none;
        text-transform: uppercase;
        font-family: 'raleway-regular';
        font-size: 4em;
    }
    header .logo a:hover {
        text-decoration: none;
        font-size: 4em;
    }
    .logo-text {
        padding-left: 7px;
        font-size: 1.8em;
    }
    .logo-side {
        font-size: 32px;
        text-decoration: none;
    }
    .social {
        text-decoration: none;
        font-family: 'raleway-regular';
        color: #ae81ff;
        font-size: 1.5em;
        letter-spacing: 1px;
    }
    .social a {
        text-decoration: none;
    }
    .social a:hover, .social a.selected {}
    header .footer {
        border: 1px dotted #F92672;
    }
    header ul.social {
        list-style: none;
    }
    header ul.social li {
        margin: 20px;
        display: block;
        float: left;
        position: relative;
    }
    header ul.social li a {
        font-size: 48px;
        display: block;
        background-position: 0 0;
    }
    header ul.social li a:hover {}
    header ul.social li a.fb, header ul.social li a.fb:hover {
        background-position: 0 0;
    }
    header ul.social li a.google, header ul.social li a.google:hover {
        background-position: -31px 0;
    }
    header ul.social li a.behance, header ul.social li a.behance:hover {
        background-position: -62px 0;
    }
    header ul.social li a.twitter, header ul.social li a.twitter:hover {
        background-position: -93px 0;
    }
    header ul.social li a.dribble, header ul.social li a.dribble:hover {
        background-position: -124px 0;
    }
    header ul.social li a.rss, header ul.social li a.rss:hover {
        background-position: -155px 0;
    }
    header .rights p {
        color: #454545;
        font-family: "raleway-regular", arial;
        font-size: 11px;
        letter-spacing: 1px;
        line-height: 18px;
    }
    header .rights a {
        font-family: "raleway-bold", arial;
        font-weight: bold;
        text-decoration: none;
    }
    #menu_icon, .close_menu {
        display: none;
    }
}
#logan-profile {
    height: 400px;
    width: 400px;
}
.about-flexbox {
    gap: 60px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
/* Video section neon leaks — applied at full section width */
/*  Main  */

.main {
    width: 100%;
    height: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    z-index: 55;
    clear: both;
    background-color: #000F14;
}
/* Grain layer */
section.main::before {
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    width: 100%;
    height: 100%;
    background: #8C8C8C;
    filter: url(#noiseFilter);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 0.4;
    pointer-events: none;
    z-index: -1;
}
/* Neon leaks — matched to video thumbnail palette, slow bloom */
section.main::after {
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse 50% 80% at 0% 50%,   rgba(20,  50, 160, 0.30) 0%, transparent 70%),
        radial-gradient(ellipse 38% 60% at 100% 22%,  rgba(0,  210, 235, 0.22) 0%, transparent 65%),
        radial-gradient(ellipse 42% 55% at 100% 78%, rgba(249,  38, 114, 0.24) 0%, transparent 65%);
    pointer-events: none;
    z-index: -1;
    animation: neon-bloom 35s ease-in-out infinite;
}
@keyframes neon-bloom {
    0%, 100% { opacity: 0.75; }
    50%       { opacity: 1;    }
}
.bio {
    padding: 60px;
    width: 100%;
    height: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    z-index: 55;
    background: #000F14;
    clear: both;
}
.bio .content {
    background: rgb(18 26 50 / 53%);
    font-family: 'Courier New', Courier, monospace;
}

.content .about-text p {
    font-size: 17px;
    line-height: 1.75;
}
.outer-wrapper {
    padding: 5vh 20vw;
}


.wrapper-2 {
    padding: 20px 100px;
}
.header-filter-div {
    filter: url(#noiseFilter);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.div-x-border {
    background: linear-gradient(to right, #a5a5a5 1px, transparent 1px) 0 0, linear-gradient(to right, #a5a5a5 1px, transparent 1px) 0 100%, linear-gradient(to left, #a5a5a5 1px, transparent 1px) 100% 0, linear-gradient(to left, #a5a5a5 1px, transparent 1px) 100% 100%, linear-gradient(to bottom, #a5a5a5 1px, transparent 1px) 0 0, linear-gradient(to bottom, #a5a5a5 1px, transparent 1px) 100% 0, linear-gradient(to top, #a5a5a5 1px, transparent 1px) 0 100%, linear-gradient(to top, #a5a5a5 1px, transparent 1px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    padding: 10px;
}
.video-div {
    background-color: #000F14;
    gap: 3em;
    position: relative;
}
.video-div::before, .video-div::after {
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}
/* Grain layer */
.video-div::before {
    background: #8C8C8C;
    filter: url(#noiseFilter);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 0.4;
}
/* Twin neon leaks — pink bottom-left, cyan top-right */
.video-div::after {
    background:
        radial-gradient(ellipse 55% 70% at 0% 100%, rgba(249, 38, 114, 0.28) 0%, transparent 70%),
        radial-gradient(ellipse 40% 55% at 100% 0%, rgba(161, 239, 228, 0.12) 0%, transparent 70%);
    opacity: 1;
}
.videowrapper {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    z-index: 55;
    clear: both;
    text-align: center;
}
.videowrapper iframe {
    height: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
}
.social-box {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    flex-wrap: wrap;
}
.social-box h1 {
    font-size: 6em;
}
/*  Home/portfolio  */

.main .work {
    display: block;
    width: 25%;
    height: auto;
    float: left;
    position: relative;
    overflow: hidden;
}
.fill {
    object-fit: cover;
}
.main .pagination-container {
    display: block;
    width: 100%;
    height: 60px;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    float: left;
    position: relative;
}
.main .pagination {
    display: inline-block;
    font-family: "raleway-regular", arial;
    width: auto;
    height: auto;
    letter-spacing: .01em;
    cursor: pointer;
    margin: 0 4px 7px 0;
    color: #454545!important;
    padding: 7px 15px;
    margin-top: 17px;
}
.main .pagination:hover {
    color: #969595!important;
}
.main .pagination a {
    text-decoration: none;
}
.main .pagination a:hover {
    color: #969595;
}
.main .work .media {
    width: 100%;
    vertical-align: middle;
}
.main .work .caption {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #000F14;
    opacity: 0;
    z-index: 2;
    transition: opacity 0.25s ease;
}
.main .work a:hover .caption {
    opacity: 0.95;
}
.work .caption .work_title {
    display: block;
    width: 100%;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
}
.main .work .caption h1 {
    position: relative;
    display: inline-block;
    max-width: 90%;
    padding: 20px 0;
    z-index: 77;
    color: #F92672;
    font-family: 'Courier New', Courier, monospace;
    font-size: 15px;
    letter-spacing: .5px;
    border-bottom: 1px solid #bfbbbb;
    border-top: 1px solid #bfbbbb;
}
.main .gallery-container {
    width: 100%;
}
/* Clearfix */

.main .gallery-container:after {
    content: " ";
    visibility: hidden;
    display: block;
    height: 50px;
    clear: both;
}
.main .gallery-container .picture-container {
    width: 250px;
    float: left;
    margin: 5px;
}
.main .gallery-container .picture-container .img-thumbnail {
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
}
.main .tags a, .main .tags a:visited, .main .tags a:active {
    display: inline-block;
    background: #232829;
    width: auto;
    height: auto;
    border-radius: 3px;
    letter-spacing: .01em;
    cursor: pointer;
    margin: 0 4px 7px 0;
    color: #969595!important;
    border: 1px solid #454545;
    padding: 7px 15px;
    text-decoration: none;
}
.main .tags a:hover {
    color: #f8f8f2!important;
    border: 1px solid #969595;
}
/*  Inner Page  */

.top {
    width: 100%;
    height: 100px;
    overflow: hidden;
    display: block;
    position: relative;
    background-size: cover !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-position: 50% 50% !important;
}
.work_nav {
    display: block;
    width: 100%;
}
.work_nav .btn {
    float: right;
}
.work_nav ul {
    list-style: none;
}
.work_nav ul li {
    display: block;
    float: left;
    margin: 0 0 1px 1px;
    position: relative;
}
.work_nav a {
    display: block;
    width: 40px;
    height: 40px;
    background: url('../img/p_navigation.png') no-repeat;
    background-position: 0 0;
}
.work_nav a.previous {
    background-position: 0 0;
}
.work_nav a.previous.disabled {
    cursor: no-drop;
}
.work_nav a.grid {
    background-position: -41px 0;
}
.work_nav a.next {
    background-position: -82px 0;
}
.work_nav a.next.disabled {
    cursor: no-drop;
}
.top .title {
    display: block;
    width: 100%;
    color: #4b4848;
    font-family: "raleway-bold", arial;
    font-size: 26px;
    font-weight: bold;
    background: rgba(255, 255, 255, .7);
    padding: 20px;
    text-transform: uppercase;
    line-height: 30px;
    margin: 0!important;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.content_header {
    position: absolute;
    bottom: 0;
    margin: 0 auto;
    left: 50%;
    margin-left: -46.36363636363637%;
}
.content {
    color: #f8f8f2;
    font-family: "raleway-regular", arial;
    font-size: 15px;
    line-height: 22px;
    padding: 60px;
    /*background: #303841;*/
    background: url('../img/dust_dark_2.png');
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.content.archives {
    margin-top: 90px;
}
.content p {
    color: #f8f8f2;
    font-family: "raleway-regular", arial;
    font-size: 17px;
    line-height: 26px;
    margin-bottom: 25px;
}
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
    color: #f8f8f2;
    font-family: "raleway-semibold", arial;
    font-weight: bold;
    line-height: 28px;
    margin-bottom: 20px;
    margin-top: 40px;
}
.content img {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.content ol, .content ul {
    margin-left: 15px;
}
.content div.archive-title {
    margin-left: 45px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'raleway-regular';
    color: #f8f8f2;
    font-size: 1.5em;
    margin-bottom: 50px;
}
.content ul.archive-list {
    margin: 20px 0 20px 45px;
    list-style-type: none;
}
.content ul.archive-list li {
    margin: 20px 0;
}
.content ul.archive-list li a, .content ul.archive-list li a:active, .content ul.archive-list li a:visited {
    text-decoration: none;
    color: #F92672;
}
.content ul.archive-list li a:hover {
    color: #969595;
}
/*  Tooltip  */

.tooltip {
    display: block;
    padding: 7px 10px;
    background: #454545;
    color: #fff;
    font-family: "raleway-regular", arial;
    font-size: 12px;
    position: absolute;
    white-space: nowrap;
    z-index: 999;
    opacity: 0;
    text-align: center;
    letter-spacing: .5px;
}
.tooltip:after {
    content: '';
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 3px 3px 0 3px;
    border-color: #454545 transparent transparent transparent;
    display: block;
    text-align: center;
    position: absolute;
    bottom: -3px;
    left: 50%;
    margin-left: -3px;
}
input {
    width: 40%;
    background: rgba(80, 80, 80, 0.07);
    border: 0px;
    border-bottom: 2px solid #131313;
}
textarea {
    width: 40%;
}
.profile-img {}
/*  Responsive code  */

@media (max-width: 1900px) {
    .videowrapper {}
}
@media (max-width: 1400px) {
    .outer-wrapper {}
    .logo-side {
        font-size: 24px;
    }
    header .logo a, header .logo a:active, header .logo a:visited {
        font-size: 3em;
    }
    header .logo a:hover {
        font-size: 3em;
    }
    .videowrapper {}
    .logo-text {
        padding-left: 6px;
    }
}
@media (max-width:1130px) {
    .bio {
        padding: 10px;
    }
    .logo-side {
        display: none;
    }
    header {
        justify-content: center;
        padding: 24px 16px;
    }
}
@media (min-width: 1200px) {
    .about-img {
        max-width: 400px;
    }
}
@media (max-width:1100px) {
    .content .about-text p {
        font-size: 15px;
    }
    .logo-text {
        font-size: 1.8em;
    }
    .videowrapper {}
    #album-2 {
        display: none;
    }
    header .logo {}
    input {
        width: 50%;
    }
    textarea {
        width: 50%;
    }
    header .footer {
        display: none;
    }
    .main .work {
        width: 50%;
    }
}
@media (max-width:1000px) {
    .logo-text {
        font-size: 1.8em;
    }
}
@media (max-width:920px) {
    .outer-wrapper {
        padding: 2vh 5vw;
    }
    .terminal-window {
        width: 90vw;
    }
}

@media (max-width: 520px) {
    .tagline-static--lg { display: none; }
    .tagline-static--sm { display: inline; }
    .logo-side {
        font-size: 16px;
    }
    .logo-text {
        font-size: 1.8em;
    }
    .videowrapper {}
}

/* ── Simplified header below 500px — two-line prompt ─────────────────────── */
@media (max-width: 499px) {
    /* Hide boot sequence, output line, and status bar */
    .boot-line,
    #terminal-output { display: none; }
    .terminal-statusbar { display: none !important; }

    /* Expand terminal body to two prompt lines */
    .terminal-body { height: calc(2 * 1.6em + 30px); }

    /* Two-line prompt: flex-wrap at the break span */
    #terminal-prompt {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        white-space: pre; /* pre = non-collapsible spaces, so flex won't strip them */
    }
    .tp-line-break {
        display: block;
        width: 100%;
        height: 0;
    }
    .tp-sm-arrow { display: inline; }

    /* Restore "for video games" (overrides the 520px "for games" rule) */
    .tagline-static--lg { display: inline; }
    .tagline-static--sm { display: none; }

    /* Terminal — keep full vertical padding, add horizontal side padding */
    header { padding: 32px 16px; box-sizing: border-box; }
    .terminal-window { width: 100%; }

    /* Video — full bleed */
    .outer-wrapper { padding: 0; }

    /* Footer — wrap onto two lines instead of overflowing */
    .site-footer {
        flex-wrap: wrap;
        gap: 6px 12px;
        padding: 14px 16px;
        font-size: 10px;
    }
    .site-footer__sep { display: none; }
}
@media (max-width:860px) {
    .about-flex br {
        display: none;
    }
    .about-text {
        width: 90%;
    }
    .about-flex {
        flex-direction: column;
    }
    .logo-side {
        display: none;
    }
}
@media (max-width:650px) {
    .content {
        padding: 30px;
    }
    .social-div {
        display: none;
    }
}
@media (max-width:550px) {
    header .logo a, header .logo a:active, header .logo a:visited {
        font-size: 2.7em;
    }
    header .logo a:hover {
        font-size: 2.7em;
    }
    .logo-text {
        font-size: 1.4em;
    }
    .about-text {
        width: 90%;
    }
    .main .work {
        width: 100%;
    }
    input {
        width: 80%;
    }
    textarea {
        width: 80%;
    }
}
@media (max-width:470px) {
    .content {
        padding: 20px;
    }
    header .logo a, header .logo a:active, header .logo a:visited {
        font-size: 2.2em;
    }
    header .logo a:hover {
        font-size: 2.2em;
    }
    .logo-text {
        padding-left: 4px;
        font-size: 1.2em;
    }
}
@media (max-width:400px) {
    header .logo a, header .logo a:active, header .logo a:visited {
        font-size: 2em;
    }
    header .logo a:hover {
        font-size: 2em;
    }
    .logo-text {
        font-size: 1.2em;
    }
}
@media (max-width:340px) {
    header .logo a, header .logo a:active, header .logo a:visited {
        font-size: 1.6em;
    }
    header .logo a:hover {
        font-size: 1.6em;
    }
    .logo-text {
        font-size: 1em;
    }
}
@media (max-width: 319px) {
    .about-img {
        display: none;
    }
}
/*Quotes*/

blockquote {
    border-left: 3px solid #5d686f;
    padding: 0 15px;
    font-style: italic;
    margin: 1.5em 0 0;
}
blockquote cite:before {
    content: ' — ';
    padding: 0 0.3em;
}
blockquote>p:first-child {
    margin: 0;
}
.pullquote {
    text-align: left;
    font-style: italic;
    margin: 1.5em 0 0;
}
.pullquote.left {
    width: 45%;
    float: left;
    margin: 1.5em 35px 1.5em 0;
}
.pullquote.right {
    width: 45%;
    float: right;
    margin: 1.5em 0 1.5em 35px;
}
.pullquote.blur {
    background-color: #eef0f1;
}
/*Code Block*/

pre>code {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
    font-family: Courier New, Courier, monospace;
    border: none;
    margin: 0;
    cursor: text;
    overflow-x: auto;
    line-height: 1.7em;
    font-size: 15px;
}
code {
    font-size: 15px;
    display: inline-block;
    font-family: "Courier New", Courier, monospace;
    font-weight: 400;
    background-color: #f7f8f8;
    padding: 0 10px;
}
figure.highlight, .codeblock {
    margin: 10px 0;
    line-height: 1.3em;
    padding-top: 15px;
    padding-bottom: 15px;
    overflow: scroll;
}
figure.highlight table, .codeblock table {
    display: block;
    width: 100%;
}
figure.highlight pre, figure.highlight .gutter, figure.highlight .code, figure.highlight .tag, .codeblock pre, .codeblock .gutter, .codeblock .code, .codeblock .tag {
    background-color: inherit;
    font-family: Courier New, Courier, monospace;
    border: none;
    padding: 0;
    margin: 0;
    cursor: text;
}
figure.highlight .gutter, figure.highlight .code, .codeblock .gutter, .codeblock .code {
    vertical-align: top;
}
figure.highlight.plain .gutter, .codeblock.plain .gutter {
    display: none;
}
figure.highlight figcaption, .codeblock figcaption {
    font-size: 15px;
    padding: 0 15px 20px;
    margin: 0;
}
figure.highlight figcaption a, .codeblock figcaption a {
    float: right;
}
figure.highlight .gutter, .codeblock .gutter {
    border-right: 1px solid;
    padding: 0.3em 15px;
}
figure.highlight .code, .codeblock .code {
    padding: 0.3em 15px 0.3em 1em;
    width: 100%;
}
figure.highlight .code pre, .codeblock .code pre {
    max-width: calc(750px - 50px);
    overflow-x: auto;
    overflow-y: hidden;
}
figure.highlight .line, .codeblock .line {
    height: 1.3em;
    font-size: 15px;
}
.codeblock--tabbed figure.highlight, .codeblock--tabbed pre>code {
    margin-bottom: 0;
    padding-bottom: 0;
}
.codeblock--tabbed figcaption a, .codeblock--tabbed figcaption span {
    float: left !important;
}
.codeblock--tabbed figcaption .tabs {
    float: right;
}
.codeblock--tabbed figcaption .tabs .tab {
    cursor: pointer;
    display: inline-block;
    margin: 0 5px;
    padding: 0 7px;
}
.codeblock--tabbed figcaption .tabs .tab:last-child {
    margin-right: 0;
}
.gist .line, .gist .line-number {
    font-family: "Courier New", Courier, monospace;
    font-size: 1em;
    margin: 0 0 5px 0;
}
pre>code {
    background: #f7f8f8;
    color: #333;
}
code {
    background-color: #f7f8f8;
}
.codeblock--tabbed figcaption .tab.active {
    background: #349ef3;
    color: #f8f8f2;
}
figure.highlight, .codeblock {
    background: #f7f8f8;
    color: #333;
}
figure.highlight figcaption, .codeblock figcaption {
    background: #f7f8f8;
    color: #999999;
}
figure.highlight .gutter, .codeblock .gutter {
    background: #f7f8f8;
    border-right-color: #e6e6e6;
}
figure.highlight .gutter .line, .codeblock .gutter .line {
    color: #aaaaaa;
}
figure.highlight .comment, .codeblock .comment {
    color: #969896;
}
figure.highlight .string, .codeblock .string {
    color: #183691;
}
figure.highlight .keyword, .codeblock .keyword {
    color: #a71d5d;
}
figure.highlight.apacheconf .code .common, figure.highlight.apacheconf .code .nomarkup, figure.highlight.apacheconf .code .attribute, figure.highlight.apacheconf .code .variable, figure.highlight.apacheconf .code .cbracket, figure.highlight.apacheconf .code .keyword, .codeblock.apacheconf .code .common, .codeblock.apacheconf .code .nomarkup, .codeblock.apacheconf .code .attribute, .codeblock.apacheconf .code .variable, .codeblock.apacheconf .code .cbracket, .codeblock.apacheconf .code .keyword {
    color: #0086b3;
}
figure.highlight.apacheconf .code .sqbracket, .codeblock.apacheconf .code .sqbracket {
    color: #df5000;
}
figure.highlight.apacheconf .code .section, figure.highlight.apacheconf .code .tag, .codeblock.apacheconf .code .section, .codeblock.apacheconf .code .tag {
    color: #63a35c;
}
figure.highlight.bash .code .shebang, .codeblock.bash .code .shebang {
    color: #969896;
}
figure.highlight.bash .code .literal, figure.highlight.bash .code .built_in, .codeblock.bash .code .literal, .codeblock.bash .code .built_in {
    color: #0086b3;
}
figure.highlight.bash .code .variable, .codeblock.bash .code .variable {
    color: #333;
}
figure.highlight.bash .code .title, .codeblock.bash .code .title {
    color: #795da3;
}
figure.highlight.coffeescript .code .title, .codeblock.coffeescript .code .title {
    color: #795da3;
}
figure.highlight.coffeescript .code .literal, figure.highlight.coffeescript .code .built_in, figure.highlight.coffeescript .code .number, .codeblock.coffeescript .code .literal, .codeblock.coffeescript .code .built_in, .codeblock.coffeescript .code .number {
    color: #0086b3;
}
figure.highlight.coffeescript .code .reserved, figure.highlight.coffeescript .code .attribute, .codeblock.coffeescript .code .reserved, .codeblock.coffeescript .code .attribute {
    color: #1d3e81;
}
figure.highlight.coffeescript .code .subst, figure.highlight.coffeescript .code .regexp, figure.highlight.coffeescript .code .attribute, .codeblock.coffeescript .code .subst, .codeblock.coffeescript .code .regexp, .codeblock.coffeescript .code .attribute {
    color: #df5000;
}
figure.highlight.cpp .code .preprocessor, figure.highlight.c .code .preprocessor, .codeblock.cpp .code .preprocessor, .codeblock.c .code .preprocessor {
    color: #df5000;
}
figure.highlight.cpp .code .meta-keyword, figure.highlight.c .code .meta-keyword, .codeblock.cpp .code .meta-keyword, .codeblock.c .code .meta-keyword {
    color: #a71d5d;
}
figure.highlight.cpp .code .title, figure.highlight.c .code .title, .codeblock.cpp .code .title, .codeblock.c .code .title {
    color: #795da3;
}
figure.highlight.cpp .code .number, figure.highlight.cpp .code .built_in, figure.highlight.c .code .number, figure.highlight.c .code .built_in, .codeblock.cpp .code .number, .codeblock.cpp .code .built_in, .codeblock.c .code .number, .codeblock.c .code .built_in {
    color: #0086b3;
}
figure.highlight.cs .code .preprocessor, figure.highlight.cs .code .preprocessor .keyword, .codeblock.cs .code .preprocessor, .codeblock.cs .code .preprocessor .keyword {
    color: #333;
}
figure.highlight.cs .code .title, .codeblock.cs .code .title {
    color: #795da3;
}
figure.highlight.cs .code .number, figure.highlight.cs .code .built_in, .codeblock.cs .code .number, .codeblock.cs .code .built_in {
    color: #0086b3;
}
figure.highlight.cs .code .xmlDocTag, figure.highlight.cs .code .doctag, .codeblock.cs .code .xmlDocTag, .codeblock.cs .code .doctag {
    color: #63a35c;
}
figure.highlight.css .code .at_rule, figure.highlight.css .code .important, figure.highlight.css .code .meta, .codeblock.css .code .at_rule, .codeblock.css .code .important, .codeblock.css .code .meta {
    color: #a71d5d;
}
figure.highlight.css .code .attribute, figure.highlight.css .code .hexcolor, figure.highlight.css .code .number, figure.highlight.css .code .function, .codeblock.css .code .attribute, .codeblock.css .code .hexcolor, .codeblock.css .code .number, .codeblock.css .code .function {
    color: #0086b3;
}
figure.highlight.css .code .attr_selector, figure.highlight.css .code .value, .codeblock.css .code .attr_selector, .codeblock.css .code .value {
    color: #333;
}
figure.highlight.css .code .id, figure.highlight.css .code .class, figure.highlight.css .code .pseudo, figure.highlight.css .code .selector-pseudo, .codeblock.css .code .id, .codeblock.css .code .class, .codeblock.css .code .pseudo, .codeblock.css .code .selector-pseudo {
    color: #795da3;
}
figure.highlight.css .code .tag, figure.highlight.css .code .selector-tag, .codeblock.css .code .tag, .codeblock.css .code .selector-tag {
    color: #63a35c;
}
figure.highlight.diff .code .chunk, figure.highlight.diff .code .meta, .codeblock.diff .code .chunk, .codeblock.diff .code .meta {
    color: #795da3;
    font-weight: bold;
}
figure.highlight.diff .code .addition, .codeblock.diff .code .addition {
    color: #55a532;
    background-color: #eaffea;
}
figure.highlight.diff .code .deletion, .codeblock.diff .code .deletion {
    color: #bd2c00;
    background-color: #ffecec;
}
figure.highlight.http .code .attribute, figure.highlight.http .code .attr, .codeblock.http .code .attribute, .codeblock.http .code .attr {
    color: #183691;
}
figure.highlight.http .code .literal, .codeblock.http .code .literal {
    color: #0086b3;
}
figure.highlight.http .code .request, .codeblock.http .code .request {
    color: #a71d5d;
}
figure.highlight.ini .code .title, figure.highlight.ini .code .section, .codeblock.ini .code .title, .codeblock.ini .code .section {
    color: #795da3;
}
figure.highlight.ini .code .setting, figure.highlight.ini .code .attr, .codeblock.ini .code .setting, .codeblock.ini .code .attr {
    color: #a71d5d;
}
figure.highlight.ini .code .value, figure.highlight.ini .code .keyword, .codeblock.ini .code .value, .codeblock.ini .code .keyword {
    color: #333;
}
figure.highlight.java .code .title, .codeblock.java .code .title {
    color: #795da3;
}
figure.highlight.java .code .javadoc, .codeblock.java .code .javadoc {
    color: #969896;
}
figure.highlight.java .code .meta, figure.highlight.java .code .annotation, figure.highlight.java .code .javadoctag, .codeblock.java .code .meta, .codeblock.java .code .annotation, .codeblock.java .code .javadoctag {
    color: #a71d5d;
}
figure.highlight.java .code .number, .codeblock.java .code .number {
    color: #0086b3;
}
figure.highlight.java .code .params, .codeblock.java .code .params {
    color: #1d3e81;
}
figure.highlight.js .code .built_in, figure.highlight.js .code .title, .codeblock.js .code .built_in, .codeblock.js .code .title {
    color: #795da3;
}
figure.highlight.js .code .javadoc, .codeblock.js .code .javadoc {
    color: #969896;
}
figure.highlight.js .code .tag, figure.highlight.js .code .javadoctag, .codeblock.js .code .tag, .codeblock.js .code .javadoctag {
    color: #a71d5d;
}
figure.highlight.js .code .tag .title, .codeblock.js .code .tag .title {
    color: #333;
}
figure.highlight.js .code .regexp, .codeblock.js .code .regexp {
    color: #df5000;
}
figure.highlight.js .code .literal, figure.highlight.js .code .number, .codeblock.js .code .literal, .codeblock.js .code .number {
    color: #0086b3;
}
figure.highlight.json .code .attribute, .codeblock.json .code .attribute {
    color: #183691;
}
figure.highlight.json .code .number, figure.highlight.json .code .literal, .codeblock.json .code .number, .codeblock.json .code .literal {
    color: #0086b3;
}
figure.highlight.mak .code .constant, .codeblock.mak .code .constant {
    color: #333;
}
figure.highlight.mak .code .title, .codeblock.mak .code .title {
    color: #795da3;
}
figure.highlight.mak .code .keyword, figure.highlight.mak .code .meta-keyword, .codeblock.mak .code .keyword, .codeblock.mak .code .meta-keyword {
    color: #0086b3;
}
figure.highlight.md .code .value, figure.highlight.md .code .link_label, figure.highlight.md .code .strong, figure.highlight.md .code .emphasis, figure.highlight.md .code .blockquote, figure.highlight.md .code .quote, figure.highlight.md .code .section, .codeblock.md .code .value, .codeblock.md .code .link_label, .codeblock.md .code .strong, .codeblock.md .code .emphasis, .codeblock.md .code .blockquote, .codeblock.md .code .quote, .codeblock.md .code .section {
    color: #183691;
}
figure.highlight.md .code .link_reference, figure.highlight.md .code .symbol, figure.highlight.md .code .code, .codeblock.md .code .link_reference, .codeblock.md .code .symbol, .codeblock.md .code .code {
    color: #0086b3;
}
figure.highlight.md .code .link_url, figure.highlight.md .code .link, .codeblock.md .code .link_url, .codeblock.md .code .link {
    text-decoration: underline;
}
figure.highlight.nginx .code .title, figure.highlight.nginx .code .attribute, .codeblock.nginx .code .title, .codeblock.nginx .code .attribute {
    color: #a71d5d;
}
figure.highlight.nginx .code .built_in, figure.highlight.nginx .code .literal, .codeblock.nginx .code .built_in, .codeblock.nginx .code .literal {
    color: #0086b3;
}
figure.highlight.nginx .code .regexp, .codeblock.nginx .code .regexp {
    color: #183691;
}
figure.highlight.nginx .code .variable, .codeblock.nginx .code .variable {
    color: #333;
}
figure.highlight.objectivec .code .preprocessor, figure.highlight.objectivec .code .meta, .codeblock.objectivec .code .preprocessor, .codeblock.objectivec .code .meta {
    color: #a71d5d;
}
figure.highlight.objectivec .code .preprocessor .title, figure.highlight.objectivec .code .meta .title, .codeblock.objectivec .code .preprocessor .title, .codeblock.objectivec .code .meta .title {
    color: #df5000;
}
figure.highlight.objectivec .code .meta-string, .codeblock.objectivec .code .meta-string {
    color: #183691;
}
figure.highlight.objectivec .code .title, .codeblock.objectivec .code .title {
    color: #795da3;
}
figure.highlight.objectivec .code .literal, figure.highlight.objectivec .code .number, figure.highlight.objectivec .code .built_in, .codeblock.objectivec .code .literal, .codeblock.objectivec .code .number, .codeblock.objectivec .code .built_in {
    color: #0086b3;
}
figure.highlight.perl .code .sub, .codeblock.perl .code .sub {
    color: #795da3;
}
figure.highlight.perl .code .title, .codeblock.perl .code .title {
    color: #795da3;
}
figure.highlight.perl .code .regexp, .codeblock.perl .code .regexp {
    color: #df5000;
}
figure.highlight.php .code .phpdoc, figure.highlight.php .code .doctag, .codeblock.php .code .phpdoc, .codeblock.php .code .doctag {
    color: #a71d5d;
}
figure.highlight.php .code .regexp, .codeblock.php .code .regexp {
    color: #df5000;
}
figure.highlight.php .code .literal, figure.highlight.php .code .number, .codeblock.php .code .literal, .codeblock.php .code .number {
    color: #0086b3;
}
figure.highlight.php .code .title, .codeblock.php .code .title {
    color: #795da3;
}
figure.highlight.python .code .decorator, figure.highlight.python .code .title, figure.highlight.python .code .meta, .codeblock.python .code .decorator, .codeblock.python .code .title, .codeblock.python .code .meta {
    color: #795da3;
}
figure.highlight.python .code .number, .codeblock.python .code .number {
    color: #0086b3;
}
figure.highlight.ruby .code .parent, figure.highlight.ruby .code .title, .codeblock.ruby .code .parent, .codeblock.ruby .code .title {
    color: #795da3;
}
figure.highlight.ruby .code .prompt, figure.highlight.ruby .code .constant, figure.highlight.ruby .code .number, figure.highlight.ruby .code .subst .keyword, figure.highlight.ruby .code .symbol, .codeblock.ruby .code .prompt, .codeblock.ruby .code .constant, .codeblock.ruby .code .number, .codeblock.ruby .code .subst .keyword, .codeblock.ruby .code .symbol {
    color: #0086b3;
}
figure.highlight.sql .built_in, .codeblock.sql .built_in {
    color: #a71d5d;
}
figure.highlight.sql .number, .codeblock.sql .number {
    color: #0086b3;
}
figure.highlight.xml .tag, figure.highlight.html .tag, .codeblock.xml .tag, .codeblock.html .tag {
    color: #333;
}
figure.highlight.xml .value, figure.highlight.html .value, .codeblock.xml .value, .codeblock.html .value {
    color: #183691;
}
figure.highlight.xml .attribute, figure.highlight.xml .attr, figure.highlight.html .attribute, figure.highlight.html .attr, .codeblock.xml .attribute, .codeblock.xml .attr, .codeblock.html .attribute, .codeblock.html .attr {
    color: #795da3;
}
figure.highlight.xml .title, figure.highlight.xml .name, figure.highlight.html .title, figure.highlight.html .name, .codeblock.xml .title, .codeblock.xml .name, .codeblock.html .title, .codeblock.html .name {
    color: #63a35c;
}
figure.highlight.puppet .title, .codeblock.puppet .title {
    color: #795da3;
}
figure.highlight.puppet .function, .codeblock.puppet .function {
    color: #0086b3;
}
figure.highlight.puppet .name, .codeblock.puppet .name {
    color: #a71d5d;
}
figure.highlight.puppet .attr, .codeblock.puppet .attr {
    color: #0086b3;
}
figure.highlight.less .tag, figure.highlight.less .at_rule, .codeblock.less .tag, .codeblock.less .at_rule {
    color: #a71d5d;
}
figure.highlight.less .number, figure.highlight.less .hexcolor, figure.highlight.less .function, figure.highlight.less .attribute, .codeblock.less .number, .codeblock.less .hexcolor, .codeblock.less .function, .codeblock.less .attribute {
    color: #0086b3;
}
figure.highlight.less .built_in, .codeblock.less .built_in {
    color: #df5000;
}
figure.highlight.less .id, figure.highlight.less .pseudo, figure.highlight.less .class, figure.highlight.less .selector-id, figure.highlight.less .selector-class, figure.highlight.less .selector-tag, .codeblock.less .id, .codeblock.less .pseudo, .codeblock.less .class, .codeblock.less .selector-id, .codeblock.less .selector-class, .codeblock.less .selector-tag {
    color: #795da3;
}
figure.highlight.scss .tag, figure.highlight.scss .at_rule, figure.highlight.scss .important, .codeblock.scss .tag, .codeblock.scss .at_rule, .codeblock.scss .important {
    color: #a71d5d;
}
figure.highlight.scss .number, figure.highlight.scss .hexcolor, figure.highlight.scss .function, figure.highlight.scss .attribute, .codeblock.scss .number, .codeblock.scss .hexcolor, .codeblock.scss .function, .codeblock.scss .attribute {
    color: #0086b3;
}
figure.highlight.scss .variable, .codeblock.scss .variable {
    color: #333;
}
figure.highlight.scss .built_in, .codeblock.scss .built_in {
    color: #df5000;
}
figure.highlight.scss .id, figure.highlight.scss .pseudo, figure.highlight.scss .class, figure.highlight.scss .preprocessor, figure.highlight.scss .selector-class, figure.highlight.scss .selector-id, .codeblock.scss .id, .codeblock.scss .pseudo, .codeblock.scss .class, .codeblock.scss .preprocessor, .codeblock.scss .selector-class, .codeblock.scss .selector-id {
    color: #795da3;
}
figure.highlight.scss .tag, figure.highlight.scss .selector-tag, .codeblock.scss .tag, .codeblock.scss .selector-tag {
    color: #63a35c;
}
figure.highlight.stylus .at_rule, .codeblock.stylus .at_rule {
    color: #a71d5d;
}
figure.highlight.stylus .tag, figure.highlight.stylus .selector-tag, .codeblock.stylus .tag, .codeblock.stylus .selector-tag {
    color: #63a35c;
}
figure.highlight.stylus .number, figure.highlight.stylus .hexcolor, figure.highlight.stylus .attribute, figure.highlight.stylus .params, .codeblock.stylus .number, .codeblock.stylus .hexcolor, .codeblock.stylus .attribute, .codeblock.stylus .params {
    color: #0086b3;
}
figure.highlight.stylus .class, figure.highlight.stylus .id, figure.highlight.stylus .pseudo, figure.highlight.stylus .title, figure.highlight.stylus .selector-id, figure.highlight.stylus .selector-pseudo, figure.highlight.stylus .selector-class, .codeblock.stylus .class, .codeblock.stylus .id, .codeblock.stylus .pseudo, .codeblock.stylus .title, .codeblock.stylus .selector-id, .codeblock.stylus .selector-pseudo, .codeblock.stylus .selector-class {
    color: #795da3;
}
figure.highlight.go .typename, .codeblock.go .typename {
    color: #a71d5d;
}
figure.highlight.go .built_in, figure.highlight.go .constant, .codeblock.go .built_in, .codeblock.go .constant {
    color: #0086b3;
}
figure.highlight.swift .preprocessor, .codeblock.swift .preprocessor {
    color: #a71d5d;
}
figure.highlight.swift .title, .codeblock.swift .title {
    color: #795da3;
}
figure.highlight.swift .built_in, figure.highlight.swift .number, figure.highlight.swift .type, .codeblock.swift .built_in, .codeblock.swift .number, .codeblock.swift .type {
    color: #0086b3;
}
figure.highlight.yml .line .attr, .codeblock.yml .line .attr {
    color: #63a35c;
}
figure.highlight.yml .line, figure.highlight.yml .string, figure.highlight.yml .type, figure.highlight.yml .literal, figure.highlight.yml .meta, .codeblock.yml .line, .codeblock.yml .string, .codeblock.yml .type, .codeblock.yml .literal, .codeblock.yml .meta {
    color: #183691;
}
figure.highlight.yml .number, .codeblock.yml .number {
    color: #0086b3;
}
.menu-linl {
    padding-lfet: 10px;
}
.profile-pic {
    width: 150px;
    height: 150px;
    border-radius: 150px;
    margin-bottom: 30px;
}
.logo-text {
    padding-top: 2px;
    font-family: 'raleway-regular';
    color: #f8f8f2;
}
.logo-side {
    font-family: 'raleway-regular';
    color: #f8f8f2;
}
.caption-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    color: #f8f8f2;
    letter-spacing: .5px;
    padding: 0 10px;
}
/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
    display: inline-block;
    /* height: 38px; */
    color: #555;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: .1rem;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    /* border-radius: 4px; */
    border: 1px solid #bbb;
    -webkit-appearance: none;
    cursor: pointer;
    box-sizing: border-box;
}
.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus {
    color: #333;
    border-color: #888;
    outline: 0;
}
.button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary {
    color: #FFF;
    background-color: #33C3F0;
    border-color: #33C3F0;
}
.button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover, .button.button-primary:focus, button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus {
    color: #FFF;
    background-color: #1EAEDB;
    border-color: #1EAEDB;
}
/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */

input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select {
    height: 38px;
    padding: 6px 10px;
    -webkit-appearance: none;
    box-shadow: none;
    box-sizing: border-box;
    color: white;
    background: #0000004f;
    border: 0px;
    border-bottom: 2px solid #ffffff;
}
/* Removes awkward default styles on some inputs for iOS */

input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
textarea {
    min-height: 65px;
    padding-top: 6px;
    padding-bottom: 6px;
}
input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
    border-bottom: 2px solid #f92672;
    outline: 0;
}
label, legend {
    display: block;
    margin-bottom: .5rem;
    margin-top: .5rem;
    font-weight: 600;
}
fieldset {
    padding: 0;
    border-width: 0;
}
input[type="checkbox"], input[type="radio"] {
    display: inline;
}
label>.label-body {
    display: inline-block;
    margin-left: .5rem;
    font-weight: normal;
}
input, textarea {
    font-family: 'raleway-regular';
}
#center-wrapper {
    text-align: center;
}
#center-wrapper iframe {
    display: inline-block;
}
#fs-frm {
    border-left: 1px solid;
    border-image: linear-gradient(to bottom, rgba(3, 15, 21, 1) 60%, rgba(249, 38, 114, 1) 80%) 1;
}
form#fs-frm label {
    color: #ced6e0;
}
#no-contact {
    color: #f9ae58;
}
.fs-items {
    padding: 0 20px;
}
#form-submit-button {
    transition: color .1s linear;
    -webkit-transition: color .1s linear;
    -moz-transition: color .1s linear;
    -o-transition: color .1s linear;
}
#form-submit-button {
    background: #00000021;
    border: none;
    padding: 2px 30px;
    /* text-transform: lowercase; */
    font-family: "raleway-regular", arial;
    color: #f92672;
    border: 1px solid white;
    /* padding: 10px; */
    cursor: pointer;
    font-size: 16px;
    margin-top: 0.5rem;
}
#form-submit-button:hover {
    color: white;
    border: 1px solid #f92672;
}

/* Minimal monospace footer */
.site-footer {
    width: 100%;
    background: #000F14;
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    letter-spacing: 0.15em;
    color: rgba(248, 248, 242, 0.35);
    box-sizing: border-box;
}
.site-footer a {
    color: rgba(248, 248, 242, 0.35);
    text-decoration: none;
    transition: color 0.15s ease;
}
.site-footer a:hover {
    color: rgba(248, 248, 242, 0.75);
}
.site-footer__dot {
    color: rgba(248, 248, 242, 0.2);
}

/* ── Terminal status bar (vim-style) ─────────────────────────────────────── */
.terminal-statusbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 20px;
    background: rgba(0, 210, 235, 0.12);
    border-top: 1px solid rgba(0, 210, 235, 0.14);
    font-family: 'Courier New', Courier, monospace;
    font-size: clamp(9px, 0.75vw, 12px);
    color: rgba(0, 210, 235, 0.75);
    letter-spacing: 0.04em;
    transition: opacity 0.3s ease;
}
.tsb-mode {
    font-weight: bold;
    color: rgba(0, 210, 235, 0.9);
}
.tsb-right {
    color: rgba(248, 248, 242, 0.35);
}

/* ── Git log bar — always visible, snug dark background ─────────────────── */
.git-log-bar {
    position: absolute;
    bottom: 8px;
    left: 8px;
    max-width: calc(100% - 16px);
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.88);
    border-radius: 3px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    z-index: 3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
.git-commit-hash  { color: #F92672; }
.git-commit-sep   { color: rgba(248, 248, 242, 0.25); }
.git-commit-title { color: rgba(248, 248, 242, 0.6); }
.git-commit-year  { color: rgba(0, 210, 235, 0.65); }

/* ── $ whoami prompt in about section ────────────────────────────────────── */
.terminal-whoami {
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px !important;
    color: rgba(248, 248, 242, 0.35) !important;
    margin-bottom: 0.5em;
    line-height: 1.4;
}
.tw-prompt {
    color: #5af78e;
    text-shadow: 0 0 6px rgba(90, 247, 142, 0.5);
}
.tw-cmd {
    color: rgba(248, 248, 242, 0.5);
}