@charset "utf-8";

html { scroll-behavior: smooth;}

* {
    padding: 0;
    margin: 0;
}

@keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
}

body{
    max-width: 100%;
    height: 100vh;
    color: #fff;
    background: linear-gradient(45deg, #ff7414,#ff9043, #f4c19e);
    background-size: 600% 600%;
    animation: gradient 15s ease infinite;
    margin: 0 auto;
    
    .header{
        margin-top: 50px;
        .site-menu{
            display: flex;
            justify-content: flex-end;
            margin-right: 100px;
            ul{
                display: flex;
                list-style: none;
                width: 300px;
                font-size: 12px;
                justify-content: space-between;
                li{
                    a{
                        text-decoration: none;
                        color: #fff;
                    }
                    a:hover{
                        color: #787878;
                    }
                }
            }
        }
    }
    .main{
        width: 1000px;
        margin: 0 auto;
        a{
            text-decoration: none;
            color: #fff;
            .title{
                margin-top: 50px;
                h1{
                    font-family: "ethnocentric", sans-serif;
                    font-weight: 700;
                    font-style: normal;
                    font-size: 80px;
                }
                p{
                    font-family: "ethnocentric", sans-serif;
                    font-weight: 700;
                    font-style: normal;
                    font-size: 32px;
                }
            }
        }
        .about{
            margin-top: 130px;
            h2{
                font-family: "ethnocentric", sans-serif;
                font-weight: 700;
                font-style: normal;
                font-size: 48px;
            }
            .introduce{
                margin-top: 50px;
                display: flex;
                .introduce-text{
                    margin-left: 50px;
                    h3{
                        font-size: 32px;
                        font-weight: 400;
                    }
                    h4{
                        font-size: 16px;
                        font-weight: 400;
                        line-height: 2.4;
                    }
                }
            }
        }
        .skills{
            margin-top: 130px;
            h2{
                font-family: "ethnocentric", sans-serif;
                font-weight: 700;
                font-style: normal;
                font-size: 48px;
            }
            .skills-text{
                width: 850px;
                margin: 50px auto 0 auto;
                li{
                    margin-bottom: 70px;
                    list-style:none;
                    h3{
                        font-size: 24px;
                        font-weight: 700;
                    }
                    dl{
                        dt{
                            margin-top: 20px;
                            margin-bottom: 20px;
                        }
                        dd{
                            color: #787878;
                        }
                    }
                }
            }
        }
        #works{
            margin-top: 130px;
            h2{
                font-family: "ethnocentric", sans-serif;
                font-weight: 700;
                font-style: normal;
                font-size: 48px;
            }
            .works-contents{
                margin-top: 50px;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                li{
                    list-style: none;
                    margin-bottom: 50px;
                    a img{
                        filter:grayscale(100%);
                        overflow:hidden;
                    }
                    a img:hover{
                        filter:grayscale(0);
                        transform:scale(1.05);
                        transition:0.2s;
                    }
                    dl{
                        dt{
                            color: #787878;
                            font-size: 12px;
                            margin-top: 8px;
                        }
                        dd{
                            font-weight: 700;
                            margin-top: 8px;
                        }
                    }
                }
            }
        }
    }
    #footer{
        width: 100%;
        margin-top: 50px;
        padding: 50px 0;
        box-sizing: border-box;
        background-color: #43768B;
        .footer-contents{
            width: 1000px;
            margin: 0 auto;
            h2{
                font-family: "ethnocentric", sans-serif;
                font-weight: 700;
                font-style: normal;
                font-size: 48px;
            }
            .sns{
                margin-top: 50px;
                display: flex;
                
                a{
                    margin-right: 50px;
                    color: #fff;
                    display: block;
                    padding: 10px;
                    border: 3px solid #fff;
                    background: none;
                    text-decoration: none;
                }
                a:hover{
                    background-color: #fff;
                    color: #43768B;
                }
            }
        }
    }
}

@media(max-width: 800px){
    body{
        max-width: 100%;
        height: 100vh;
        color: #fff;
        background: linear-gradient(45deg, #ff7414,#ff9043, #f4c19e);
        background-size: 600% 600%;
        animation: gradient 15s ease infinite;
        margin: 0 auto;
        
        .header{
            margin-top: 50px;
            .site-menu{
                display: flex;
                justify-content: flex-end;
                margin-right: 20px;
                ul{
                    display: flex;
                    list-style: none;
                    width: 300px;
                    font-size: 12px;
                    justify-content: space-between;
                    li{
                        a{
                            text-decoration: none;
                            color: #fff;
                        }
                        a:hover{
                            color: #787878;
                        }
                    }
                }
            }
        }
        .main{
            width: 375px;
            margin: 0 auto;
            text-align: center;
            a{
                .title{
                    margin-top: 50px;
                    h1{
                        font-family: "ethnocentric", sans-serif;
                        font-weight: 700;
                        font-style: normal;
                        font-size: 32px;
                    }
                    p{
                        font-family: "ethnocentric", sans-serif;
                        font-weight: 700;
                        font-style: normal;
                        font-size: 16px;
                    }
                }
            }
            .about{
                margin-top: 80px;
                h2{
                    font-family: "ethnocentric", sans-serif;
                    font-weight: 700;
                    font-style: normal;
                    font-size: 30px;
                }
                .introduce{
                    width: 300px;
                    margin-top: 50px;
                    /* display: flex; */
                    display: block;
                    text-align: center;
                    img{
                        width: 200px;
                        height: 200px;
                        margin-left: 50px;
                    }
                    .introduce-text{
                        /* margin-left: 50px; */
                        h3{
                            font-size: 32px;
                            font-weight: 400;
                        }
                        h4{
                            font-size: 16px;
                            font-weight: 400;
                            line-height: 2.4;
                        }
                    }
                }
            }
            .skills{
                margin-top: 80px;
                h2{
                    font-family: "ethnocentric", sans-serif;
                    font-weight: 700;
                    font-style: normal;
                    font-size: 30px;
                }
                .skills-text{
                    width: 300px;
                    margin: 50px auto 0 auto;
                    li{
                        margin-bottom: 70px;
                        list-style:none;
                        h3{
                            font-size: 24px;
                            font-weight: 700;
                        }
                        dl{
                            dt{
                                margin-top: 20px;
                                margin-bottom: 20px;
                            }
                            dd{
                                color: #787878;
                            }
                        }
                    }
                }
            }
            #works{
                margin-top: 80px;
                width: 300px;
                h2{
                    font-family: "ethnocentric", sans-serif;
                    font-weight: 700;
                    font-style: normal;
                    font-size: 30px;
                }
                .works-contents{
                    margin-top: 50px;
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    li{
                        list-style: none;
                        margin-bottom: 50px;
                        a img{
                            filter:grayscale(100%);
                            overflow:hidden;
                            scale: 0.7;
                        }
                        a img:hover{
                            filter:grayscale(0);
                            transform:scale(1.05);
                            transition:0.2s;
                        }
                        dl{
                            dt{
                                color: #787878;
                                font-size: 12px;
                                margin-top: 8px;
                            }
                            dd{
                                font-weight: 700;
                                margin-top: 8px;
                            }
                        }
                    }
                }
            }
        }
        #footer{
            width: 100%;
            margin-top: 50px;
            padding: 50px 0;
            box-sizing: border-box;
            background-color: #43768B;
            text-align: center;
            .footer-contents{
                width: 300px;
                margin: 0 auto;
                text-align: center;
                h2{
                    font-family: "ethnocentric", sans-serif;
                    font-weight: 700;
                    font-style: normal;
                    font-size: 30px;
                }
                .sns{
                    margin-top: 50px;
                    display: block;
                    a{
                        text-align: center;
                        margin-top: 10px;
                        margin-left: 40px;
                        font-size: 10px;
                        color: #fff;
                        display: block;
                        padding: 5px;
                        border: 3px solid #fff;
                        background: none;
                        text-decoration: none;
                        
                    }
                    a:hover{
                        background-color: #fff;
                        color: #43768B;
                    }
                }
            }
        }
    }
}