*{
    box-sizing: border-box;
}

body{
    margin: 0;
    background: #c3d2b0;
   
}

img{
    max-width: 100%;
}

.container{
    background-image: url(creekbottom.svg);
    background-repeat: no-repeat;
    /*background-position: fixed;*/


    height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

.top{
    height: 8vh;
}

/*.fish{
    height: 100vh;
    display: flex;
    flex-direction: row;
    position: relative;
}

.fish1{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /*gap: 200px;
    padding-left:460px;
    padding-top:12vh;
    padding-bottom: 10px;
}

.fish1 img{
    width: 15vw;
} */

.rocks{
    display: flex;
    flex-direction: column;
}

.rocks img{
    width: 6vw;
}

.fish{
    position: relative;
    animation-name: pulse;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;

}

@keyframes pulse{
    0%{
        transform: translatey(0);
    }
    50%{
        transform: translatey(25px);
    }
    100%{
        transform: translateY(0);
    }


}

.fish img{
    width: 20vw;
}

.rocks1{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 60px;
    padding-bottom: 20px;
}

.rocks2{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    padding-bottom: 20px;

}

.trigger1{
    position: relative;
}

.fishtrigger1:hover{
    filter: blur(3px);
}

.secret1{
    background: #c3d2b0;
    padding: 10px;
    border-radius: 5px;
    font-family: monospace;
    color: #1b240e;
    position: absolute;
    display: none;
}

.trigger1:hover .secret1{
    display: inline;
}

.rocks3{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px;

}

.rocks4{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    padding-bottom: 20px;

}

.rocks5{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    padding-bottom: 20px;
}

.trigger2{
    position: relative;
}

.fishtrigger2:hover{
    filter: blur(3px);
}


.secret2{
    background: #c3d2b0;
    padding: 10px;
    border-radius: 5px;
    font-family: monospace;
    color: #1b240e;
    position: absolute;
    display: none;
}

.trigger2:hover .secret2{
    display: inline;
}

.rocks6{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    padding-bottom: 20px;
}

.rocks7{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    padding-bottom: 20px;

}

.trigger3{
    position: relative;
}

.fishtrigger3:hover{
    filter: blur(3px);
}

.secret3{
    background: #c3d2b0;
    padding: 10px;
    border-radius: 5px;
    font-family: monospace;
    color: #1b240e;
    position: absolute;
    display: none;
}

.trigger3:hover .secret3{
    display: inline;
}