*{
 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:82%;
 max-height:85vh;
 overflow:auto;
 padding:30px 25px;
 border-radius:30px;
 background:white;
 box-shadow:0 0 30px #999;
 text-align:center;
 line-height:2;
 animation:showCard 1s;
}

.cardBox h1{
 margin-top:0;
 font-size:25px;
}

.cardBox p{
 white-space:pre-line;
 font-size:17px;
}

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

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