body {
    background-color: #000;
    color:whitesmoke;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Meiryo", "Yu Gothic", sans-serif;
    font-size: 4.375vw;
    line-height: 1.7;
    letter-spacing: 0.1em;
}

a {
    color:whitesmoke;
}

a:hover {
    color:white;
}

h1 {
    text-decoration: underline;
}

h1#title {
    text-decoration: none;
}

header {
    margin-top: 100px;
    text-align: center;
}

footer {
    text-align: center;
    height: 100px;
}

section {
    margin-top: 100px;
    margin-bottom: 100px;
}

#wrapper {
    margin: 0 auto;
}

#title {
    font-family: "Murecho", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 48px;
    letter-spacing: 0.4em;
}

article > div > img {
    border: 1px whitesmoke solid;
}

@media screen and (min-width: 601px) {
    body {
        font-size: 18px;
    }

    h1 {
        font-size: 28px;
    }

    h2 {
        font-size: 20px;
    }

    #wrapper {
        width: 980px;
    }

    .works > div {
        display: flex;
        flex-wrap: wrap;
    }

    article {
        width: 450px;
        margin-right: 40px;
        margin-top: 20px;
    }
}

@media screen and (max-width: 599px) {
    body {
        font-size: 4.375vw;
    }

    #title {
        font-size: 8.0vw;

    }

    h1 {
        font-size: 6.0vw;
    }

    h2 {
        font-size: 5.0vw;
    }

    article {
        margin-top: 50px;
    }

    article > div > img {
        width: 90vw;
    }
}