/* CSS */
* {margin: 0; padding: 0;}

body {
    background: url(../img/birthdayBG.jpg) no-repeat center center fixed;
    background-size: cover;
}

h1 {
    background: linear-gradient(to right, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047, #eeff41, #f9a825, #ff5722);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    padding-top: 30px;
    font-size: 40pt;
}

div.container {
    height: 400px;
    width: 600px;
    background-color: rgba(253, 138, 138, 0.13);
    border-radius: 30px;
    margin: 350px auto;
    text-align: center;
}

button {
    border-radius: 30px;
    margin-top: 100px;
    height: 150px;
    width: 350px;
    font-size: 40px;
    animation-name: rainbowButton;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}

@keyframes rainbowButton{
    100%,0%{
        color: rgb(255,0,0);
        border-color: rgb(255,0,0);
    }
    8%{
        color: rgb(255,127,0);
        border-color: rgb(255,127,0);
    }
    16%{
        color: rgb(255,255,0);
        border-color: rgb(255,255,0);
    }
    25%{
        color: rgb(127,255,0);
        border-color: rgb(127,255,0);
    }
    33%{
        color: rgb(0,255,0);
        border-color: rgb(0,255,0);
    }
    41%{
        color: rgb(0,255,127);
        border-color: rgb(0,255,127);
    }
    50%{
        color: rgb(0,255,255);
        border-color: rgb(0,255,255);
    }
    58%{
        color: rgb(0,127,255);
        border-color: rgb(0,127,255);
    }
    66%{
        color: rgb(0,0,255);
        border-color: rgb(0,0,255);
    }
    75%{
        color: rgb(127,0,255);
        border-color: rgb(127,0,255);
    }
    83%{
        color: rgb(255,0,255);
        border-color: rgb(255,0,255);
    }
    91%{
        color: rgb(255,0,127);
        border-color: rgb(255,0,127);
    }
}