body {
    font-family: monospace;
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);

    animation-name: siteEnter;
    animation-timing-function: linear;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.Main {
    display: flex, list-item;
}

.Button {
    font-family: monospace;
    border: 0.3vh, solid, rgb(0, 0, 0);
    border-radius: 0.5vh;
    height: 5vh;
    width: 15vh;
    background-color: rgb(0, 0, 125);
    color: rgb(255, 255, 255);
    cursor: pointer;

    text-wrap: balance;
    white-space: pre-wrap;
}

.Button:hover {
    animation-name: mouseEnter;
    animation-duration: 300ms;
    animation-timing-function: ease-out, cubic-bezier(0.19, 1, 0.22, 1);
    animation-fill-mode: forwards;
}

.Button:not(:hover) {
    animation-name: mouseLeave;
    animation-duration: 300ms;
    animation-timing-function: ease-out, cubic-bezier(0.19, 1, 0.22, 1);
    animation-fill-mode: forwards;
}

.Button:active {
    background-color: rgb(0, 200, 55);
}

.Image {
    border: 0.3vh, solid, rgb(0, 0, 0);
    border-radius: 0.5vh;
    height: 30vh;
    width: 30vh;
}

.AccImage {
    border: 0.3vh, solid, rgb(0, 0, 0);
    border-radius: 3.14159265359vh;
    height: 6vh;
    width: 6vh;
}

textarea {
    height: 30vh;
    width: 25vh;
}

@keyframes mouseEnter {
    from {
        background-color: rgb(0, 50, 125);
        color: rgb(255, 255, 255);
    }

    to {
        background-color: rgb(255, 255, 255);
        color: rgb(0, 0, 0);
    }
}

@keyframes mouseLeave {
    from {
        background-color: rgb(255, 255, 255);
        color: rgb(0, 0, 0);
    }

    to {
        background-color: rgb(0, 50, 125);
        color: rgb(255, 255, 255);
    }
}

@keyframes siteEnter {
    from {
        background-color: rgb(0, 0, 0);
    }

    to {
        background-color: rgb(0, 0, 50);
    }
}