style.css

body, html {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

#game-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Style player's ammo display */
#player-ammo {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #fff;
    font-size: 18px;
    font-family: 'Arial', sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Style game over message */
#game-over {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    font-family: 'Bangers', sans-serif;
    color: #ff3333;
    text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.8);
    text-align: center;
}

/* Style debug mode indicator */
#debug-mode {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 18px;
    font-family: 'Arial', sans-serif;
    color: #00cc00;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Style UI elements */
.ui-container {
    position: absolute;
    top: 10px;
    right: 10px;
    text-align: right;
}

.ui-text {
    font-size: 18px;
    font-family: 'Arial', sans-serif;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: 10px;
}

.ui-text strong {
    color: #ffcc00;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* Night Sky Gradient Animation */
.night-sky {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #00204a, #000);
  animation: nightSkyAnimation 20s linear infinite;
}

@keyframes nightSkyAnimation {
  0% {
    background: linear-gradient(to bottom, #00204a, #000);
  }
  100% {
    background: linear-gradient(to bottom, #000, #00204a);
  }
}

/* Stars Animation */
.star {
  position: absolute;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  width: 2px;
  height: 2px;
  animation: twinkle 5s infinite;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.2;
  }
}

#canvas1 {
  border: 5px solid black;
  position: absolute;
  top: 52%; /*Adds a little spacing from navbar */
  left: 50%;
  transform: translate(-50%, -50%);
  background: #4d79bc;
  max-width: 100%;
  max-height: 100%;
  font-family: 'Bangers', cursive;
  z-index: 1;

}

#layer1,
#layer2,
#layer3,
#layer4,
#player,
#angler1,
#angler2,
#lucky,
#projectile,
#gears,
#hivewhale,
#drone {
  display: none;
}

/* Style the icon button */
#fullscreen-button {
  position: absolute;
  bottom: 40px;
  right: 20px;
  font-size: 25px;
  cursor: pointer;
  color: black;
  background-color: #fff;
  padding: 10px;
  border-radius: 50%;
}

.nav-section {
  display: flex;
  justify-content: space-between;
  font-family: 'Poppins';
  align-items: center;
  padding: 12px;
  width: 100%;
  height: 50px;
  background-color: cornflowerblue;
  color: white;
}

.github-icon {
  height: 30px;
  width: 30px;
}
.links {
  display: flex;
  text-decoration: none;
  color: white;
  align-items: center;
  gap: 12px;
}

.links:hover {
  transform: scale(1.1);
  transition: ease-in-out 0.2s;
}

/* CSS for the Instructions Modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1;
  overflow: auto;
}

.modal-content {
  background-color: #fff;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 600px;
  border-radius: 5px;
  position: relative;
}

.close-button {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  cursor: pointer;
}

.close-button:hover {
  color: red;
}

/* CSS for the Instructions Button */
#instructions-button {
  background-color: white;
  color: #6495ed;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid white;
  font-weight: bold;
  border-radius: 5px;
}

#instructions-button:hover {
  background-color: #6495ed;
  color: white;
  border: 1px solid white;
}

/* CSS for the Key Highlights */
.key {
  background-color: #f1f1f1;
  padding: 2px 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-weight: bold;
  font-family: 'Arial', sans-serif;
  margin-left: 4px;
  margin-right: 4px;
}

.key i {
  color: cornflowerblue;
}

.contribute-instruction {
  display: flex;
  justify-content: space-around;
  color: black;
}

.github-section {
  margin-right: 20px;
}

/* Social Sharing Modal Styles */
#socialSharingModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 2; /* Place the modal above other elements */
  overflow: auto;
}

.socialSharing .modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  max-width: 400px;
  text-align: center;
  position: relative;
}

.socialSharing .close {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 10px;
  cursor: pointer;
  font-size: 24px;
  color: #aaa;
}

.socialSharing .close:hover {
  color: red;
}

/* Share Button Styles */
#share-button {
  background-color: #fff;
  color: cornflowerblue;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
  font-weight: bold;
  font-size: 16px;
  transition: background-color 0.3s;
  border: 1px solid white;
}

#share-button:hover {
  background-color: cornflowerblue;
  color: white;
  border: 1px solid white;
}

/* Social Sharing Modal Styles */
#socialSharingModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 2;
  overflow: auto;
}

.socialSharing .modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  max-width: 400px;
  text-align: center;
  position: relative;
}

/* Styles for the close button */
#closeSocialModal {
  position: absolute;
  top: 10px; /* Adjust the top value as needed to position vertically */
  right: 10px; /* Adjust the right value as needed to position horizontally */
  padding: 10px;
  cursor: pointer;
  font-size: 24px;
  color: #aaa;
  transition: color 0.3s;
}

#closeSocialModal:hover {
  color: red;
}

.sharing-options{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 55px;
  margin-bottom: 40px;
  margin-left: 30px;
  margin-right: 30px;
}

.sharing-options a {
  /* background-color: rgba(211, 211, 211, 0.584); */
  width: 55px;
  height: 55px;
}

.sharing-options a svg{
  width: 50px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));
}

.win{
  visibility: hidden;
  position: absolute;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.482);
  z-index: 5000;
}
.wincontent{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(10%) translateX(-50%);
  color: white;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.fscore{
  font-size: 60px;
  text-align: center;
}

a{
  text-decoration: none;
}
a:visited{
  color: inherit;
}
.scoreshare{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
}
.scoreshare h1{
  padding: 10px;
  font-size: 40px;
}
.icon{
  color: white;
  padding: 5px;
  margin: 0 10px;
  font-size: 30px;
}
.icon:hover{
  opacity: 0.7;
}

/* Win confetti animation start */
.confetti {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  position: absolute;
  top: -1rem;
  left: 0;
  z-index: 50;
}
.confetti .rotate {
  animation: driftyRotate 1s infinite both ease-in-out;
  perspective: 1000;
}
.confetti .askew {
  background: linear-gradient(
  var(--grad-direction, to bottom),
  hsl(63, 100%, 50%) 25%,
  hsl(23, 100%, 50%) 0% 66.667%,
  hsl(43, 100%, 100%) 0% 100%);
  transform: skewY(10deg);
  width: 2rem;
  height: 3.2rem;
  animation: drifty 1s infinite alternate both ease-in-out;
  perspective:1000;
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}


.confetti:nth-of-type(7n) .askew {
  animation-delay: -.6s;
  animation-duration: 2.25s;
}
.confetti:nth-of-type(7n + 1) .askew {
  animation-delay: -.879s;
  animation-duration: 3.5s;
}
.confetti:nth-of-type(7n + 2) .askew {
  animation-delay: -.11s;
  animation-duration: 1.95s;
}
.confetti:nth-of-type(7n + 3) .askew {
  animation-delay: -.246s;
  animation-duration: .85s;
}
.confetti:nth-of-type(7n + 4) .askew {
  animation-delay: -.43s;
  animation-duration: 2.5s;
}
.confetti:nth-of-type(7n + 5) .askew {
  animation-delay: -.56s;
  animation-duration: 1.75s;
}
.confetti:nth-of-type(7n + 6) .askew {
  animation-delay: -.76s;
  animation-duration: 1.5s;
}
  
.confetti:nth-of-type(9n) .rotate {
  animation-duration: 2s;
}
.confetti:nth-of-type(9n + 1) .rotate {
  animation-duration: 2.3s;
}
.confetti:nth-of-type(9n + 2) .rotate {
  animation-duration: 1.1s;
}
.confetti:nth-of-type(9n + 3) .rotate {
  animation-duration: .75s;
}
.confetti:nth-of-type(9n + 4) .rotate {
  animation-duration: 4.3s;
}
.confetti:nth-of-type(9n + 5) .rotate {
  animation-duration: 3.05s;
}
.confetti:nth-of-type(9n + 6) .rotate {
  animation-duration: 2.76s;
}
.confetti:nth-of-type(9n + 7) .rotate {
  animation-duration: 7.6s;
}
.confetti:nth-of-type(9n + 8) .rotate {
  animation-duration: 1.78s;
}

@keyframes drifty {
  0% {
    transform: skewY(10deg) translate3d(-250%, 0, 0);
  }
  100% {
    transform: skewY(-12deg) translate3d(250%, 0, 0);
  }
}
@keyframes driftyRotate {
  0% {
    transform: rotateX(0);
  }
  100% {
    transform: rotateX(359deg);
  }
}
.confetti:nth-child(4n) {
  color: hsl(18, 100%, 50%);
}
.confetti:nth-child(4n + 1) {
  color: hsl(183, 100%, 50%);
}
.confetti:nth-child(4n + 2) {
  color: hsl(43, 100%, 50%);
}
.confetti:nth-child(4n + 3) {
  color: hsl(133, 100%, 90%);
}
.confetti .askew {
  background: currentColor;
  width: 1rem;
  height: 2rem;
  clip-path: polygon(evenodd,
  0% 0%, 100% 0%, 100% 100%, 50% 90%, 0% 100%
  );
}
/* Win confetti animation end */

footer {
  text-align: center;
  padding: 10px;
  background-color: transparent;
  color: #fff;
  position: fixed;
  width: 100%;
  bottom: 0;
  font-size: 0.7rem;
  display: flex;
  justify-content: space-between;
}

/* Style the difficulty select element */
#difficulty-select {
  padding: 10px 10px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  background-color: white;
  color: cornflowerblue;
  font-weight: bold;
  transition: background-color 0.3s;
  margin-left: 10px;
  border: 1px solid white;
  outline: none;
}

#difficulty-modal{
  top: 10%;
}

#difficulty-modal .modal-content{
  background-color: black;
  color: white;
  text-align: center;
}

#count-num{
  color: yellow;
  font-size: 2rem;
  margin-left: 5px;
  margin-right: 5px;
}