.gameBoard{
    width: 100%;
    margin: auto;
    text-align: center;
    font-family: 'Holtwood One SC', serif;
    font-size: 20px;
    height: 10rem;
}
.gameBoard h1{
    animation: title 1s infinite;
}
.titleScreen{
    height: 50px;
    display: block;
}
.titleScreen h3{ 
    display: inline-flex;
    font-size: 5rem;
    transform: rotate3d(1, 0, -1, 45deg) translate3d(-4rem, 7rem, 10px);
}
svg #odd{
    animation: odd 10s infinite

}
svg #even{
    animation: even 8s infinite
}
@keyframes odd{
    0% {transform: translatex(0rem)}
    60%{transform: translatex(-2rem)}
    100%{transform: translatex(0rem)}
}
@keyframes even{
    0% {transform: translateX(1rem)}
    50%{transform: translateX(4rem)}
    100%{transform: translateX(1rem)}
}
@keyframes title{
    0% {transform: rotate(-20deg)scale(.01)}
    50% {transform: rotate(5deg)translateY(-.2rem)}
    100% {opacity: 0;
        transform: rotate(5deg)translateY(.2rem)}
    }
.container{
    width: 80%;
    margin: 1rem auto;
    background-image: url("../img/bg.jpg");
    background-position: -29rem;
    background-position-y: -25rem;
    padding: 1rem;
    
}
.rect {
    /* ; */
    width: 4rem;
    height: 400px;
    margin: auto ;
}
.lake {
    display: inline-flex;
    height: 400px;
}
.lakeDiv {
    display: inline-flex;
    height: 400px;
}
.fishStatsBox {
    width: 1rem;
    margin: auto ;
    height: 400px;
}
#innerRect {
    background-color: blue;
    width: 4rem;
    height: 4rem;
    /* transform: translateY(5rem); */
    opacity: .5;
    
}
#fish {
    width: 4rem;
    /* transform: translateY(-4rem); */
}
#wavesClass{
    display: none;
}
#fishInWater{
    animation: fishy 12s infinite;
    ;
}
@keyframes fishy{
    0% {transform: translate3d(-15rem, 9rem, 10rem)}
    100% {transform: translate3d(15rem, 9rem, 10rem)}
    }