body{
    
    background-color: black;
    background-image: url("sources/bgdark.png");
    background-position-y: center;
    background-repeat: no-repeat;
    background-size: 100%, 100%;

    text-align: center;
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    font-style: italic;
    font-size: 92px;
    color: white;
}

#flex-container {
    display: flex;
    height:1000px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.smol {
    position: absolute;
    right: 0px;
    bottom: 0px;
    visibility: visible;
}

.smolhat {
    position: absolute;
    right: 0px;
    bottom: 0px;
    visibility: hidden;
}

@keyframes squish {
    0%      {height: 150px; width: 148px;}
    50%     {height: 120px; width: 148px;}
    100%    {height: 150px; width: 148px;}
}

@keyframes squish2 {
    0%      {height: 172px; width: 148px;}
    50%     {height: 137.6px; width: 148px;}
    100%    {height: 172px; width: 148px;}
}

#animated {
    animation-timing-function: ease-out;
    animation-duration: 0.365s;
    animation-name: none;
    animation-iteration-count: infinite;
}

#animated2 {
    animation-timing-function: ease-out;
    animation-duration: 0.365s;
    animation-name: none;
    animation-iteration-count: infinite;
}

#status {
    position: absolute;
    right: 155px;
    bottom: 75px;

    font-size: 12px;
    visibility: hidden;
    font-family:Arial, Helvetica, sans-serif;
}

#status2 {
    position: absolute;
    right: 155px;
    bottom: 63px;

    font-size: 12px;
    visibility: hidden;
    font-family:Arial, Helvetica, sans-serif;
}