a.button {
    text-align: center;
    display: inline;
    border-radius: 3px;
    padding: 0.5rem;
    width: 70px;
    margin: 1.5rem;
    transition-duration: 0.4s;
    text-decoration: none;
}

a.button.wide {
    width: 100px;
}


a.button.icon {
    margin: 8px;
    width: 50px;
    text-align: center;
    border-radius: 3px;
    padding: 0.5rem;
}

.button.icon:hover {
    width: 60px;
    padding: 0px;
}


a.button.blue {
    height: max-content;
    background: transparent;
    background-color: #a3d9ff;
    color: white;
    border: 2px solid rgb(93, 93, 223);
    background-color: rgb(93, 93, 223);
}

a.button.green {
    height: max-content;
    background: transparent;
    background-color: #a3d9ff;
    color: white;
    border: 2px solid rgb(113, 196, 109);
    background-color: rgb(113, 196, 109);
}

a.button.orange {
    height: max-content;
    background: transparent;
    background-color: #a3d9ff;
    color: white;
    border: 2px solid rgb(231, 149, 77);
    background-color: rgb(231, 149, 77);
}

a.button.red {
    height: max-content;
    background: transparent;
    background-color: #a3d9ff;
    color: white;
    border: 2px solid rgb(215, 97, 97);
    background-color: rgb(215, 97, 97);
}

.button.blue:hover {
        background: transparent;
        color: rgb(93, 93, 223);
        border: 2px solid rgb(93, 93, 223);
        cursor: pointer;
        opacity: 0.8;
}


.button.orange:hover {
        background: transparent;
        color: rgb(231, 149, 77);
        border: 2px solid rgb(231, 149, 77);
        cursor: pointer;
        opacity: 0.8;
}

.button.green:hover {
    background: transparent;
    color: rgb(113, 196, 109);
    border: 2px solid rgb(113, 196, 109);
    cursor: pointer;
    opacity: 0.8;
}

.button.red:hover {
    background: transparent;
    color: rgb(215, 97, 97);
    border: 2px solid rgb(215, 97, 97);
    cursor: pointer;
    opacity: 0.8;
}