@font-face {
  font-family: pararubber;
  src: url(fonts/ParaRubber-Medium.otf);
}

@font-face {
  font-family: cambrian;
  src: url(fonts/Cambrian.otf);
}

:root{
  --purple: rgb(95, 0, 203);
}

html{
  overflow-y: hidden;
}

body {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: aqua;
  margin: 0;
  padding: 20% 0 0 0;
  background-image: url(svgs/shark-wallpaer.jpg);
  background-size: cover;
  overflow: hidden !important;
  height: 100vh;
}

h1 {
  position: fixed;
  top: 0;
  margin: 0;
  padding: 0;
  transform: skew(293deg, 25deg);
}

#animation-frame{
  position: absolute;
  top:0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}


#texture {
  display: none;
  color: rgba(255, 255, 255, 0.301);
  font-family: cambrian;
  font-size: 24vw;
  margin: 0;
  padding: 0;
  text-shadow: 0 0 13px rgba(255, 255, 255, 0.842);
  z-index: 0;
  position: absolute;
  animation: moveBounce 12s infinite ease-in-out;
}

@keyframes moveBounce {
  0% {
    top: 0;
    left: 0;
    transform: skew(293deg, 25deg) translate(-20px, -10px) rotate(0deg);
  }
  25% {
    top: 10%;
    left: 75%;
    transform: skew(293deg, 325deg) translate(-20px, 30px) rotate(30deg);
  }
  50% {
    top: 50%;
    left: 50%;
    transform: skew(293deg, 25deg) translate(-120px, 150px) rotate(-45deg) scale(1.2);
  }
  75% {
    top: 75%;
    left: 20%;
    transform: skew(293deg, -360deg) translate(-10px, 10px) rotate(90deg);
  }
  100% {
    top: 0;
    left: 0;
    transform: skew(293deg, 200deg) translate(-20px, -10px) rotate(0deg);
  }
}

#title{
  font-family: pararubber;
  color: aqua;
  z-index: 10;
  transform: rotateY(45deg);
  font-size: 3.5em;
  text-shadow: 0 5px 13px #fd1de8;
}

h2{
  font-family: courier;
  position: absolute;
  top: 4vh;
  color: #0f0f0f;
  text-shadow: -1px -1px 0 #fd1de8, 1px -1px 0 #fd1de8, -1px 1px 0 #fd1de8, 1px 1px 0 #fd1de8;
  z-index: 100;
  transform: none;
}

#game {
  position: absolute;
  height: 100vh;
  width: 100vw;
  max-width: 400px;
  text-align: center;
  overflow: hidden;
  padding-bottom: 5%;
  background: linear-gradient(to top, white 10%, transparent 30%);
}

#board {
  position: absolute;
  height: 100%;
  min-height: 40vh;
  width: 84.5%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  left: 0;
  overflow: hidden;
  border-top: solid 5pt aqua;
  border-left: solid 2pt aqua;
  border-right: solid 2pt aqua;
  border-radius: 50px;
  padding: 7%;
  padding-top: 13px;
  background-color: rgba(0, 255, 255, 0.29);
  box-shadow: 0 0 50px #ff4acf;
}

.color {
  height: 9vh;
  width: 77px;
  padding: 0;
  margin: -5px;
  filter: drop-shadow(3px 3px 5px rgb(43, 255, 248));
  cursor: pointer;
}

#controls {
  display: flex;
  width: 85%;
  position: absolute;
  bottom: 20vh;
  left: 7%;
  margin: 0;
  margin-top: -20px;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  overflow-y: hidden;
}

button{
  font-family: 'pararubber';
  background: black;
  border-radius: 20px;
  color:  white;
  border-color:  #ff4acf;
  box-shadow: 0 0 5px #ff4acf;
  padding: 6px;
  width: 30%;
  cursor: pointer;
}

button:disabled,
button[disabled]{
  background-color: transparent;
  color: aqua;
  border-color: aqua;
  box-shadow: none;
}


#color-options {
  width: 80vw;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 9px;
}

#feedback {
  margin-bottom: 20px;
  color: #333;
  display: none;
}

#history {
  display: flex;
  color: #333;
  overflow-y: scroll;
  max-height: 55vh;
  padding: 0 3px 0 6px;
  flex-direction: column;
  justify-content: flex-start;
}

.history-item {
  height: 8vh;
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1fr;
  gap: 10px;
  margin-bottom: 10px;
  align-items: flex-start;
}

.peg-container {
  display: flex;
  width: 10vw;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  height: 10vw;
}

.peg {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid #333;
}

.black-peg {
  background-color: black;
}

.white-peg {
  background-color: white;
  border: 1px solid black;
}

#result {
  display: none;
  position: fixed;
  color: #fd1de8;
  font-family: 'pararubber';
  width: 50%;
  top: 40vh;
  left: 17%;
  font-size: 20px;
  font-weight: bold;
  background-color: white;
  border-radius: 45px;
  border: 2pt solid #fd1de8;
  padding: 20px;
}

#history.drag-over {
  background-color: rgba(0, 255, 0, 0.2); /* Highlight when dragging over */
}

#history {
  /* border: 2px dashed #ccc; Default style */
  position: relative; /* Ensure it can contain absolutely positioned elements */
}

.color {
  transition: transform 0.2s ease; /* Smooth transition for snapping effect */
}


/* Container that holds the banner */
.banner-container {
  position: fixed;
  font-family: 'Courier New', Courier, monospace;
  top:0;
  width: 100%;
  overflow: hidden; /* Ensures the banner only shows within the container */
  background-color: black;
  color: white;
  padding: 0;
}

/* Moving banner text */
.banner {
  margin: 0;
  padding: 0;
  display: inline-block;
  white-space: nowrap; /* Prevents the text from wrapping */
  font-size: 10px;
  animation: scroll-left 30s linear infinite; /* Creates the animation */
}

/* Keyframes for the animation */
@keyframes scroll-left {
  0% {
    transform: translateX(100%); /* Start from the right */
  }
  100% {
    transform: translateX(-100%); /* Move to the left */
  }
}


@media (min-width:1281px) {
  #game {
    position: fixed;
    top: 100px;
    height: 84vh;

  }

  #color-options{
    width: 80%;
  }

  .buttons{
    width: 87;
  }

  #controls{
    bottom: 8vh;
  }

  .peg{
    width: 20px;
    height: 20px;
  }

  .peg-container{
    width: 4vw;
    height: 3vw;
  }

}