body {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    background-image: url(assets/stonewall.jpg);
}

#main-box {
    width: 100%;
    height: 100%;

}

#gamewindow {
    position: relative;
    width: auto;
    height: 600px;
    z-index: -1;
    border-bottom: rgb(101, 101, 101) solid 6px;
    border-top:rgb(201, 201, 201) solid 6px;
    border-left:rgb(201, 201, 201) solid 6px;
    border-right:rgb(101, 101, 101) solid 6px;
    box-shadow: 16px 16px 6px rgba(18, 18, 18, 0.635);
    background-image: url(assets/background.gif);
    background-repeat: no-repeat;
    background-size: cover;
    width: 1000px;
    height: 600px;
    animation: float 8s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes float2 {
    0%, 100% {
        transform: rotate(5deg);
    }

    50% {
        transform: rotate(-5deg);
    }

}

#title {
    padding: 10px;
    font-family: 'Trebuchet MS';
    font-weight: bold;
    font-size: 28px;
    background-color: rgb(190, 190, 190);
    border-bottom: rgb(101, 101, 101) solid 6px;
    border-top:rgb(201, 201, 201) solid 6px;
    border-left:rgb(201, 201, 201) solid 6px;
    border-right:rgb(101, 101, 101) solid 6px;
    box-shadow: 16px 16px 6px rgba(18, 18, 18, 0.635);
    margin: 20px;
    animation: float2 4s ease-in-out infinite;
}

#timer {
    padding: 6px;
    position: absolute;
    font-family: 'Trebuchet MS';
    font-weight: bold;
    font-size: 28px;
    background-color: rgb(190, 190, 190);
    border-bottom: rgb(101, 101, 101) solid 6px;
    border-top:rgb(201, 201, 201) solid 6px;
    border-left:rgb(201, 201, 201) solid 6px;
    border-right:rgb(101, 101, 101) solid 6px;
    box-shadow: 16px 16px 6px rgba(18, 18, 18, 0.635);
    margin: 8px;
    animation: float2 4s ease-in-out infinite;
}

#counter {
    position: absolute;
    padding: 6px;
    font-family: 'Trebuchet MS';
    font-weight: bold;
    font-size: 28px;
    background-color: rgb(190, 190, 190);
    border-bottom: rgb(101, 101, 101) solid 6px;
    border-top:rgb(201, 201, 201) solid 6px;
    border-left:rgb(201, 201, 201) solid 6px;
    border-right:rgb(101, 101, 101) solid 6px;
    box-shadow: 16px 16px 6px rgba(18, 18, 18, 0.635);
    margin: 8px;
    animation: float2 4s ease-in-out infinite;
    top: 0
}

#player {
    width: 69px;
    transform: translateY(522px);
    margin-left: 16px;
}

#playermodel {
    width: 100%;
    height: auto;
    bottom: 0;
}

.spike {
    width: 50px;
    height: auto;
    position: absolute;
    bottom: 0;
    transform: translateX();
}

#startbutton {
    height: 48px;
    width: 80px;
    font-size: large;
    font-family: 'Trebuchet MS';
    font-weight: bold;
    padding: 4px;
    border-radius: 0px;
    margin-top: 32px;
    box-shadow: 16px 16px 6px rgba(18, 18, 18, 0.635);
    animation: float2 6s ease-in-out infinite;
}