h1 {
    text-align: center;
}

body {
    background: url(img/background.png);
}

section {
    background: black;
    color: white;
    border-radius: 1em;
    border-style: solid;
    border-color: red white;
    padding: 1em;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}


.button-container a {
    text-decoration: none;
    outline: none;
    color: white;
    display: inline-block;
    position: relative;
    padding: 15px 30px;
    border: 1px solid;
    border-image: linear-gradient(180deg, #ff3000, #ed0200, #ff096c, #d50082);
    border-image-slice: 1;
    margin: 10px 15%;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    overflow: hidden;
    letter-spacing: 2px;
    transition: .8s cubic-bezier(.165, .84, .44, 1);
    height: 50px;
    width: 200px;
    text-align: center;
    line-height: 50px;
}

.button-container a:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 0;
    width: 100%;
    z-index: -1;
    color: white;
    background: linear-gradient(180deg, #ff3000, #ed0200, #ff096c, #d50082);
    transition: .8s cubic-bezier(.165, .84, .44, 1);
}

.button-container a:hover {
    background: rgba(255, 255, 255, 0);
}

.button-container a:hover:before {
    bottom: 0%;
    top: auto;
    height: 100%;
}