:root{
    --blue: #2b2be8;
    --purple: #8f5dff;
    --pink: #ff66d9;
    --yellow: #ffd83b;
}

body{
    background: #1c1694;
    font-family: 
        "MS PGothic",
        "Meiryo",
        sans-serif;
    margin: 0;
}

.wrapper{
    border: 3px solid #000;
    background: #cfd0d5;
}

/* HEADER */

.topbar{
    background: 
        linear-gradient(
            180deg,
            #1616a8,
            #3c2fff
        );
    border-bottom: 3px solid #000;
    padding: 8px;
}

.logo{
    color: #ffd83b;
    font-size: 42px;
    font-weight: 900;
    text-shadow: 
        2px 2px #000,
        0 0 10px #ff7cf8;
}

.search{
    height: 48px;
    border: 3px solid #000;
}

.icon-btn{
    height: 56px;
    border: 2px solid #000;
    background: 
        linear-gradient(
            #5c5cff,
            #2f2fff
        );
    color: white;
    font-weight: bold;
}

.icon-btn a{
    color: white;
    text-decoration: none;
}

.promo-row{
    display: flex;
    gap: 6px;
    background: #08082b;
    padding: 4px;
    border-bottom: 3px solid #000;
}

.promo{
    flex: 1;
    color: #ffd83b;
    font-weight: bold;
    text-align: center;
    padding: 8px;
    border-top: 2px solid #ffd83b;
    border-left: 2px solid #ffd83b;
    border-bottom: 2px solid #8b7109;
    border-right: 2px solid #8b7109;
    border-radius:  3px;
    background: 
        linear-gradient(
            #343434,
            #111   
        );

}
.promo a {
    color: #ffd83b;
    text-decoration:  none;
}
.promo:hover {
    background: 
        linear-gradient(
            #111,
            #343434
        );
}

/* PANELS */

.panel{
    border: 2px solid #555;
    background: #efefef;
    margin-bottom: 10px;
}

.panel-title{
    font-family:  Verdana, Geneva, Tahoma, sans-serif;
    background: 
        linear-gradient(
            90deg,
            #7f7fff,
            #d7b3ff
        );

    border-bottom: 2px solid #555;
    padding: 6px 10px;
    font-weight: bold;
}


.panel-body{
    padding: 10px;
}

/* SIDEBAR */

.side-link{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px;
    border-bottom: 1px solid #ddd;
}

.badge-pink{
    background: #ff93cf;
}

.badge-yellow{
    background: #ffe167;
}

.badge-green{
    background: #8cff93;
}

.badge-blue{
    background: #8fd8ff;
}

/* REPO HEADER */


.repo-header{
    border: 2px solid #000;
    margin-bottom: 10px;
}

.repo-title{
    background: 
        linear-gradient(
            90deg,
            #2f2fff,
            #7f5eff
        );

    color: white;
    padding: 10px;
    font-size: 30px;
    font-weight: 900;
}

.repo-meta{
    background: white;
    padding: 8px;
    border-top: 2px solid #000;
}

.repo-warning{
    background: #ffe2a3;
    border-top: 2px solid #000;
    padding: 8px;
    font-weight: bold;
}

/* TABS */

.panel-retro-tabs{
    background: #a3a3e1;
    border: 2px solid #a36eff;
}
.retro-tabs-header{
    display: block;
    border: 1px solid #513276;
    background: 
        linear-gradient(
            #ef9ea7,
            #f281bf
        );
    border-radius: 3px;
    margin: 2px;
    font-size: 1.4rem;
    padding:  5px;
        box-shadow: 
        inset 0 1px 0 #fff,
        inset 0 -1px 0 rgba(0,0,0,.15),
        0 0 0 1px #dcb2cb,
        1px 1px 3px rgba(0,0,0,.35);
}

.retro-tabs-header h3{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display:  inline;
    font-size: 1.3rem;
    font-weight: 700;
    text-shadow: 0px 0px 3px #f4e872;
}

.retro-tabs{
    display: flex;
    list-style: none;
    padding: 0;
    margin: 2px;
}

.retro-tabs li{
    border: 2px solid #a36eff;
    border-radius: 5px;
    background: #f3d6ff;
    padding: 8px 14px;
    margin-right: 2px;
}

.retro-tabs-content {
    background-color: #fff7d7;
}

.retro-tabs .active{
    background: #ffe269;
}

/* IMAGE PLACEHOLDER */

.retro-image{
    min-height: 120px;

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

    background: 
      repeating-linear-gradient(
        45deg,
        #39ff65,
        #39ff65 10px,
        #6cff88 10px,
        #6cff88 20px
      );

    border: 3px solid #000;

    font-weight: bold;

    box-shadow: 
        inset 0 0 0 2px #baffc4,
        3px 3px 0 #000;
}

/* BUTTONS */
.btn-pink{
    background-color: #ec8ac3;
    border:  1px solid #6a344e;
    color: #333;
}
.btn-pink-strong{
    background-color: #ce019c;
}
.btn-yellow{
    background-color: #f8d710;
}
.big-button{
    background: 
        linear-gradient(
            #ff4fe0,
            #ff00b3
        );

    border: 3px solid #000;
    color: white;
    font-size: 24px;
    font-weight: 900;
    padding: 10px;
}
.jp-button {
    display:  inline-flex;
    align-items:  center;
    gap:  12px;
    border-radius:  4px;

    height:  45px;
    padding:  0 18px;

    font-family:  "MS PGothic", "Yu Gothic", sans-serif;
    font-size:  16px;
    font-weight:  bold;
    color:  #1f1f1f;

    background:  linear-gradient(
        to bottom,
        #ffd4f1 0%,
        #f8a8dd 35%,
        #f282be 100%
    );

    border:  1px solid #8f3b72;

    box-shadow: 
        inset 0 1px 0 #fff,
        inset 0 -1px 0 rgba(0,0,0,.15),
        0 0 0 1px #dcb2cb,
        1px 1px 3px rgba(0,0,0,.35);

    user-select:  none;
}

.jp-button:hover {
    filter:  brightness(1.05);
}

.jp-button:active {
    transform:  translateY(1px);
}

.jp-button .icon {
    font-size:  22px;
    line-height:  1;
    text-shadow:  1px 1px 0 rgba(255,255,255,.6);
}

.jp-button span:last-child {
    text-shadow:  1px 1px 0 rgba(255,255,255,.35);
}
/* COOKIE BANNER */

.cookie-banner{
    background: 
      linear-gradient(
        135deg,
        #1200ff,
        #4b00ff,
        #8600ff
      );

    color: white;

    border: 3px solid #000;
    min-height: 220px;
    padding: 15px;
}

.cookie-buttons{
    display: flex;
    gap: 10px;
}

.cookie-buttons button{
    flex: 1;
    font-weight: bold;
}

/* FOOTER */

.status-1{
    background: #02022c;
    color: #00ff3c;
    padding: 6px 10px;
    border-top: 3px solid #000;
}

.status-2{
    background: 
      linear-gradient(
        90deg,
        #1800a0,
        #3f00ff
      );

    color: white;

    padding: 8px;
    border-top: 2px solid #000;
}
.hero-image{

    min-height: 350px;

    margin-top: 10px;

    font-size: 2rem;

    font-weight: bold;

}

.post-content{

    font-size: 18px;

    line-height: 1.9;

}

.post-content h2{

    color: #3b27ff;

    margin-top: 40px;

    border-bottom: 3px dotted #ff77db;

    padding-bottom: 8px;

}

.post-content img{

    max-width: 100%;

    height: auto;

}

.post-content blockquote{

    background: #fff5bf;

    border-left: 6px solid #ff7fd5;

    padding: 15px;

}

.post-content pre{

    background: #222;

    color: #fff;

    padding: 15px;

    overflow: auto;

}

.post-content table{

    width: 100%;

    border-collapse: collapse;

}

.post-content td,
.post-content th{

    border: 1px solid #999;
    padding: 10px;
    
}

.project-card{


    background: #fff;
    height: 100%;
    overflow: hidden;

}

.project-image{

    /*aspect-ratio:  1 / 1;*/
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #eee;

}

.project-image img{

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    display: block;

}

.project-body{

    padding: 15px;

}

.project-body h3{

    font-size: 1.1rem;
    margin: 0;

}

/* BLOG */
.blog-main-title{

    font-size: 3rem;
    font-weight: 900;
    color: #2f24ff;

}

.blog-intro{

    font-size: 1.2rem;

}

.stats-box{

    border: 4px solid #000;
    background: #fff79d;
    padding: 20px;

}

.stats-box div{

    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;

}

.featured-post{

    border: 4px solid #000;
    background: #ff95e8;
    padding: 20px;

}

.featured-label{

    display: inline-block;
    background: #fff;
    border: 3px solid #000;
    padding: 4px 10px;
    margin-bottom: 10px;
    font-weight: bold;

}

.post-card{

    border: 2px solid #000;
    background: #fff;
    margin-bottom: 20px;
    transition: .2s;

}

.post-card:hover{

    transform: translate(-3px,-3px);

}

.post-card-body{

    padding: 15px;

}

.post-card h3{

    font-size: 1.4rem;
    margin-top: 10px;

}

.post-card a{

    color: #2f24ff;
    text-decoration: none;

}

.post-date{

    font-size: .8rem;
    font-weight: bold;
    color: #777;

}

.category-item{

    display: flex;
    justify-content: space-between;
    text-decoration: none;
    padding: 8px;
    margin-bottom: 5px;
    border: 2px solid #000;
    background: #c8ff97;
    color: #000;

}

.tag{

    display: inline-block;
    border: 1px solid #255e71;
    background: #79ddec;
    padding: 5px 10px;
    margin: 3px;
    border-radius:  4px;

}

.retro-pagination{

    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
    margin-bottom: 40px;

}

.retro-pagination a{

    border: 2px solid #a36eff;
    background: #f3d6ff;
    padding: 10px 15px;
    text-decoration: none;
    color: #000;
    

}
.retro-pagination a:hover{
    background-color:  #fff7d7;
}

.retro-pagination .active{

    background: #ffe269;

}
.retro-box {
    background-color: #989fa9;
}


#backToTop{

    position: fixed;

    right: 20px;
    bottom: 20px;

    width: 70px;
    height: 70px;

    border: 4px solid #000;

    background: #ff5bd6;

    color: #000;

    text-decoration: none;

    font-weight: bold;

    font-size: 14px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    z-index: 9999;

    box-shadow: 6px 6px 0 #000;

    transition: .2s;

}

#backToTop:hover{

    background: #fff54d;

    transform: translate(-2px,-2px);

    box-shadow: 8px 8px 0 #000;

}

#backToTop.hidden{

    opacity: 0;
    pointer-events: none;

}