@font-face {
    font-family: Ginto-Round;
    src: url("./Fonts/ABCGintoRoundedVariableVF-Trial.ttf");
}
@font-face {
    font-family: Maxi-Round;
    src: url("Fonts/ABCMaxiRoundVariable-Trial.ttf");
}

body {
    min-height: 100vh;
    margin: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background-color: #ececec;
}

.Error {
    font-family: "Ginto-Round";
    text-align: center;

    font-size: 1000%;
    padding: 0;
    margin: 0;
}

.Subtitle {
    display: flex;
    align-items: baseline;
    justify-content: center;
    text-align: center;
    font-family: "Maxi-Round";
    font-size: 200%;
    padding: 0;
    margin: 0;
    gap: 10px; /* Adds spacing between the texts */

    /* Ensure the elements wrap properly on smaller screens */
    flex-wrap: wrap;
}

/* Responsive fix for smaller screens */
@media (max-width: 600px) {
    .Subtitle {
        flex-direction: column;
        align-items: center;
    }
}

.Rainbow-Animated {
    background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow_animation 8s linear infinite;
    background-size: 400% 100%;
}
.Rainbow-Animated:hover {
    cursor: pointer;
}

@keyframes rainbow_animation {
    0%,100% {
        background-position: 0 0;
    }

    50% {
        background-position: 100% 0;
    }
}

footer {
    min-height: 50px;
    background-color: #e1e1e1;
    font-family: "Ginto-Round";
    display: table;
}

.Contact{ 
    display: table-cell;
    vertical-align: middle;
    
}

.Status {
    display: table-cell;
    vertical-align: middle;
    padding: 20px;
}