.pageButtons:hover {
    position:relative;
    transition:0.3s;
    width:calc(14em + 10px);
    clip-path: polygon(100% 0, 100% 100%, 0% 100%, 10% 50%, 0% 0%);
}

#btn3 {
    width:calc(14em + 10px);
    background-color:#a54343;
    color:#571b1b;
    clip-path: polygon(100% 0, 100% 100%, 0% 100%, 10% 50%, 0% 0%);
    text-align:center;
}

.artContainer {
    height:100vh;
    width:calc(100vw - 200px);

    padding-top:130px;
}

.artSection {
    height:300px;
}

/*
responsiivisuus
*/

@media only screen and (max-width:700px) {
    #btn3 {
        width:4em;
        height:12em;
        background-color:#a54343;
        color:#571b1b;
        clip-path: polygon(100% 0, 100% 100%, 50% 90%, 0 100%, 0% 0%);
        text-align:center;
    }
    .pageButtons:hover {
        position:relative;
        transition:0.3s;
        width:4em;
        height:12em;
        clip-path: polygon(100% 0, 100% 100%, 50% 90%, 0 100%, 0% 0%);
    }
    .pageButtons {
        width:4em;
        height:10em;
        align-content:center;
        text-align:center;
        border-right-width:0;
        border-top-width:1em;
        clip-path: polygon(100% 0, 100% 100%, 50% 90%, 0 100%, 0% 0%);
    }

    .artContainer {
        height:calc(100vh - min(calc(12vh + 60px), 150px));
        width:100vw;

        padding-top: 40px;

        overflow-y: scroll;
    }
}
@media only screen and (min-width:701px) and (max-width: 1260px) {

}
@media only screen and (min-width:1261px) {
    
}