*{
 box-sizing:border-box;
}

body{
 margin:0;
 overflow:hidden;
}


#ocean{
 width:100vw;
 height:100vh;
 position:relative;
 overflow:hidden;

 background:
 radial-gradient(circle at top,#8be8ff,#006b9e 70%);
}



/* حباب */

.bubble{
 position:absolute;
 width:25px;
 height:25px;

 border:3px solid #ffffffaa;
 border-radius:50%;

 animation:bubbleUp 6s infinite;
}


.b1{
 left:20%;
 bottom:-50px;
}

.b2{
 left:55%;
 bottom:-80px;
 animation-delay:2s;
}

.b3{
 left:80%;
 bottom:-100px;
 animation-delay:4s;
}



@keyframes bubbleUp{
 to{
  transform:translateY(-110vh);
  opacity:0;
 }
}



/* ماهی */

#fish{

 position:absolute;

 width:180px;
 height:120px;

 left:40%;
 top:45%;

 cursor:pointer;

 transition:1s;

 animation:swim .6s infinite alternate;
}



.body{

 position:absolute;

 width:120px;
 height:85px;

 background:#ff9f43;

 border-radius:60% 50% 50% 60%;
}



/* دم */

.tail{

 position:absolute;

 left:-45px;
 top:20px;

 width:60px;
 height:65px;

 background:#ff7043;

 clip-path:polygon(100% 50%,0 0,0 100%);
}



/* چشم */

.eye{

 position:absolute;

 right:25px;
 top:20px;

 width:18px;
 height:18px;

 background:#111;

 border-radius:50%;
}


.eye:after{

 content:"";

 position:absolute;

 width:6px;
 height:6px;

 background:white;

 border-radius:50%;

 top:3px;
 left:3px;
}



/* دهان */

.mouth{

 position:absolute;

 right:5px;
 top:50px;

 width:22px;
 height:10px;

 border-bottom:3px solid #333;

 border-radius:50%;
}



/* باله */

.fin{

 position:absolute;
 background:#ff7043;
}


.topFin{

 top:-25px;
 left:40px;

 width:45px;
 height:35px;

 clip-path:polygon(50% 0,100% 100%,0 100%);
}


.bottomFin{

 bottom:-20px;
 left:45px;

 width:40px;
 height:30px;

 clip-path:polygon(0 0,100% 0,50% 100%);
}



/* پولک */

.scale{

 position:absolute;

 width:15px;
 height:15px;

 border:2px solid #ffffff88;

 border-radius:50%;
}


.sc1{
 left:35px;
 top:20px;
}

.sc2{
 left:60px;
 top:40px;
}

.sc3{
 left:82px;
 top:25px;
}



/* شنا */

@keyframes swim{

 from{
  transform:translateY(0);
 }

 to{
  transform:translateY(-15px);
 }

}



/* محو شدن */

.hideFish{

 opacity:0;

 transform:scale(.2);

 transition:2s;
}



/* کارت */

#card{

 display:none;

 position:absolute;

 inset:0;

 background:white;

 justify-content:center;

 align-items:center;

 z-index:50;
}



.cardBox{

 width:80%;

 padding:35px;

 border-radius:30px;

 background:white;

 box-shadow:0 0 30px #999;

 text-align:center;

 line-height:2;

 animation:showCard 1s;
}



@keyframes showCard{

 from{
  transform:scale(.2);
  opacity:0;
 }

 to{
  transform:scale(1);
  opacity:1;
 }

}