* {
    box-sizing: border-box;
}
html, body {
    
    margin: 0;
    padding: 0;
}
body {
    
    background: #000;
    background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='grid' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 20 0 L 0 0 0 20' fill='none' stroke='%23333' stroke-width='0.7'/%3E%3C/pattern%3E%3Cpattern id='items' width='1200' height='1200' patternUnits='userSpaceOnUse'%3E%3C!-- Lamborghini-style supercar --%3E%3Cpath d='M100,200 C120,190 140,190 160,190 L300,190 C320,190 330,180 360,160 C390,140 430,140 460,140 C490,140 510,150 540,160 C570,170 590,180 610,190 L760,190 C780,190 800,200 810,220 C820,240 810,250 800,260 L780,270 C770,280 760,290 760,300 L760,320 C760,330 750,340 740,340 L720,340 C710,340 700,330 700,320 L700,310 C700,300 690,290 680,290 L240,290 C230,290 220,300 220,310 L220,320 C220,330 210,340 200,340 L180,340 C170,340 160,330 160,320 L160,300 C160,290 150,280 140,270 L120,260 C110,250 100,240 100,220 Z' fill='none' stroke='%23444' stroke-width='1.2' transform='translate(100,100) scale(0.6) rotate(15)'/%3E%3C!-- Classic muscle car --%3E%3Cpath d='M100,200 L120,170 L170,170 L200,140 L400,140 L430,170 L480,170 L500,200 L500,230 L480,230 C480,250 460,270 440,270 C420,270 400,250 400,230 L200,230 C200,250 180,270 160,270 C140,270 120,250 120,230 L100,230 Z' fill='none' stroke='%23444' stroke-width='1.2' transform='translate(400,350) scale(0.7) rotate(-10)'/%3E%3C!-- Laptop --%3E%3Cpath d='M150,100 L350,100 C360,100 370,110 370,120 L370,220 C370,230 360,240 350,240 L150,240 C140,240 130,230 130,220 L130,120 C130,110 140,100 150,100 Z M120,240 L380,240 L400,270 L100,270 Z' fill='none' stroke='%23444' stroke-width='1.2' transform='translate(700,200) scale(0.6) rotate(5)'/%3E%3C!-- Android Studio --%3E%3Cpath d='M180,120 L220,80 L260,120 M140,120 L300,120 L300,280 L140,280 Z M160,180 C160,170 170,160 180,160 C190,160 200,170 200,180 C200,190 190,200 180,200 C170,200 160,190 160,180 Z M240,180 C240,170 250,160 260,160 C270,160 280,170 280,180 C280,190 270,200 260,200 C250,200 240,190 240,180 Z M160,240 L280,240' fill='none' stroke='%23444' stroke-width='1.2' transform='translate(180,500) scale(0.6) rotate(-5)'/%3E%3C!-- F1 Racing Car --%3E%3Cpath d='M150,150 C120,150 100,160 90,170 C80,180 70,195 60,210 L50,230 L50,250 C50,260 60,270 70,270 L90,270 C90,290 110,310 130,310 C150,310 170,290 170,270 L350,270 C350,290 370,310 390,310 C410,310 430,290 430,270 L450,270 C460,270 470,260 470,250 L470,230 L460,210 C450,195 440,180 430,170 C420,160 400,150 370,150 L350,150 C340,150 330,140 330,130 L330,100 L310,100 L310,130 C310,140 300,150 290,150 L150,150 Z' fill='none' stroke='%23444' stroke-width='1.2' transform='translate(850,120) scale(0.5) rotate(0)'/%3E%3C!-- Tesla Cybertruck-style --%3E%3Cpath d='M100,200 L200,120 L400,120 L500,200 L500,280 L480,280 C480,300 460,320 440,320 C420,320 400,300 400,280 L200,280 C200,300 180,320 160,320 C140,320 120,300 120,280 L100,280 Z' fill='none' stroke='%23444' stroke-width='1.2' transform='translate(500,600) scale(0.5) rotate(5)'/%3E%3C!-- Gaming PC --%3E%3Cpath d='M150,100 L350,100 C360,100 370,110 370,120 L370,320 C370,330 360,340 350,340 L150,340 C140,340 130,330 130,320 L130,120 C130,110 140,100 150,100 Z M170,140 L330,140 L330,300 L170,300 Z M200,320 C200,315 205,310 210,310 C215,310 220,315 220,320 C220,325 215,330 210,330 C205,330 200,325 200,320 Z M250,320 C250,315 255,310 260,310 C265,310 270,315 270,320 C270,325 265,330 260,330 C255,330 250,325 250,320 Z M300,320 C300,315 305,310 310,310 C315,310 320,315 320,320 C320,325 315,330 310,330 C305,330 300,325 300,320 Z' fill='none' stroke='%23444' stroke-width='1.2' transform='translate(50,800) scale(0.5) rotate(-5)'/%3E%3C!-- Mechanical Keyboard --%3E%3Cpath d='M100,150 L500,150 C510,150 520,160 520,170 L520,250 C520,260 510,270 500,270 L100,270 C90,270 80,260 80,250 L80,170 C80,160 90,150 100,150 Z M110,170 L130,170 L130,190 L110,190 Z M140,170 L160,170 L160,190 L140,190 Z M170,170 L190,170 L190,190 L170,190 Z M200,170 L220,170 L220,190 L200,190 Z M230,170 L250,170 L250,190 L230,190 Z M260,170 L280,170 L280,190 L260,190 Z M290,170 L310,170 L310,190 L290,190 Z M320,170 L340,170 L340,190 L320,190 Z M350,170 L370,170 L370,190 L350,190 Z M380,170 L400,170 L400,190 L380,190 Z M410,170 L430,170 L430,190 L410,190 Z M440,170 L460,170 L460,190 L440,190 Z M470,170 L490,170 L490,190 L470,190 Z M110,200 L140,200 L140,220 L110,220 Z M150,200 L170,200 L170,220 L150,220 Z M180,200 L200,200 L200,220 L180,220 Z M210,200 L230,200 L230,220 L210,220 Z M240,200 L260,200 L260,220 L240,220 Z M270,200 L290,200 L290,220 L270,220 Z M300,200 L320,200 L320,220 L300,220 Z M330,200 L350,200 L350,220 L330,220 Z M360,200 L380,200 L380,220 L360,220 Z M390,200 L410,200 L410,220 L390,220 Z M420,200 L450,200 L450,220 L420,220 Z M460,200 L490,200 L490,220 L460,220 Z M110,230 L150,230 L150,250 L110,250 Z M160,230 L390,230 L390,250 L160,250 Z M400,230 L490,230 L490,250 L400,250 Z' fill='none' stroke='%23444' stroke-width='1.2' transform='translate(850,700) scale(0.4) rotate(0)'/%3E%3C!-- VR Headset --%3E%3Cpath d='M150,150 C120,150 100,170 100,200 L100,250 C100,280 120,300 150,300 L350,300 C380,300 400,280 400,250 L400,200 C400,170 380,150 350,150 Z M180,170 L320,170 L320,280 L180,280 Z M170,220 C180,220 190,230 190,240 C190,250 180,260 170,260 C160,260 150,250 150,240 C150,230 160,220 170,220 Z M330,220 C340,220 350,230 350,240 C350,250 340,260 330,260 C320,260 310,250 310,240 C310,230 320,220 330,220 Z' fill='none' stroke='%23444' stroke-width='1.2' transform='translate(400,800) scale(0.5) rotate(10)'/%3E%3C!-- GPU Card --%3E%3Cpath d='M100,100 L400,100 L400,200 L380,220 L380,300 L100,300 Z M120,120 L380,120 L380,190 L360,210 L360,280 L120,280 Z M120,320 L140,320 L140,350 L120,350 Z M180,320 L200,320 L200,350 L180,350 Z M240,320 L260,320 L260,350 L240,350 Z M300,320 L320,320 L320,350 L300,350 Z M360,320 L380,320 L380,350 L360,350 Z' fill='none' stroke='%23444' stroke-width='1.2' transform='translate(750,300) scale(0.4) rotate(-5)'/%3E%3C!-- Sports Car (Ferrari-style) --%3E%3Cpath d='M120,200 C130,180 150,170 180,170 L220,155 C250,140 320,140 350,155 L390,170 C430,170 450,180 460,200 C470,220 470,235 460,250 L440,250 C440,270 420,290 400,290 C380,290 360,270 360,250 L240,250 C240,270 220,290 200,290 C180,290 160,270 160,250 L140,250 C130,235 110,220 120,200 Z' fill='none' stroke='%23444' stroke-width='1.2' transform='translate(900,500) scale(0.6) rotate(15)'/%3E%3C!-- Headphones --%3E%3Cpath d='M200,100 C300,100 400,200 400,300 L400,350 C400,365 385,380 370,380 L340,380 C325,380 310,365 310,350 L310,320 C310,305 325,290 340,290 L370,290 C380,290 390,280 390,270 L390,250 C390,180 310,100 240,100 C170,100 90,180 90,250 L90,270 C90,280 100,290 110,290 L140,290 C155,290 170,305 170,320 L170,350 C170,365 155,380 140,380 L110,380 C95,380 80,365 80,350 L80,300 C80,200 100,100 200,100 Z' fill='none' stroke='%23444' stroke-width='1.2' transform='translate(80,350) scale(0.5) rotate(-10)'/%3E%3C!-- Camera --%3E%3Cpath d='M150,150 L190,120 L270,120 L310,150 L350,150 C365,150 380,165 380,180 L380,270 C380,285 365,300 350,300 L150,300 C135,300 120,285 120,270 L120,180 C120,165 135,150 150,150 Z M230,150 L270,150 L270,180 L230,180 Z M250,200 C285,200 315,230 315,265 C315,300 285,330 250,330 C215,330 185,300 185,265 C185,230 215,200 250,200 Z M250,220 C275,220 295,240 295,265 C295,290 275,310 250,310 C225,310 205,290 205,265 C205,240 225,220 250,220 Z' fill='none' stroke='%23444' stroke-width='1.2' transform='translate(600,100) scale(0.4) rotate(5)'/%3E%3C!-- Code Editor --%3E%3Cpath d='M100,100 L400,100 C410,100 420,110 420,120 L420,350 C420,360 410,370 400,370 L100,370 C90,370 80,360 80,350 L80,120 C80,110 90,100 100,100 Z M100,130 L400,130 L400,350 L100,350 Z M120,150 L140,170 L120,190 M380,150 L360,170 L380,190 M160,150 L180,150 M200,150 L240,150 M160,170 L200,170 M220,170 L270,170 M160,190 L210,190 M230,190 L290,190 M160,210 L190,210 M210,210 L260,210 M160,230 L230,230 M250,230 L300,230' fill='none' stroke='%23444' stroke-width='1.2' transform='translate(200,930) scale(0.4) rotate(0)'/%3E%3C!-- SUV --%3E%3Cpath d='M100,220 L100,180 L120,140 L380,140 L400,180 L400,220 L380,220 C380,250 350,280 320,280 C290,280 260,250 260,220 L240,220 C240,250 210,280 180,280 C150,280 120,250 120,220 Z M140,170 L140,200 L360,200 L360,170 Z' fill='none' stroke='%23444' stroke-width='1.2' transform='translate(650,930) scale(0.5) rotate(-5)'/%3E%3C!-- Smart Watch --%3E%3Cpath d='M200,100 C230,100 250,120 250,150 L250,300 C250,330 230,350 200,350 C170,350 150,330 150,300 L150,150 C150,120 170,100 200,100 Z M170,130 L230,130 L230,320 L170,320 Z M180,150 L220,150 M180,170 L200,170 M180,190 L210,190 M180,210 L200,210 M180,230 L215,230 M180,250 L205,250 M180,270 L200,270 M180,290 L210,290' fill='none' stroke='%23444' stroke-width='1.2' transform='translate(950,350) scale(0.4) rotate(8)'/%3E%3C!-- Racing helmet --%3E%3Cpath d='M200,100 C260,100 300,140 300,200 L300,250 C300,290 280,320 240,340 C220,350 180,350 160,340 C120,320 100,290 100,250 L100,200 C100,140 140,100 200,100 Z M140,200 L260,200 C270,200 280,210 280,220 L280,270 C280,280 270,290 260,290 L140,290 C130,290 120,280 120,270 L120,220 C120,210 130,200 140,200 Z M160,150 L240,150 C245,150 250,155 250,160 L250,170 C250,175 245,180 240,180 L160,180 C155,180 150,175 150,170 L150,160 C150,155 155,150 160,150 Z' fill='none' stroke='%23444' stroke-width='1.2' transform='translate(300,700) scale(0.5) rotate(-5)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23grid)'/%3E%3Crect width='100%25' height='100%25' fill='url(%23items)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-position: center;
    font-family: "Crimson Text", sans-serif;
    font-weight: 400;
    color: #333;
    line-height: 1.6em;
    font-size: 23px;
}

/* Style all font awesome icons */
.fa {
    
    padding: 20px;
    font-size: 30px;
    width: 30px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
  }
  
  /* Add a hover effect if you want */
.fa:hover {
    opacity: 0.7;
  }
  
  /* Set a specific color for each brand */
  
  /* Facebook */
.fa-instagram {
    color: white;
}
 /* Twitter */
.fa-twitter {
    color: white;
}
#social #container {
    text-align: center;
  }
  
  #social #container ul {
    float: left;
  }
  
  #social #container ul li {
    float: left;
    padding-left: 10px;
    list-style-type: none;
  }
a {
    color: rgb(252, 252, 252);
}
    a:hover {
        color: #000;
    }
    code {
        display: inline-block;
        background: #000;
        color: #000;
        padding: 3px 5px;
        font-size: 0.9em;
    }
    pre code {
        display: block;
    }
    .post .highlight {
        background: #000;
        padding: 5px;
    }

    .content a {
        text-decoration: none;
        word-break: break-word;
        text-decoration-thickness: 2px;
    }
        .content a:hover {
            color: rgb(255, 255, 255);
            text-decoration-color: rgb(255, 255, 255);
        }

html,button,input,select,textarea {
    color: #333;
}

::-moz-selection {
    background: #000;
    text-shadow: none;
    color: #000;
}

::selection {
    background: #000;
    text-shadow: none;
    color: #000;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid rgb(0, 0, 0);
    margin: 15px 0;
    padding: 0;
}

img {
    max-width: 100%;
}

a img {
    border:none;
}

figure {
    margin: 0;
    text-align: center;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    
    resize: vertical;
}

blockquote {
    background: #000000;
    font-style: italic;
    border-left: 5px solid;
    border-color: #000;
    padding: 5px 15px;
}

blockquote cite {
    font-size: 70%;
    opacity: .8;
}

blockquote em {
    font-weight: 600;
}


h1, h2, h3, h4, h5, h6 {
    color: white;
    font-weight: 500;
    line-height: 1.3em;
    margin: 45px 0 20px 0;
}

h1 {
    color: white;
    font-size: 2.75rem;
}
h2 {
    color: white;
    font-size: 2rem;
}

h3 {
    color: white;
    font-size: 1.6rem;
}

h4 {
    color: white;
    font-size: 1.2rem;
}

h5 {
    color: white;
    font-size: 1rem;
}

h6 {
    color: white;
    font-size: .9rem;
}

.half {
    max-width: 60%;
}
.align-center {
    text-align: center;
}

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

.float-right {
    float: right;
}
    figure.float-right {
        margin: 0 15px 0 15px;
    }

.text-small {
    font-size: .875em;
}

p {
    color: #a1a1a1;
}

ul {
    padding-left: 15px;
}

ul.flat {
    margin: 0;
    padding: 0;
}

ul.flat li {
    display: inline-block;
    list-style: none;
    margin-left: 0;
}

.prevent-collapse {
    min-height: .1rem
}

.highlight pre {
    margin-bottom: 0;
    margin-top: 0;
    padding: 20px;
    background-color: transparent !important;
}

.wrap {
    background: rgba(0, 0, 0, 0.0); /* Reduced opacity from 0.9 to 0.7 */
    margin: 0 auto;
    padding: 40px 120px 90px 120px; /* Reduced top padding from 90px to 40px */
}

.container {
    max-width: 1100px;
    min-width: 320px;
}

.header {
    margin-bottom: 90px;
    display: flex;
    flex-wrap: wrap;
}
    .header .logo, .header nav {
        flex-grow: 1;
    }
    .header nav {
        text-align: right;
        line-height: 1em;
    }
    .header .logo {
        font-weight: 500;
        font-size: 1.5em;
    }
    .header nav a {
        display: inline-block;
        margin-left: 30px;
        color: #ff3300;
    }
    .header nav .feed img {
        width: 16px;
        height: auto;
    }

.header .site-description nav {
    margin: 0;
    padding: 0;
    border: none;
    min-width: 50px;
    margin-left: 15px;
}

.header .site-description nav ul svg {
    max-height: 15px;
}

.section .section-header {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.slogan {
    margin: 0 0 60px 0;
    font-style: bold;
}

.photo {
    float: right;
    text-align: right;
}
    .photo img {
        border-radius: 100%;
        display: inline-block;
        max-width: 264px;
    }


.footer {
    text-align: center;
    font-size: 0.75em;
    color: #999;
    margin: 30px 0;
}
    .footer a {
        color: #666;
    }
    .footer a:hover {
        color: #ff3300;
    }

.big {
    margin-bottom: 45px;
}
.posts .title {
    margin: 0 0 15px 0;
}
.date {
    color: #666;
}
    .posts .post {
        margin-bottom: 45px;
    }

.tag-cloud {
    margin-top: 20px;
}

.tag-cloud a {
    margin-right: 15px;
}

.tags a {
    display: inline-block;
    border: 1px solid #333;
    border-radius: 3px;
    padding: 0px 6px;
    color: #333;
    line-height: 20px;
    font-size: 0.85em;
    text-decoration: none;
    margin: 0 10px 0 0;
}

.pagination {
    margin: 0;
    padding: 0;
    text-align: left;
    display: flex;
    justify-content: space-between;
}

.pagination li {
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 0;
}

.pagination .page-prev {
    margin-right: 20px;
    padding-right: 20px;
}

.pagination .page-item.page-prev {
    text-align: left;
}

.pagination .page-item.page-next {
    text-align: right;
}

@media (max-width: 940px) {
    .wrap {
        padding: 30px;
    }
    .posts {
        display: block;
    }
    .posts .post {
        margin-bottom: 60px;
    }
}
@media (max-width: 550px) {
    .header {
        display: block;
        margin-bottom: 45px;
    }
    .header .nav {
        margin-top: 30px;
        text-align: left;
    }
    .header .nav a {
        margin: 0 0 15px 0;
        display: block;
    }
    .slogan {
        text-align: center;
    }
    .photo {
        float: none;
        text-align: center;
    }
    .slideshow {
        margin: 0 -30px;
    }
    .float-right {
        float: none;
    }
        figure.float-right {
            margin: 15px 0;
        }

    ul {
        padding: 0;
    }
    .github li {
        display: block;
    }

    .projects li {
        display: block;
        margin-bottom: 3em;
    }
    .projects .thumb {
        text-align: left;
    }
    .projects .desc p {
        margin: 0;
    }
    .projects .status {
        display: block;
        margin-bottom: 15px;
    }
    .projects .tags {
        margin: 0;
    }

    .half {
        max-width: none;
    }
    .wrap {
        background: rgba(0, 0, 0, 0.95); /* More opaque on mobile for better readability */
    }
}

/* Philosophy Section Styles */
.philosophy-container {
  margin: 40px 0;
  background: #00000000;
  position: relative;
  overflow: hidden;
  padding: 20px 0;
  position: relative;
}

.philosophy-container::before {
  content: none;
}

.philosophy-title {
  text-align: left;
  font-size: 24px;
  margin-bottom: 30px;
  color: white;
  position: relative;
  display: block;
  left: 0;
  transform: none;
  z-index: 1;
}

.philosophy-title:after {
  display: none;
}

.quote-carousel {
  position: relative;
  height: 220px;
  margin: 0 auto;
  z-index: 1;
}

.quote-card {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.4s ease;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  z-index: 1;
}

.quote-card.active {
  opacity: 1;
  transform: translateX(0);
  z-index: 2;
}

.quote-content {
  text-align: left;
  max-width: 100%;
  padding: 0;
  background-color: transparent;
  box-shadow: none;
}

.quote-icon {
  font-size: 18px;
  color: #666;
  margin-bottom: 10px;
  display: none;
}

.quote-content p {
  font-size: 23px;
  line-height: 1.6em;
  color: #a1a1a1;
  margin-bottom: 5px;
}

.quote-author {
  font-style: italic;
  color: #666;
  text-align: right;
  margin: 10px 0 0;
  font-size: 18px;
}

.quote-nav {
  display: flex;
  justify-content: flex-start;
  margin-top: 20px;
  gap: 15px;
  position: relative;
  z-index: 2;
}

.prev-quote, .next-quote {
  background: transparent;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: all 0.2s ease;
  color: #666;
  font-size: 16px;
  padding: 0;
}

.prev-quote:hover, .next-quote:hover {
  transform: none;
  box-shadow: none;
  background: transparent;
  color: #a1a1a1;
  border-color: transparent;
}

.prev-quote:focus, .next-quote:focus {
  outline: none;
}

.fa-chevron-left, .fa-chevron-right {
  padding: 0;
  width: auto;
  font-size: 16px;
}

/* Mobile Optimization for Philosophy Section */
@media (max-width: 550px) {
  .philosophy-container {
    padding: 20px 10px;
  }
  
  .quote-carousel {
    height: 280px;
  }
  
  .quote-content p {
    font-size: 20px;
    line-height: 1.5em;
  }
  
  .quote-author {
    font-size: 16px;
  }
  
  .quote-nav {
    margin-top: 10px;
    gap: 20px;
    justify-content: center;
  }
}