.border-croco {
    border-image: url(../Images/Crocoborder.png) 162 fill / 120px / 0 round;

    padding: 100px;
    background-color: transparent;
}
.border-hero {
    border-image: url(../Images/HeroBorder.png) 162 fill / 120px / 0 round;

    padding: 60px;
    background-color: transparent;

}
.border-computer {
    border-image: url(../Images/ComputerBorder.png) 162 fill / 120px / 0 round;

    padding: 60px;
    padding-bottom: 100px;
    background-color: transparent;
}
.border-woods {
    border-image: url(../Images/WoodBorder.png) 162 fill / 130px / 0 round;

    padding: 50px;
    padding-top: 100px;
    background-color: transparent;
}
.border-carpet {
    border-image: url(../Images/BasicBorder.png) 162 fill / 120px / 0 round;

    padding: 30px;
    background-color: transparent;
}
.border-art {
    border-image: url(../Images/ArtBorder.png) 162 fill / 120px / 0 round;

    padding: 30px;
    background-color: transparent;
}
.border-basic {
    background-color: var(--button-color) ; 
    border: 5px solid var(--text-color);

    padding: 30px;
}


.bordered.button-box:hover {
    --outline-color: var(--button-color, antiquewhite);
    filter: drop-shadow(2px 2px 0px var(--outline-color)) drop-shadow(-2px 2px 0px var(--outline-color)) drop-shadow(2px -2px 0px var(--outline-color)) drop-shadow(-2px -2px 0px var(--outline-color));
}

.outlined {
    --outline-color: var(--button-color, antiquewhite);
    filter: drop-shadow(2px 2px 0px var(--outline-color)) drop-shadow(-2px 2px 0px var(--outline-color)) drop-shadow(2px -2px 0px var(--outline-color)) drop-shadow(-2px -2px 0px var(--outline-color));
}
.outlined-dark {
    --outline-color: var(--link-color);
    --outline-width: 3px;
    filter: drop-shadow(var(--outline-width) var(--outline-width) 0px var(--outline-color));
}

a {
    text-decoration: none;
    color: unset;
}