:root {
    --backColorGradient: radial-gradient(circle at calc(50% + 241px) calc(50% + 0px),hsla(229, 100%, 15%, 2%) 0,hsla(229, 100%, 15%, 0) 206px),radial-gradient(circle at calc(50% + 440px) calc(50% + 638px),hsla(195, 100%, 15%, 30%) 0,hsla(195, 100%, 15%, 0) 299px),radial-gradient(circle at calc(50% - 106px) calc(50% + 190px),hsla(258, 100%, 15%, 58%) 0,hsla(258, 100%, 15%, 0) 381px),radial-gradient(circle at calc(50% - 218px) calc(50% + 57px),hsla(231, 100%, 15%, 86%) 0,hsla(231, 100%, 15%, 0) 446px),radial-gradient(circle at calc(50% - 442px) calc(50% - 176px),hsla(269, 100%, 15%, 100%) 0,hsla(269, 100%, 15%, 0) 487px),radial-gradient(circle at calc(50% + 74px) calc(50% - 265px),hsla(235, 100%, 15%, 100%) 0,hsla(235, 100%, 15%, 0) 500px),radial-gradient(circle at calc(50% + 365px) calc(50% - 30px),hsla(201, 100%, 15%, 100%) 0,hsla(201, 100%, 15%, 0) 483px),radial-gradient(circle at calc(50% + 206px) calc(50% + 117px),hsla(275, 100%, 15%, 82%) 0,hsla(275, 100%, 15%, 0) 439px),radial-gradient(circle at calc(50% - 211px) calc(50% + 741px),hsla(259, 100%, 15%, 54%) 0,hsla(259, 100%, 15%, 0) 371px),radial-gradient(circle at calc(50% - 175px) calc(50% + 21px),hsla(262, 100%, 15%, 26%) 0,hsla(262, 100%, 15%, 0) 287px),black;
}

body::before {
    background: var(--backColorGradient);
    width: 100vw;
    height: 100vh;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
}

.content {
    transform: translateY(0px);
    margin-right: 10px;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@media screen and (min-height: 750px) {
    .content {
        transform: translateY(calc(50vh - 50%));
    }
}

.buttons {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

.buttons .button {
    flex-grow: 1;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
}