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

.trySpan {
    position:absolute; 
    width:100%;
    height:100%;
    top:0;
    left: 0;

    z-index: 1;
}

#separator {
    width:520px;
    border:none;
    height:2px;
    background-color:rgb(177, 122, 51);
    border-radius:12px;
    align-self:center;
}

.chooseTexts {
    width:20em;
}

.contentDiv {
    gap:15px;
}

#personal {
    position:relative;
    width:24em;
    height:fit-content;
    background-color:burlywood;
    transition: 0.2s;
    display:flex;
    justify-content:center;
}

#personal:hover {
    width:min(65vw, 34em);
}

#coop {
    position:relative;
    width:24em;
    height:fit-content;
    background-color:burlywood;
    transition:0.2s;
    display:flex;
    justify-content:center;
}

#coop:hover {
    width:min(65vw, 34em);
}

.contentDiv > * {
    font-family: BodyText;
    font-size:18px;
}

.contentDiv > * > h2 {
    font-size:min(max(20px, 3vmin), 28px);
    font-weight: bold;
    line-height:3em;
}

#btn2 {
    width:calc(14em + 10px);
    background-color:#349aac;
    color:#1a444e;
    clip-path: polygon(100% 0, 100% 100%, 0% 100%, 10% 50%, 0% 0%);
    text-align:center;
}

/*
responsiivisuus
*/

@media only screen and (max-width:700px) {
    .contentDiv {
        left:0;
    }
    #personal {
        align-self:center;
        width:20em;
        height:fit-content;
        background-color:burlywood;
        transition: 0.2s;
        display:flex;
        justify-content:center;
    }
    #personal:hover {
        width:85vw;
    }
    #coop {
        align-self:center;
        width:20em;
        height:fit-content;
        background-color:burlywood;
        transition:0.2s;
        display:flex;
        justify-content:center;
    }
    #coop:hover {
        width:85vw;
    }
    .chooseTexts {
        width:15em;
    }
    #separator {
        width:300px;
        border:none;
        height:2px;
        background-color:rgb(177, 122, 51);
        border-radius:12px;
    }
    #btn2 {
        width:4em;
        height:12em;
        background-color:#349aac;
        color:#1a444e;
        clip-path: polygon(100% 0, 100% 100%, 50% 90%, 0 100%, 0% 0%);
        text-align:center;
    }
    .pageDiv {
        height:inherit;
        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) {
    #separator {
        align-self:initial;
        width:360px;
        border:none;
        height:2px;
        background-color:rgb(177, 122, 51);
        border-radius:12px;
    }
}
@media only screen and (min-width:1261px) {
    .contentDiv {
        align-self:center;
        position:inherit;
        margin-top:120px;
        justify-content:center;
    }
    .contentDiv>div {
        text-align:center;
        align-self:center;
    }
}