/*------------------------------*/
/*  ______           __         */
/* |   __ \.-----.--|  |.--.--. */
/* |   __ <|  _  |  _  ||  |  | */
/* |______/|_____|_____||___  | */
/*                      |_____| */
/*------------------------------*/

@keyframes pulse_m {
    0% {
        background-color: #d52700; /* red */
    }
    20% {
    	background-color: #f09300; /* orange */
    }
    40% {
        background-color: #e4c441; /* yellow */
    }
    60% {
    	background-color: #44b679; /* green */
    }
    80% {
        background-color: #4285f4; /* blue */
    }
    100% {
        background-color: #8e25aa; /* violet */
    }
}

body {
    margin: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    text-align: center;
    flex-direction: column;

    /* Animation properties */
    animation-name: pulse_m;
    animation-duration: 30s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    animation-fill-mode: none;
    animation-play-state: running;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 0px;
    padding: 0px;
}

.column-1 {
    grid-column: 1;
}

.column-2 {
    grid-column: 2;
}

.column-3 {
    grid-column: 3;
}

/*-----------------------------------------------------*/
/*  _______                 __ __                      */
/* |   |   |.-----.---.-.--|  |__|.-----.-----.-----.  */
/* |       ||  -__|  _  |  _  |  ||     |  _  |__ --|  */
/* |___|___||_____|___._|_____|__||__|__|___  |_____|  */
/*                                      |_____|        */
/*-----------------------------------------------------*/

h1 {
    text-align: center;
    font-family: Calibri, sans-serif;
    font-size: 50pt;
    color: #FFFFFFdd;
}

/*----------------------------------------------------------------*/
/*  ______                                           __           */
/* |   __ \.---.-.----.---.-.-----.----.---.-.-----.|  |--.-----. */
/* |    __/|  _  |   _|  _  |  _  |   _|  _  |  _  ||     |__ --| */
/* |___|   |___._|__| |___._|___  |__| |___._|   __||__|__|_____| */
/*                          |_____|          |__|                 */
/*----------------------------------------------------------------*/

p {

}

/*--------------------------------- */
/*  _____   __         __           */
/* |     |_|__|.-----.|  |--.-----. */
/* |       |  ||     ||    <|__ --| */
/* |_______|__||__|__||__|__|_____| */
/*----------------------------------*/

a {
    font-family: Calibri, sans-serif;
    font-size: 16pt;
    text-decoration: none;
    color: white;
}

/*----------------------------------------------*/
/*  ______         __   __                      */
/* |   __ \.--.--.|  |_|  |_.-----.-----.-----. */
/* |   __ <|  |  ||   _|   _|  _  |     |__ --| */
/* |______/|_____||____|____|_____|__|__|_____| */
/*----------------------------------------------*/


.content-container {
    position: relative;
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center elements horizontally */
    justify-content: center; /* Center the container vertically */
    height: 100vh; /* Full viewport height */
    bottom: 40px;
}

.button-container {
    display: flex;
    gap: 20px; /* Space between buttons */
    margin-top: 10px; /* Space between image and buttons */
}

@keyframes pulse_m {
    0% {
        background-color: #44b679; /* green */
    }
    20% {
    	background-color: #4285f4; /* blue */
    }
    40% {
        background-color: #8e25aa; /* purple */
    }
    60% {
    	background-color: #e4c441; /* yellow */
    }
    80% {
        background-color: #f09300; /* orange */
    }
    100% {
        background-color: #d52700; /* red */
    }
}
button {
    font-family: "Varela Round", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 16pt;
    color: white;
	text-align: center;
    border: 3px solid white;
    border-radius: 8pt;
    padding: -5px;
	width: 150px;
	height: 50px;
    transition-duration: 0.6s;
        /* Animation properties */
    animation-name: pulse_m;
    animation-duration: 30s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: none;
    animation-play-state: running;
}

button:hover {
    border: 3px solid white;
    border-radius: 16pt;
}