/*
Theme Name: portfolio
Theme URI: https://cascade-path.com
Author: cascade-path
Version: 1.0
*/

/*あ*/

:root{
    color-scheme: dark;
    font-size: 20px;
    --base-color: #444;
    --main-color: #fff;
    --accent-color: #0bc;
}

body{
    margin: 0;
}

header{
    display: grid;
    gap: 1em;
}

.header_logo_l{
    height: 100px;
    width: 200px;
    background: #888;
}

nav{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
}
header nav{
    height: 2em;
}
nav a{
    position: relative;
    text-decoration: none;
    color: var(--main-color);
}
header a::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 100%;
    height: .2em;
    background: var(--accent-color);
    transition: .4s;
}
header a:hover::after{
    right: 0;
}

h1{
    margin: 0;
    padding: 1em;
    text-align: center;
    background: #eee;
    text-shadow: 0 0 .3em var(--accent-color);
}

main{
    background: red;
    color: var(--base-color);
}

main a{
    color: #00e;
}

.flex-item{
    display: grid;
    align-items: center;
    justify-content: center;
    padding: 3em 0;
    background: var(--main-color);
}
.flex-item>*{
    width: min(800px,90vw);
}

h2{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 2rem 0;
    background: var(--accent-color);
    color: var(--main-color);
}

h3{
    margin-top: 3em;
    border-left: solid 1em var(--accent-color);
    text-indent: .5em;
}

footer{
    margin-bottom: 200px;
}

.footer_copy{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5em;
}
footer nav{
    height: 4em;
}
footer nav a:hover{
    text-decoration: underline;
}

@media (max-width: 768px){
    :root{
        font-size: 15px;
    }
    header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        z-index: 10;
    }
    header .header_hamburger{
        display: flex;
    }
    nav{
        flex-direction: column;
    }
    header nav{
        display: none;
        position: fixed;
        inset: 0;
        height: 100vh;
        z-index: -1;
        background: rgba(0,0,0,.5);
        animation: nav-back .3s;
    }
    @keyframes nav-back{
        from{opacity: 0;}
    }
    header nav.active{
        display: flex;
    }
    header nav a:nth-child(1){--delay: 1;}
    header nav a:nth-child(2){--delay: 2;}
    header nav a:nth-child(3){--delay: 3;}
    header nav a:nth-child(4){--delay: 4;}

    header nav a{
        display: flex;
        width: 80vw;
        height: 3em;
        background: var(--accent-color);
        justify-content: center;
        align-items: center;
        border: solid var(--main-color);
        font-size: 1.5em;
        animation: nav-slide .3s calc(var(--delay) * .2s) both;
    }
    @keyframes nav-slide{
        from{translate: 120vw;}
    }

    footer nav{
        height: unset;
        gap: 1em;
        padding: 3em 0;
    }
}

.header_hamburger{
    display: none;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 3em;
    aspect-ratio: 1;
    cursor: pointer;
}
.header_hamburger::after,.header_hamburger::before{
    content: "";
    position: absolute;
    width: 2em;
    height: .1em;
    background: var(--main-color);
    transform-origin: center;
    transition: .5s;
}
.header_hamburger::after{
    transform: translateY(-.5em);
}
.header_hamburger::before{
    transform: translateY(.5em);
}

.header_hamburger.open::after{
    transform: rotate(45deg) translateY(0) scale(1.41,1);
}
.header_hamburger.open::before{
    transform: rotate(-45deg) translateY(0) scale(1.41,1);
}



@scope (#page_list){
    article{
        display: grid;
        gap: 2rem;
        margin: 1em;
    }
    article a{
        display: block;
        padding: 1em;
        border-radius: 1em;
        border: solid var(--accent-color) 3px;
        text-decoration: none;
        color: var(--base-color);
        box-shadow: 2px 2px .5em var(--base-color);
    }
    article a:has(img){
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 0 1rem;
    }
    article a img{
        grid-row: 1/3;
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
    }
}

@scope (#page_single){
    img{
        box-shadow: 0 0 15px var(--base-color);
    }
    p a[target="_blank"]{
        display: flex;
        width: min(300px,80%);
        height: 4rem;
        margin: 0 auto;
        align-items: center;
        justify-content: center;
        background: var(--accent-color);
        border-radius: .4rem;
        border: var(--accent-color) solid 3px;
        color: var(--main-color);
        font-size: 1.5em;
        text-decoration: none;
        box-shadow: 0 0 .2rem var(--base-color);
        transition: .3s;
    }
    p a[target="_blank"]:hover{
        background: var(--main-color);
        color: var(--accent-color);
    }
    p a[target="_blank"]::after{
        content: ">";
        margin-left: .3em;
        transition: .3s;
    }
    p a[target="_blank"]:hover::after{
        transform: translate(1em);
    }
    p a:not([target="_blank"]){}
}