@charset "utf-8";

/* portfolio */
html {
    scroll-behavior: smooth;
}

/* body */
body {
    font-size: 18px;
    color: skyblue;
    /* google font */
    font-family: "Kiwi Maru", serif;
    font-weight: 400;
    font-style: normal;
    /* font end */
    max-width: 100%;
    text-align: center;
    line-height: 1.8;
    /* margin: 0; */
}

img {
    max-width: 100%;
    height: auto;
}

/* 星設定 */
.stars {
    position: relative;
    width: 100%;
    /*height: 100vh; */
    /* background-image: linear-gradient(0deg, #ccac9f, #28305d, #050847); */
    /* 星空の背景色 */
    background: linear-gradient(0deg, #ccae9f 0%, #28305d 40%, #050847 80%) no-repeat #383d95;
    overflow: hidden;
    /* 星が枠外にはみ出すのを防ぐ */

    /* 星のスタイル */
    .star {
        position: absolute;
        display: block;
        background-color: #fff;
        /* 星の色 */
        border-radius: 50%;
        box-shadow: 0 0 4px 2px rgba(#fff, 0.2);
        /* 星の影 */
        opacity: 0;
        animation: twinkle 5s infinite;
    }
}

/* 星がキラキラ光るアニメーション */
@keyframes twinkle {
    0% {
        opacity: 0;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

/* header start */
header {
    h1 {
        margin-bottom: 30px;
    }

    >nav {
        background-color: #115d899e;
        /* 画面上に浮く */
        position: fixed;
        width: 100%;
        padding: 10px;

        >ul {
            display: flex;
            justify-content: space-between;
            max-width: 1080px;
            margin: auto;

            li:hover {
                /* googel font */
                font-family: "Rampart One", sans-serif;
                font-weight: 400;
                font-style: normal;
                /* ここまで */
                text-decoration: underline wavy;
                font-size: 37px;
                color: rgb(255, 255, 255);

            }
        }
    }
}

/* header end */

/* main start */
main {
    h2 {
        font-size: 35px;
        font-weight: bold;
        margin: 60px;

    }

    /* profile start */
    #profile {
        .profile-flex {
            display: flex;
            justify-content: space-between;
            border: 2px solid wheat;
            max-width: 1080px;
            margin: auto;

            >p {
                margin: 20px 0;
            }

            div {

                li,
                dd {
                    /* ddにデザインの時*/
                    display: list-item;
                    /* ddにデザインの時*/
                    list-style-type: disc;
                    margin-left: 20px;
                }
            }

            >ul,
            div {
                text-align: left;
                max-width: 270px;
                padding-right: 30px;

                .name,
                h3 {
                    text-align: center;
                    margin: 5px 0;
                    font-size: 25px;

                }

            }

        }
    }

    /* End */
    /* work start */
    #work {

        .works,
        .opus {
            display: grid;
            grid-template-columns: 1fr 1fr;
            max-width: 1080px;
            margin: auto;
            gap: 25px;
            text-align: left;
        }

        h3 {
            font-size: 25px;
            text-align: center;
            margin: 40px 0;
        }

        /* icon start */
        span {
            background-image: url(../image/icon-aries.png);
            background-repeat: no-repeat;
            background-position: left;
            padding-left: 60px;
            border-bottom: 2px double skyblue;

        }

        /* icon End */

        p {
            text-align: center;
        }

        h4 {
            font-size: 20px;

        }

        dd,
        li {
            display: list-item;
            list-style-type: circle;
            margin-left: 30px;
        }

        .works {

            section,
            dl {
                margin-left: 20px;

            }
        }

        .opus {
            padding: 60px;
            gap: 60px;

        }

        .groupBtn:hover {
            font-family: "Rampart One", sans-serif;
            font-weight: 400;
            text-decoration: underline double;
            color: #fff;
            font-size: 20px;
        }
    }

    /* End */
    /* skill start */
    #skill {
        div {
            display: grid;
            grid-template-columns: 29% 29% 29%;
            gap: 60px;
            max-width: 1080px;
            margin: auto;
            padding: 60px;

            img {
                margin-bottom: 20px;
            }

            dd {
                text-align: left;
                padding: 10px 30px;
            }

            /* font 色変え＆グラデーション */
            .font-color2 {
                display: inline-block;
                background: linear-gradient(0deg, #383d95 17%, skyblue 20%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                color: transparent;
            }

            /* end */
            .font-color {
                color: #383d95;
            }
        }

        section {
            color: #383d95;

            h4 {
                font-size: 20px;
                margin: 20px;
            }

            span {
                background-image: url(../image/icon-aries.png);
                background-repeat: no-repeat;
                background-position: left;
                padding-left: 60px;
                border-bottom: 2px double skyblue;
            }
        }
    }

    /* End */
    /* license start */
    .license {
        color: #383d95;
    }

    /* End */
    /* contack start */
    #contact {
        color: #383d95;

        .contact {
            max-width: 1040px;
            margin: auto;
            background-color: transparent;
            /* 透明 */
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            text-align: left;

            .input {
                background-color: rgba(255, 255, 255, 0);
                outline: none;
                border: 2px solid rgba(255, 255, 255, 0.2);
                border-radius: 4px;
                width: 960px;
                margin: auto;
            }

            h4,
            .btn {
                font-size: 20px;
                margin: 20px 30px;

            }

            .ex,
            .btn {
                text-align: center;
            }

            .btn {
                width: 80px;
                margin: 20px auto;
                border: 2px solid rgba(255, 255, 255, 0.2);
                border-radius: 20px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

            }

            .btn:hover {
                background-color: #fff;
                color: aqua;

            }

        }
    }

    /* End */
    /* last start */
    .last {
        color: #383d95;
        margin-bottom: 40px;
    }

    /* End */
    /* back top start */
    .top {
        position: fixed;
        right: 100px;
        bottom: 100px;
        border: 2px double skyblue;
        border-radius: 35%;
        width: 80px;
        height: 40px;
        font-size: 20px;
        font-style: italic;
        z-index: 10;
        animation: updown 2.5s ease-in-out infinite;
    }

    .top:hover {
        font-family: "Rampart One", sans-serif;
        font-weight: 400;
        font-style: italic;
        text-decoration: underline double;
        color: rgb(255, 255, 255);

        img {
            transform: scale(1.5);
        }
    }
}

/* icon 上下 animation */
@keyframes updown {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    /* 上に10px移動 */
    100% {
        transform: translateY(0);
    }
}

/* icon animation End */

footer {
    padding: 20px;
    color: #383d95;
}