.pageButtons:hover {
    position:relative;
    transition:0.3s;
    width:calc(14em + 10px);
    clip-path: polygon(100% 0, 100% 100%, 0% 100%, 10% 50%, 0% 0%);
}
.contactContainer {
    position:absolute;
    top:120px;
    align-self:center;
}
#contactHeader>h2 {
    font-size:min(max(16px, 2.5vmin), 24px);
    font-family:Marker;
}
#contactForm>form>* {
    margin-top:20px;
    font-family:BodyText;
}
.inputs {
    text-align:center;
    width:15em;
    height:2.5em;
}
#messagebox {
    width:24em;
    height:12em;
    text-align:left;
    padding-inline:1em;
    padding-block:1em;
    line-height:1.4em;
}

#separator {
    width:100%;
    border:none;
    height:1px;
    background-color:#000000;
    align-self:center;
}
#btnImg {
    position:relative;
    left:0.1em;
    width:40%;
    height:95%;
}
#subBtn p {
    font-size:1.5em;
    align-self:center;
    text-align:center;
    position:relative;
    padding-left:0.5em;
}
#subBtn:hover {
    width:11em;
    height:4.2em;
    transition:0.05s;
}
#subBtn:active {
    transition:0;
    width:10.4em;
    height:3.8em;
}
#subBtn {
    width:9.6em;
    height:3.2em;
    display:flex;
    flex-direction:row;
    justify-content:start;
}
#btn4 {
    width:calc(14em + 10px);
    background-color:#b3b02a;
    color:#5f3701;
    clip-path: polygon(100% 0, 100% 100%, 0% 100%, 10% 50%, 0% 0%);
    text-align:center;
}

/*
responsiivisuus
*/

@media only screen and (max-width:700px) {
    .contactContainer {
        align-self:initial;
        left:1em;
        min-height:calc(88vh - 185px);
        max-height:calc(88vh - 185px);
        overflow-y:scroll;
        width:100vw;
    }
    #btn4 {
        width:4em;
        height:12em;
        background-color:#b3b02a;
        color:#5f3701;
        clip-path: polygon(100% 0, 100% 100%, 50% 90%, 0 100%, 0% 0%);
        text-align:center;
    }
    .pageDiv {
        height:fit-content;
        width:100vw;
    }
    .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%);
    }
}
@media only screen and (min-width:701px) and (max-width: 1260px) {
    .contactContainer {
        align-self:flex-start;
        margin-left:2em;
    }
}
@media only screen and (min-width:1261px) {
    
}