@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Press+Start+2P&display=swap');

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

:root{
    --panel:rgba(18, 5, 5, .88);
    --panel-soft:rgba(30, 8, 8, .82);

    --border:#6f0d0d;

    --text:#f6dada;

    --title:#d31c1c;

    --accent:#ff2b2b;
}

body{
  padding:18px;
  font-family:"Share Tech Mono", monospace;

  background-image:url("images/Background.png");
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:center;
  background-attachment:fixed;

  color:var(--text);
  overflow-x:hidden;
}

.container{
  max-width:1450px;
  margin:auto;
  display:grid;
  grid-template-columns:250px 1fr 250px;
  gap:14px;
  align-items:start;
}

.left-sidebar,
.main-content,
.right-sidebar{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.box{
    background:var(--panel);
    border:1px solid var(--border);
    padding:14px;
    backdrop-filter:blur(8px);

    box-shadow:
        0 0 18px rgba(90,0,0,.35),
        inset 0 0 3px rgba(255,60,60,.12);
}

.mini-box{
    background:var(--panel-soft);
    border:1px solid #7d1b1b;
    padding:14px;
}

h1,h2,h3{
  color:var(--title);
  letter-spacing:1px;
}

h2,h3{
  margin-bottom:10px;
}

h1{
  font-family:"Press Start 2P", monospace;
  font-size:40px;
  line-height:1.5;
  text-align:center;
  margin-bottom:20px;

  color:#d91f26;

  text-shadow:
    2px 2px 0 rgba(255,255,255,.08),
    0 0 14px rgba(180,0,0,.6);

  padding-bottom:16px;
  border-bottom:1px solid rgba(120,0,0,.4);
}

p,a,span,li{
  font-size:14px;
  line-height:1.7;
  color:var(--text);
}

a{
  text-decoration:none;
  transition:.2s ease;
}

a:hover{
    color:#ff4545;
    transform:translateX(2px);
}

.left-sidebar a{
    display:block;
    text-align:center;
    padding:6px 0;
    border-bottom:1px solid rgba(140,30,30,.25);
}

img{
  display:block;
  max-width:100%;
}

.profile{
    width:100%;
    height:220px;
    object-fit:cover;
    border:1px solid #661111;
}

.banner{
    width:100%;
    height:auto;
    object-fit:contain;

    border:1px solid #661111;
}

.mood{
    width:100%;
    height:170px;
    object-fit:cover;
    border:1px solid #661111;
    margin-bottom:10px;
}

.blogpost{
    background:rgba(45,8,8,.55);
    border-left:3px solid #b41414;
    padding:12px;
    margin-bottom:14px;
    transition:.2s ease;
}

.blogpost:hover{
    background:rgba(60,10,10,.75);
    transform:translateY(-2px);
}

.blogpost{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}


.project-image{
    width:120px;
    height:70px;

    object-fit:cover;

    flex-shrink:0;

    border:1px solid #6f0d0d;

    transition:.25s ease;
}


.project-image:hover{
    transform:scale(1.05);

    border-color:#ff2b2b;

    box-shadow:
    0 0 15px rgba(255,30,30,.5);
}

.favorites-grid p{
    padding:14px 16px;
    background:rgba(55,12,12,.45);
    border:1px solid rgba(120,20,20,.55);
    border-radius:10px;
    line-height:1.8;
}

.favorites-grid p{
  padding:14px 16px;
  background:rgba(255,255,255,.25);
  border:1px solid rgba(170,185,215,.4);
  border-radius:10px;
  line-height:1.8;
}

.stamps-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
}

.stamp{
  width:160px;
  height:50px;

  object-fit:cover;
  image-rendering:pixelated;

  border-radius:3px;
  transition:.2s ease;
}

.stamp:hover{
  transform:scale(1.05);
}

.music-player{
    background:linear-gradient(
        180deg,
        rgba(35,5,5,.95),
        rgba(15,0,0,.95)
    );

    border:1px solid #661111;

    padding:12px;
    display:flex;
    flex-direction:column;
    gap:12px;
    overflow:hidden;
}

.music-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.track-wrapper{
  flex:1;
  overflow:hidden;
  position:relative;
  height:14px;
}

.track-name{
  display:flex;
  width:max-content;
  gap:40px;
  white-space:nowrap;
  animation:marquee 12s linear infinite;
}

.track-name span{
    font-size:11px;
    color:#ff8d8d;
}

@keyframes marquee{
  from{transform:translateX(0);}
  to{transform:translateX(calc(-50% - 20px));}
}

.music-controls{
  display:flex;
  gap:6px;
}

.player-btn{
    width:30px;
    height:30px;
    border:none;
    border-radius:7px;

    background:#641111;

    color:#ffe3e3;

    cursor:pointer;

    transition:.2s ease;
}

.player-btn:hover{
    background:#a31919;
}

.progress-container,
.volume-container{
  display:flex;
  align-items:center;
  gap:8px;
}

.time{
    width:34px;
    font-size:10px;
    color:#ffb2b2;
}

#progress-bar,
#volume-slider{

    appearance:none;

    width:100%;
    height:6px;

    border-radius:999px;

    background:linear-gradient(
        to right,

        #d21d1d 0%,
        #d21d1d 50%,

        rgba(90,0,0,.35) 50%,
        rgba(90,0,0,.35) 100%
    );

    cursor:pointer;
}

#progress-bar::-webkit-slider-thumb,
#volume-slider::-webkit-slider-thumb{

    appearance:none;

    width:14px;
    height:14px;

    border-radius:50%;

    background:#ffdede;

    border:2px solid #d61d1d;

    box-shadow:0 0 10px rgba(255,0,0,.5);

    cursor:pointer;
}

::-webkit-scrollbar-track{
    background:#220707;
}

::-webkit-scrollbar-thumb{
    background:#8d1111;
    border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
    background:#c51d1d;
}

@media(max-width:1000px){
  .container{
    grid-template-columns:1fr;
  }

  body{
    padding:10px;
  }

  h1{
    font-size:28px;
  }

  .banner{
    height:240px;
  }
}

.quote{
  width:100%;
  text-align:center;
  display:flex;
  justify-content:center;
  align-items:center;
}


ul{

    list-style:none;

    padding:12px;

    margin-top:12px;

    background:
    linear-gradient(
        180deg,
        rgba(45,8,8,.8),
        rgba(15,2,2,.9)
    );

    border:1px solid #6f1b1b;

    border-radius:6px;

    box-shadow:
        inset 0 0 15px rgba(255,0,0,.08),
        0 0 10px rgba(0,0,0,.5);

}


li{

    position:relative;

    padding:10px 10px 10px 22px;

    margin-bottom:8px;

    color:#f6dada;

    font-size:13px;

    line-height:1.6;

    border-bottom:1px dashed rgba(255,60,60,.2);

    transition:.25s ease;

}

li::before{

    content:">";

    position:absolute;

    left:5px;

    color:#ff2b2b;

    font-weight:bold;

}


li:last-child{

    border-bottom:none;

}


li:hover{

    background:rgba(255,30,30,.08);

    color:white;

    transform:translateX(5px);

    border-left:2px solid #ff2b2b;

}

.favorites-grid{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.favorites-grid img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border:1px solid var(--border);
  filter:saturate(0.9) contrast(1.05);
  transition:.2s ease;
}

.favorites-grid img:hover{
  transform:scale(1.06);
  filter:saturate(1.2) contrast(1.1);
}

.post-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:10px 0 14px 0;
  flex-wrap:wrap;
  gap:10px;
}

.tags{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.tag{
  font-size:10px;
  padding:3px 8px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.35);
  border-radius:999px;
  color:var(--text);
  transition:.2s ease;
}

.tag:hover{
  transform:translateY(-1px);
  border-color:var(--accent);
  color:var(--accent);
}

.rating{
  font-size:11px;
  color:var(--text);
  opacity:.9;
}

.tag-filter{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:14px;
}

.tag-btn{
  font-family:"JetBrains Mono", monospace;
  font-size:11px;
  padding:4px 10px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.35);
  cursor:pointer;
  transition:.2s ease;
  border-radius:999px;
}

.tag-btn:hover{
  border-color:var(--accent);
  color:var(--accent);
  transform:translateY(-1px);
}

.tag-btn.active{
  background:var(--accent);
  color:white;
  border-color:var(--accent);
}

.about-grid{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.pair{
    display:flex;
    gap:14px;
    align-items:stretch;
}

.pair p{
    flex:1;
    padding:12px;

    background:rgba(40,8,8,.55);

    border:1px solid rgba(120,20,20,.55);

    border-radius:10px;

    color:var(--text);

    box-shadow:
        inset 0 0 8px rgba(255,70,70,.05),
        0 0 10px rgba(0,0,0,.18);

    transition:.25s ease;
}

.pair p:hover{
    background:rgba(55,10,10,.72);
    border-color:#d61d1d;

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

    transform:translateY(-2px);
}

.pair img{
    width:180px;
    aspect-ratio:1/1;
    object-fit:cover;

    border:1px solid #6d1111;

    flex-shrink:0;

    transition:.25s ease;
}

.pair img:hover{
    border-color:#ff3b3b;

    box-shadow:
        0 0 18px rgba(255,40,40,.35);

    transform:scale(1.03);
}

.social-buttons{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:20px;
    flex-wrap:wrap;
}

.social-btn{
    width:50px;
    height:50px;
    border:1px solid #8b0000;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    background:rgba(20,0,0,0.5);
}

.social-btn img{
    width:30px;
    height:30px;
    object-fit:contain;
}

.social-btn:hover{

    background:linear-gradient(
        180deg,
        #8d1111,
        #560909
    );

    color:white;

    border-color:#ff3d3d;

    box-shadow:
        0 0 20px rgba(255,40,40,.55),
        0 0 35px rgba(150,0,0,.25);

    transform:
        translateY(-3px)
        scale(1.05);
}

.cursor-star{
    position:fixed;
    width:12px;
    height:12px;

    background:#ff2b2b;
    border-radius:50%;

    pointer-events:none;
    z-index:99999;

    box-shadow:
        0 0 10px #ff2b2b,
        0 0 25px rgba(255,40,40,.8),
        0 0 40px rgba(180,0,0,.5);

    animation:trailFade .8s forwards;
}

@keyframes trailFade{
    from{
        opacity:1;
        transform:scale(1);
    }

    to{
        opacity:0;
        transform:scale(0);
    }
}

.gallery-preview {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 15px;
}

.gallery-preview img {

    width: 100%;
    height: 140px;

    object-fit: cover;

    border-radius: 6px;

    border: 2px solid #6f1b1b;

    background: #120505;

    transition: 
        transform .25s ease,
        filter .25s ease,
        border-color .25s ease;

    cursor: pointer;

}

.gallery-preview img:hover {

    transform: scale(1.05);

    filter:
        brightness(1.2)
        drop-shadow(0 0 8px #ff3333);

    border-color: #ff3333;

}

.mini-box {

    background: rgba(18,5,5,.88);

    border: 1px solid #6f1b1b;

    box-shadow:
        0 0 10px rgba(255,0,0,.15),
        inset 0 0 20px rgba(255,0,0,.05);

    padding: 15px;
}

.lightbox {

    display:none;

    position:fixed;

    z-index:999;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.85);

    justify-content:center;
    align-items:center;

    backdrop-filter:blur(5px);

}

.lightbox img {

    max-width:85%;
    max-height:85%;

    border:3px solid #ff3333;

    box-shadow:
    0 0 25px #ff0000;

    border-radius:8px;

}

.close-lightbox {

    position:absolute;

    top:30px;
    right:45px;

    color:white;

    font-size:45px;

    font-weight:bold;

    cursor:pointer;

    transition:.2s;

}

.close-lightbox:hover {

    color:#ff3333;

    transform:scale(1.2);
}

.nav-buttons{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.nav-buttons a{

    display:block;

    background:rgba(120, 20, 20, 0.8);

    border:2px solid #ff4b4b;

    color:white;

    text-decoration:none;

    text-align:center;

    padding:12px;

    border-radius:8px;

    font-family:'JetBrains Mono', monospace;

    transition:.2s;

}

.nav-buttons a:hover{

    background:#ff4b4b;

    color:#120505;

    transform:translateX(5px);

    box-shadow:0 0 10px #ff4b4b;

}

.right-panel{

    background:var(--panel);

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

    padding:14px;

    display:flex;

    flex-direction:column;

    gap:0;

    backdrop-filter:blur(8px);

    box-shadow:
    0 0 18px rgba(90,0,0,.35),
    inset 0 0 3px rgba(255,60,60,.12);

}

.right-panel > div{

    padding:15px 0;

}

.right-panel > div:not(.social-buttons):not(:last-child){
    border-bottom:1px solid rgba(255,40,40,.25);
    margin-bottom:12px;
}

.commission-status{
    text-align:center;
    border:2px solid #8b3b3b;
}


.services-row{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    margin-top:25px;

}

.services-row .mini-box{

    padding:25px;
    height:100%;
    box-sizing:border-box;

}

.services-row h2{

    margin-bottom:15px;

}

.services-row p{

    line-height:1.6;
    margin-bottom:15px;

}

.services-row ul{

    margin:0;
    padding-left:20px;

}

.services-row li{

    margin-bottom:8px;

}


.info-box{

    margin-top:30px;
    padding:25px;

}

.info-box h2{

    margin-bottom:15px;

}

.info-box ul{

    margin:0;
    padding-left:20px;

}

.info-box li{

    margin-bottom:10px;

}

.price-title{

    margin-top:40px;
    margin-bottom:25px;
    text-align:center;

}


.prices{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;

}

.price-card{

    border:1px solid #8b3b3b;
    background:#180606;
    padding:25px;
    border-radius:8px;

}

.price-card h3{

    margin:0 0 20px;
    color:#ff4040;
    font-size:32px;
    text-align:center;

}

.price-card ul{

    list-style:none;
    margin:0;
    padding:0;

}

.price-card li{

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:20px;

    padding:16px 18px;

    border-bottom:1px dashed #6b2a2a;

}

.price-card li:last-child{

    border-bottom:none;

}

.price-card span{

    color:#f5f5f5;
    flex:1;
    line-height:1.4;

}

.price-card b{

    color:#ff6666;
    white-space:nowrap;
    font-size:18px;

}


.small-text{

    margin-top:30px;
    text-align:center;
    color:#c5a3a3;
    line-height:1.8;
    font-size:15px;

}

@media (max-width:1100px){
    .services-row{
        grid-template-columns:1fr;
    }
    .prices{
        grid-template-columns:1fr;
    }
}

.gallery-page{

    max-width:1500px;
    margin:0 auto;
    padding:35px;

}

.gallery-page h1{

    text-align:center;
    margin-bottom:15px;

}

.gallery-subtitle{

    text-align:center;
    color:#d9b5b5;
    max-width:900px;
    margin:0 auto 40px;
    font-size:18px;
    line-height:1.8;

}

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:22px;

}

.gallery-grid img{

    width:100%;
    height:260px;

    object-fit:cover;

    border:2px solid #6f1b1b;
    border-radius:8px;

    cursor:pointer;

    transition:.25s;

    background:#120505;

}

.gallery-grid img:hover{

    transform:scale(1.03);

    border-color:#ff4040;

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

}

.lightbox{

    display:none;

    position:fixed;

    inset:0;

    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,.92);

    z-index:9999;

}

.lightbox img{

    max-width:90%;
    max-height:90%;

    border:3px solid #ff3333;

    border-radius:10px;

    box-shadow:0 0 30px rgba(255,0,0,.5);

}

.close-lightbox{

    position:absolute;

    top:25px;
    right:40px;

    font-size:48px;

    color:white;

    cursor:pointer;

    transition:.2s;

}

.close-lightbox:hover{

    color:#ff4444;
    transform:scale(1.2);

}

.gallery-video{
    width:100%;
    aspect-ratio:16/9;
    border-radius:10px;
}


@media (max-width: 768px){

    body{
        padding:10px;
        background-size:auto 100%;
    }


    .container{

        display:flex;
        flex-direction:column;

        width:100%;
        gap:12px;

    }


    .left-sidebar,
    .main-content,
    .right-sidebar{

        width:100%;

    }


    .left-sidebar{
        order:2;
    }

    .main-content{
        order:1;
    }

    .right-sidebar{
        order:3;
    }



    .box,
    .mini-box,
    .right-panel{

        padding:12px;

    }



    h1{

        font-size:22px;
        line-height:1.6;

        word-break:break-word;

        margin-bottom:15px;

    }


    h2{

        font-size:18px;

    }


    h3{

        font-size:16px;

    }



    p,a,span,li{

        font-size:13px;

    }


    .profile{

        height:auto;
        aspect-ratio:1/1;

    }


    .banner{

        height:auto;

    }


    .mood{

        height:auto;
        aspect-ratio:16/9;

    }


    .blogpost{

        flex-direction:column;
        align-items:flex-start;

    }


    .project-image{

        width:100%;
        height:180px;

    }



    .favorites-grid{

        grid-template-columns:1fr;

    }



    .gallery-preview{

        grid-template-columns:1fr;

    }


    .gallery-preview img{

        height:220px;

    }


    .gallery-page{

        padding:15px;

    }


    .gallery-grid{

        grid-template-columns:1fr;

        gap:15px;

    }


    .gallery-grid img{

        height:auto;

        aspect-ratio:4/3;

    }


    .gallery-subtitle{

        font-size:14px;

        margin-bottom:25px;

    }



    .services-row{

        grid-template-columns:1fr;

        gap:15px;

    }


    .services-row .mini-box{

        padding:15px;

    }


    .prices{

        grid-template-columns:1fr;

    }


    .price-card{

        padding:15px;

    }


    .price-card h3{

        font-size:24px;

    }


    .price-card li{

        padding:12px 8px;

        flex-direction:column;

        align-items:flex-start;

        gap:5px;

    }


    .nav-buttons a{

        padding:10px;

        font-size:13px;

    }



    .social-btn{

        width:42px;
        height:42px;

    }


    .social-btn img{

        width:24px;
        height:24px;

    }


    .music-player{

        padding:10px;

    }


    .music-controls{

        justify-content:center;

    }



    .lightbox img{

        max-width:95%;
        max-height:80%;

    }


    .close-lightbox{

        top:10px;
        right:20px;

        font-size:35px;

    }


}