*{
    box-sizing: border-box;
}
h1{
    text-align: center;
    font-size:80px;
}
h2{
    text-align: center;
}
body{
    font-family: 'Courier New', Courier, monospace;
    padding: 20px;
    background: linear-gradient(to bottom right, #4affde 0%, #5b9dff 40%, #d06bff 60%, #ff34d2 100%);
    background-size: 200% 200%;
    animation: movingGradient 5s linear infinite alternate;
    color:#fff;
    border-radius: 25px;;
}
@keyframes movingGradient {
    from {background-position: 0 0;}
    to {background-position:  100% 100%;}
}
p{
    text-align: center;
}
p::selection{
    background-color: #fff;
    color: #000;

}
.container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.card{
    border: 1px;
    box-shadow: #0192c244 0 2px 12px, #0192c236 0 8px 18px;  /*Mild Shadow*/
    height: 800px;
    margin: 12px;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 400px;
    border-radius: 25px;
}
#attribute{
    text-decoration: none;
    font-size: medium;
    font-family: 'Courier New', Courier, monospace;
}
.card:hover{
    transform: scale(1.05); 
    transition-duration: 1s;
}
.card img{
    text-align: center;
    width: 75%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
button{
    display: flex;
    align-items: center;
    background: linear-gradient(90deg,#03a9f4, #f441a5, #ffeb3b, #03a9f4);
    margin:auto;
    text-align: center;
    padding: 4px 2px;
    border-radius: 20px;
    color: #fff;
    background-size: 200% 200%;
    box-sizing: border-box;
    background-color: linear;
    background-size: 400%;
    height: 30px;
}
button:hover{
    animation: animate 8s linear infinite;
}
@keyframes animate{
    0%{
        background-position: 0%;
    }
    100%{
        background-position: 400%;
    }
}
button:before{
    content: ' ';
    position: absolute;
    top: -5px;
    left: -5px;
}