@charset "utf-8";

main {
    margin-left: 5%;
}

.works-list {
    margin-left: 3%;
    font-family: "Arial","serif","sans-serif";
    font-size: 24px;
}

.container {
    padding-top: 50px;
}

.works-list img {
    width: 85%;
    border: solid 1px gray;
    padding: 5px;
}

.works-list img:hover {
    opacity: 0.7;
}

.explanation {
    font-size: 18px
}

@media screen and (max-width: 1080px) {
    .works-list {
        margin-left: 3%;
        font-size: 2.5vw;
    }
    
    .container {
        padding-top: 30px;
    }
    
    .works-list img {
        width: 80vw;
        border: solid 1px gray;
        padding: 5px;
    }
    
    .works-list img:hover {
        opacity: 0.7;
    }
    
    .explanation {
        font-size: 1.7vw;
    }
    
    .container {
        padding-top: 5vw;
    }
}