* {
    font-family: "Ubuntu Mono", "sans-serif";
    background-color: #000000;
    color: #ffffff;
}

h1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    animation: moveDown 1s linear 0s alternate none running, flash 1s linear 1s alternate infinite none running;
    border-radius: 7px;
}

h2 {
    background-color: transparent;
}

a {
    text-decoration: none;
}


form, #image_display, #comment_section, #comment_section_container, #comment_form_container, footer {
    display: flex;
    flex-direction: column;
    border: 2px solid black;
    border-radius: 10px;
    background-color: #484848;
    justify-content: space-between;
    align-items: center;
    margin: 0.5em 12em;
    padding: 15px;
}

#image_display, #comment_form_container, #comment_section_container, footer {
    box-shadow: 0 0 267px 60px #3c67e3, 2px -1px 145px 20px #4e00c2 inset;
}

.image_form_input, .comment_form_input, .image_display_element {
    padding: 10px;
    margin: 5px;
}

#comment_section_container {
    opacity: 0;
    margin-bottom: 100px;
    animation: moveUp 1s linear 2s alternate forwards running;
}

#image_display {
    opacity: 0;
    margin-top: 60px;
    margin-bottom: 40px;
    animation: moveRight 2s linear 1s alternate forwards running;
}

#comment_form_container {
    opacity: 0;
    margin-top: 60px;
    margin-bottom: 40px;
    animation: moveLeft 2s linear 0s alternate forwards running;
}

#navigate_buttons {
    border-radius: 5px;
    padding: 0 0;
}

.btn {
    padding: 10px;
    font-size: 20px;
    background-color: #3b3b3b;
    border-radius: 7px;
    color: #ffffff;
}

.btn:hover {
    background-color: #ffffff;
    box-shadow: 0 0 267px 60px #ffffff;
    color: #000000;
}

.btn:active {
    background-color: #3b3b3b;
}

.image_display_element.btn:hover {
    background-color: darkred;
    box-shadow: 0 0 267px 60px darkred;
}

img {

}

#galleries_container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-top: 4em;
    margin-bottom: 4em;
}

#gallery_section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1em 5em;
    gap: 2em;
    background-color: #3b3b3b;
    border-radius: 1em;
}

.gallery_name {
    font-weight: bold;
    font-size: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: #484848;
    border: 2px white solid;
    border-radius: 5px;
    padding: 1em;
}

.gallery_name:hover {
    background-color: #ffffff;
    box-shadow: 0 0 267px 60px #653ce3;
    color: #000000;
}

.comment {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    background-color: #484848;
    border-radius: 3px;
}

.comment_content, .comment_author_name, .comment_date_posted {
    padding: 10px;
    background-color: #484848;

}

@keyframes flash {
    0% {
        background-color: #4e00c2;
        color: black;
    }
    50% {
        background-color: #51daff;
        color: black;
    }
    100% {
        background-color: #3c67e3;
        color: black;
    }
}

@keyframes pop {
    0% {
        padding: 15px;

    }
    50% {
        padding: 20px;
    }
    100% {
        padding: 30px;

    }
}


@keyframes moveDown {

    0% {
        opacity: 0;
        transform: translateY(-50px);
    }
    70% {
        transform: translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes moveLeft {

    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    70% {
        transform: translateX(5px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }

}

@keyframes moveRight {

    0% {
        opacity: 0;
        transform: translateX(-150px);
    }
    70% {
        transform: translateX(-30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }

}


@keyframes moveUp {

    0% {
        opacity: 0;
        transform: translateY(100px);
    }
    70% {
        transform: translateY(15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }

}