@keyframes spin{
    0% {transform: rotate(0deg); }
    50% {transform: rotate(180deg); }
    100% {transform: rotate(360deg); }
}
@keyframes wiggle{
    0% {transform: translate(-100px, 0px); }
    50% {transform: translate(100px, 20px); }
    100% {transform: translate(-100px, 0px); }
}
@keyframes wiggleBG{
    0% {transform: translate(-100px, 0px); }
    50% {transform: translate(100px, 20px);}
    75% {transform: translate(100px, 0px); transform: rotate(20deg);}
    100% {transform: translate(-100px, 0px); }
}
@keyframes hueShift {
    0% {filter: hue-rotate(0deg);}
    50% {filter: hue-rotate(360deg);}
    100%{filter: hue-rotate(0deg);}
}

body {
    font-family: Arial;
    margin: 0;
    background-image: url("../Assets/Textures/cobblestone.png");
    /*animation-name: wiggleBG;
    animation-duration: 5s;
    animation-iteration-count: infinite;*/
}

a{
    text-decoration: none;
}

.header{
    padding: 50px;
    text-align: center;
    color: white;
    background: blue;
    font-size: 30px;
}

.showcase{
    text-align: center;
    background: darkgray;
    padding: 20px;
    width: fit-content;
    margin: auto;
    border-radius: 10px;
    display: inline-block;
    margin-bottom: 5px;
    background-image: url("../Assets/Textures/cobble_stone.png");
    /*animation-name: hueShift;
    animation-duration: 5s;
    animation-iteration-count: infinite;*/
}
.showcase img{
    animation-name: spin;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
.showcase p{
    animation-name: wiggle;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    font-family: "Comic Sans MS", "Comic Sans", cursive;
}

.showcaseText{
    color: aliceblue;
    font-weight: bold;
}

.backTo{
    text-decoration: none;
    color: blue;
    padding-left: 5px;
    font-weight: bold;
}