@charset "UTF-8";

html {
    font-size: 100%;
}

.wrapper {
    max-width: calc(1080px + 36px);
    padding:0 18px;
    margin: 0 auto;
}

li{
    list-style:none;
}

h2 {
    text-align: center;
    font-size: 1.875rem;
    margin-bottom: 50px;
}

h2::after{
    content:"";
    display:block;
    width:80px;
    height:10px;
    background-color:#e5e5e5;
    margin:0 auto;
}

.hero-name::after {
    content: none;
}

.hero {
    height: 100vh;
    background-image: url(../img/baseball.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    margin-bottom: 80px;
}

h1 {
    display: inline-block;
    background-color: black;
    padding: 10px 20px;
    color: aliceblue;
}

.header{
    z-index: 1;
    position:absolute;
    top:20px;
    width:100%;
}

.header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header ul {
    display: flex;
    gap: 40px;
}

.header li {
    color: aliceblue;
}

.portfolioInfo {
    max-width: 500px;
    position: absolute;
    top: 50vh;
    right: 10%;
}

.hero-name {
    color: aliceblue;
    margin-bottom: 20px;
    font-size: 2.7rem;
}

.portfolioInfo p {
    color: aliceblue;
    font-weight: bold;
    margin-bottom: 20px;
}

.title {
    font-size: 1.875rem;
}

.btn {
    color: aliceblue;
    display: inline-block;
    padding: 10px 40px;
    background-color: black;
    border-radius: 8px;
}

.about {
    margin-bottom: 80px;
}

.about-content {
    display: flex;
    max-width: 700px;
    margin: 0 auto;
    gap: 40px;
}

.my-image {
    width: 200px;
    height: 200px;
    flex-shrink: 0;
}

.my-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

dl {
    display: flex;
    flex-wrap: wrap;
}

dt {
    width: 20%;
}

dd {
    width: 80%;
}

.skills{
    margin-bottom:80px;
}

.skill-content {
    display: flex;
    gap:40px;
    align-items: center;
}

.skill-item{
    width:25%;
}

.skill-image {
    width: 100px;
    height: 100px;
    margin:0 auto;
}

h3 {
    text-align: center;
    margin-bottom:10px;
}

.skill-content p {
    text-align: center;
}

.works{
    margin-bottom:80px;
}

.works-content{
    display:flex;
    gap:30px;
}

.works-card{
    width:340px;
    border:1px solid #ccc;
    line-break:strict;
    border-radius:8px;
    overflow: hidden;
}

.works-image{
    width:340px;
    height:200px;
}

.works-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.works-text{
    max-width:330px;
    padding:10px;
}

.button{
    text-align:right;
}

.works a{
    display:inline-block;
    border:1px solid black;
    border-radius:8px;
    padding:5px 10px;
}

.learning{
    margin-bottom:80px;
}

.learning-content{
    display:flex;
    gap:20px;
    align-items:center;
    background-color:#f5f5f5;;
    padding:20px;
}

.book-image{
    width:100px;
    height:100px;
}

.now-learning{
    font-weight:bold;
}

.contact{
    margin-bottom:80px;
}
.contact p{
    text-align:center;
    margin-bottom:30px;
}

.contact a {
    display: block;
    width: fit-content;
    margin: 0 auto;
}

.instagram-link{
    display:block;
    width:60px;
    height:60px;
}

.instagram-link img{
    width:100%;
    height:100%;
}

.footer {
    padding: 40px 0;
    text-align: center;
    border-top: 1px solid #e5e5e5;
}

.footer p {
    font-size: 0.875rem;
    color: #666;
}

@media screen and (max-width:768px){

    h1 {
    display: inline-block;
    background-color: black;
    padding: 10px 20px;
    color: aliceblue;
    font-size:0.875rem;
    white-space: nowrap;
}

    .hero{
        height:85vh;
    }

    .portfolioInfo{
        top:40vh;
    }

    .about-content{
        flex-direction: column;
    }

    .my-image{
        margin:0 auto;
    }

    dt{
        width:25%;
        margin-bottom:5px;
    }

    dd{
        width:75%;
        margin-bottom:5px;
    }

    .skill-content{
        flex-wrap:wrap;
    }

    .skill-item{
        width: calc((100% - 40px) / 2);
    }

    .works-content{
        flex-direction: column;
    }

    .works-card{
        margin:0 auto;
    }



}