body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: black;
    height: 95vh;
}

    header {
        color: #BF0909;
        font-family: 'Special Elite', cursive;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        flex: 1;
    }

        header a {
            text-decoration: none;
            color: #BF0909;
        }

        header a:hover {
            color: white;
        }

    #main {
        display: flex;
        flex: 4;
    }

        #content {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 50vw;
        }

            #text {
                font-family: 'Special Elite', cursive;
                font-size: 2vw;
                text-align: center;
                color: white;
            }

            #buttons {
                display: flex;
                justify-content: space-around;
            }

            .button {
                font-family: 'Special Elite', cursive;
                border-radius: 20px;
                background-color: #B0C4DE;
                height: 3.8vh;
            }

            .button:hover{
                animation-name: zslide;
                animation-duration: 3s;
            }

            @keyframes zslide {
                from {
                    font-size: 2vw;
                    opacity: 1;
                }

                to {
                    font-size: 6vw;
                    opacity: 0;

                }
            }

    footer {
        color: green;
        display: flex;
        flex : 1;
    }