/*
Theme Name: Shinji Theme
Author: Shinji
Version: 1.0
Description: Portfolio Theme
*/

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

body{

    background:#0d1117;

    color:#fff;

    font-family:sans-serif;

    line-height:1.7;

    overflow-x:hidden;

    position:relative;
}

#bg-canvas{

    position:fixed;

    top:0;
    left:0;

    width:100vw;
    height:100vh;

    z-index:-1;

    pointer-events:none;

    background:
        linear-gradient(
            135deg,
            #0d1117 0%,
            #111827 50%,
            #0d1117 100%
        );
}

main{
    position:relative;
    z-index:10;
}

section{
    padding:60px 10%;
}

h2{

    font-size:40px;

    margin-bottom:40px;
}

a{

    color:#58a6ff;

    text-decoration:none;
}

/* Header */



.site-header{

    position:fixed;

    top:20px;

    left:0;

    width:100%;

    z-index:999;

    display:flex;

    justify-content:center;
}

.header-inner{

    width:fit-content;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:15px 40px;

    background:#ffffff;

    border-radius:50px;

    border:1px solid #ddd;

    box-shadow:
        0 0 20px rgba(0,0,0,0.1);
}

.nav{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:40px;
}

.nav a{

    color:#000 !important;

    font-weight:bold;

    transition:0.3s;
}
.site-header .logo{

    color:#000 !important;
}

.site-header .nav a{

    color:#000 !important;
}

/* Hero */

.hero{

    min-height:60vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding-top:140px;

    padding-bottom:60px;
}

.hero-title{

    font-size:80px;

    margin:20px 0;
}

.hero-sub{

    color:#58a6ff;

    letter-spacing:3px;
}

.hero-text{

    font-size:20px;

    opacity:0.8;
}

/* Skills */

.skill-note{

    margin-bottom:30px;

    color:#58a6ff;
}

.skill-grid{

    display:grid;

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

    gap:20px;
}

.skill-card{

    background:rgba(22,27,34,0.7);

    border:1px solid #30363d;

    padding:25px;

    border-radius:15px;

    backdrop-filter:blur(10px);

    transition:0.3s;

    text-align:center;
}

.skill-card:hover{

    transform:translateY(-8px);

    border-color:#58a6ff;

    box-shadow:0 0 20px rgba(88,166,255,0.3);
}

.skill-card h3{

    margin-bottom:15px;

    font-size:22px;
}

.skill-card p{

    font-size:24px;

    letter-spacing:4px;

    color:#58a6ff;
}

/* Works */

.works-grid{

    display:grid;

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

    gap:30px;
}

.work-card{

    background:rgba(22,27,34,0.7);

    padding:30px;

    border-radius:20px;

    backdrop-filter:blur(10px);

    transition:0.3s;
}

.work-card:hover{

    transform:translateY(-10px);
}

/* Updates */

.update-item{

    margin-bottom:15px;

    border-bottom:1px solid #333;

    padding-bottom:10px;
}

.update-date{

    margin-right:15px;

    color:#58a6ff;
}

/* Fade Animation */

.fade{
    opacity:1;
    transform:none;
}

.fade.show{

    opacity:1;

    transform:translateY(0);
}

.site-footer{

    background:#ffffff;

    color:#000;

    text-align:center;

    padding:30px;

    margin-top:100px;

    border-top:1px solid #ddd;
}

/* ボタン全体 */
#page_top {
width: 100px;
height: 100px;
position: fixed;
right: 10px;
bottom: 10px;
background: #e25407;
opacity: 0.6;
}

/* Font Awesome */
#page_top::before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f0d8';
font-size: 50px;
color: #ffffff;
position: absolute;
top: 46%;
left: 50%;
translate: -50%;

}

#page_top::after {
content: 'PAGE TOP';
font-size: 13px;
color: #fff;
position: absolute;
margin: auto;
text-align: center;
width: 100%;
top: 30%;
left: 50%;
translate: -50%;

}
.certifications{

    padding:80px 10%;
}

.cert-list{

    display:flex;

    flex-direction:column;

    gap:20px;

    margin-top:30px;
}

.cert-item{

    background:rgba(22,27,34,0.7);

    border:1px solid #30363d;

    padding:20px 30px;

    border-radius:15px;

    font-size:22px;

    backdrop-filter:blur(10px);

    transition:0.3s;
}

.cert-item:hover{

    transform:translateX(10px);

    border-color:#58a6ff;

    box-shadow:
        0 0 20px rgba(88,166,255,0.2);
}
body.home::before,opacity:1;
body.front-page::before{

    content:"";

    position:fixed;

    top:0;
    left:0;

    width:200%;
    height:200%;

    z-index:-2;

    background-image:

        linear-gradient(
            rgba(88,166,255,0.07) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(88,166,255,0.07) 1px,
            transparent 1px
        );

    background-size:60px 60px;

    animation:
        gridMove 20s linear infinite;

    transform:rotate(-12deg);
}
.infra-list{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-top:30px;
}

.infra-item{

    background:rgba(22,27,34,0.7);

    border:1px solid #30363d;

    padding:15px 25px;

    border-radius:12px;

    font-size:20px;

    backdrop-filter:blur(10px);

    transition:0.3s;
}

.infra-item:hover{

    transform:translateY(-5px);

    border-color:#58a6ff;

    box-shadow:
        0 0 15px rgba(88,166,255,0.2);
}