@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
:root {
  --neon-glow: 0 0 10px cyan, 0 0 20px cyan, 0 0 30px cyan, 0 0 40px cyan,
    0 0 60px #ff00cc, 0 0 80px #ff00cc;
}
* {
  margin: 0;
  padding: 0;
  user-select: none;
}
@keyframes spin {
  from {
    --angle: 0deg;
  }
  to {
    --angle: 360deg;
  }
}
body {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  background: url(../media/bg.jpg);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}



/* Container styling starts from here */
  .container {
    height: 80%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    user-select: none;
    margin-top: 1%;
  }
  #neon {
    position: absolute;
    width: 19%;
    height: 13%;
    background: transparent;
    border-radius: 2px 2px 2px 2px;
    top: 10%;
  }
  .title-container {
    position: relative;
    height: 30%;
    width: 35%;
    margin-top: 10.5%;
    background: conic-gradient(
      from var(--angle),
      rgb(255, 0, 217),
      transparent,
      transparent,
      transparent,
      transparent,
      transparent,
      cyan,
      transparent,
      transparent,
      transparent,
      transparent,
      transparent,
      rgb(255, 0, 217),
      transparent,
      transparent,
      transparent,
      transparent,
      transparent,
      cyan,
      transparent,
      transparent,
      transparent,
      transparent,
      transparent
    );
    animation: 5s spin linear infinite;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px 10px 10px 10px;
  }
  #tic-tac {
    width: 100%;
    height: 100%;
  }
  .buttons-container {
    display: flex;
    justify-content: space-between;
    display: flex;
    align-items: flex-end;
    height: 40%;
    width: 65%;
    margin-top: -3%;
  }
  .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45%;
    width: 25%;
    position: relative;
    background: conic-gradient(
      from var(--angle),
      transparent,
      rgb(255, 0, 217),
      cyan,
      rgb(255, 0, 217)
    );
    border-radius: 30px 30px 30px 30px;
    animation: 5s spin linear infinite;
    transition: transform 0.5s;
    margin-top: 2%;
  }
  .wrapper img {
    margin: 0;
    padding: 0;
    position: absolute;
    background: linear-gradient(
      145deg,
      #5b0258 10%,
      #1b0046 40%,
      #00365e 75%,
      #04868a 100%
    );
    height: 95%;
    width: 98%;
    border-radius: 30px 30px 30px 30px;
  }
  .wrapper:hover {
    transform: scale(1.1);
    transition: transform 0.5s;
    filter: brightness(0.8);
  }
/* Container styling ends here */


/* Player names styling starts from here */
  .player-names {
    visibility: hidden;
    opacity: 0;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 80%;
    height: 10%;
    top: 7%;
    color: #b0f1f3;
    font-family: "Poppins", sans-serif;
    font-size: 50px;
  }
  .turn1,.turn2{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 5%;
  }
  .player-names p {
    border-radius: 10px 10px 10px 10px;
    padding: 5px;
    box-shadow: var(--neon-glow);
    margin-left: 2%;
    margin-right: 2%;
  }

  .turn-selector1,.turn-selector2{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    visibility: hidden;
    opacity: 0;
  }
  .turn-para{
    width: 40px;
    height: 30px;
    font-size: large;
    font-weight: bolder;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #turn-arrow{
    rotate: 180deg;
    width: 40px;
    height: 30px;
  }
/* Player names styling ends here */



/* Input styling starts from here */
  .input {
    position: relative;
    opacity: 0;
    visibility: hidden;
    position: fixed;
    height: 78%;
    width: 40%;
    top: 50%;
    left: 50%;
    outline: 2px solid rebeccapurple;
    transform: translate(-50%, -50%);
    border-radius: 30px 30px 30px 30px;
    box-shadow: var(--neon-glow);
    font-size: 30px;
    color: cyan;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  }
  .input-form{
    position: relative;
  }
  .input p{
    font-size: 1.7rem;
    margin-bottom: 2%;

  }
  .input label{
    width: 50vw;
    height: 2vh;
    font-size: 1.7rem;
  }
  .cross-btn{
    position: fixed;
    left: 93%;
    top: 3%;
  }
  .cross-btn path{
    fill: cyan;
  }
  .input input {
    width: 80%;
    height: 4vh;
    background: none;
    border: none;
    outline: 2px solid cyan;
    font-size: 25px;
    color: rgb(223, 101, 237);
    padding-left: 10px;
    margin-top: 2%;
    margin-bottom: 2%;
  }
  .player-one,
  .player-two {
    position: absolute;
    margin-left: 6%;
    gap: 20px;
    
  }
  .player-one {
    margin-top: 7%;
  }
  .player-two {
    margin-top: 54%;
  }
  .weapon-img-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 30px;
  }
  .weapon-img-container img:hover {
    outline: 2px solid cyan;
  }
  .weapon-img-container img {
    outline: 2px solid cyan;
    height: 70%;
    width: 70%;
  }

  .submit-button-container {
    top: 100%;
    margin-top: 4%;
    width: 7vw;
    height: 5vh;
    position: absolute;
    left: 48%;
    transform: translateX(-50%);
    border-radius: 15px 15px 15px 15px;
    background: conic-gradient(
      from var(--angle),
      transparent,
      rgb(255, 0, 217),
      cyan,
      rgb(255, 0, 217)
    );
    animation: 5s spin linear infinite;
    padding: 3px;
  }
  #submit-btn {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px 15px 15px 15px;
    font-size: x-large;
    color: white;
    background: linear-gradient(cyan, rgb(255, 0, 217));
    transition: font-size 0.3s ease;
  }
  #submit-btn:hover {
    font-weight: bolder;
  }
/* Input styling ends from here */



/* Gameboard styling starts from here */
  .game-board {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    background: conic-gradient(
      from 0deg,
      cyan,
      rgb(255, 0, 217),
      cyan,
      rgb(255, 0, 217)
    );
    height: 50%;
    width: 35%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 10px;
    column-gap: 10px;
    border-radius: 30px 30px 30px 30px;
    overflow: hidden;
    box-shadow: var(--neon-glow);
  }
  /* Cell is Defined in JS */
  .cell {
    background-color: #1b0046;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .cell:hover {
    filter: brightness(1.1);
  }
  /* Js Helper classes */
  .hide {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 1s ease, visibility 1s ease;
  }
  .show {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 1s ease, visibility 1s ease;
  }
  .selected {
    box-shadow: var(--neon-glow);
  }
  /* Js Helper classes */


  .line-win-1{
    position: absolute;
    top: 16%;
    left: 5%;
    width: 90%;
    height: 2%;
    background: rgb(220, 245, 246);
    box-shadow: var(--neon-glow);
    border-radius: 10px 10px 10px 10px;
  } 
  .line{
    visibility: hidden;
    opacity: 0;
    position: fixed;
    background: rgb(220, 245, 246);
    border-radius: 10px 10px 10px 10px;
    box-shadow: var(--neon-glow);
    z-index: 10;
    display: block;
    visibility: hidden;
    opacity: 0;
  }

  .line-win-2{
    top: 50%;
    left: 5%;
    width: 90%;
    height: 2%;
  } 
  .line-win-3{
    top: 83%;
    left: 5%;
    width: 90%;
    height: 2%;
  } 
  .line-win-4{
    rotate: 90deg;
    top: 50%;
    left: -18%;
    width: 70%;
    height: 2%;
  }
  .line-win-5{
    rotate: 90deg;
    top: 50%;
    left: 15%;
    width: 70%;
    height: 2%;
  }
  .line-win-6{
    rotate: 90deg;
    top: 50%;
    left: 48%;
    width: 70%;
    height: 2%;
  }
  .line-win-7{
    rotate: 41deg;
    top: 50%;
    left: 7%;
    width: 90%;
    height: 2%;
  }
  .line-win-8{
    rotate: 140deg;
    top: 50%;
    left: 5%;
    width: 90%;
    height: 2%;
  }

/* Gameboard styling ends here */



/* Bo Back button styling starts from here */
  .go-back-button{
    visibility: hidden;
    opacity: 0;
    position: absolute;
    height: 5%;
    width: 7%;
    top: 83%;
    border-radius: 10px 10px 10px 10px;
    display: grid;
    place-items: center;
    padding: 5px;
    background: conic-gradient(
      from var(--angle),
      transparent,
      rgb(255, 0, 217),
      cyan,
      rgb(255, 0, 217)
    );
    animation: 5s spin linear infinite;
  }
  .go-back-button p{
    font-size: x-large;
    color: white;
    background: linear-gradient(rgb(1, 113, 123), rgb(147, 46, 132));
    height: 100%;
    width: 100%;
    border-radius: 10px 10px 10px 10px;
    display: grid;
    place-items: center;
    font-family: "Poppins", sans-serif;
  }
  .go-back-button p:hover{
    cursor: pointer;
    font-weight: bolder;
  }
/* Bo Back button styling ends here */



/* Result styling starts from here */
  .result {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 40%;
    width: 45%;
    box-shadow: var(--neon-glow);
    border-radius: 10px 10px 10px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #winner {
    margin-top: 9%;
    color: rgb(255, 255, 255);
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
    font-size: 50px;
    padding: 10px;
    border-radius: 10px 10px 10px 10px;
    box-shadow: var(--neon-glow);
  }
  .result_buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40%;
    width: 100%;
    margin-top: 10%;
  }
  .button{
    height: 30%;
    width: 18%;
    border-radius: 10px 10px 10px 10px;
    padding: 5px;
    background: conic-gradient(
      from var(--angle),
      transparent,
      rgb(255, 0, 217),
      cyan,
      rgb(255, 0, 217)
    );
    font-size: xx-large;
    animation: 5s spin linear infinite;
    margin-left: 10%;
    margin-right: 10%;
  }
  #inside_button {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 90%;
    height: 100%;
    width: 100%;
    background: linear-gradient(cyan, rgb(255, 0, 217));
    margin: 0;
    padding: 0;
  }
/* Result styling ends here */



/* Select difficulty styling starts from here */
  .select-difficulty{
    visibility: hidden;
    opacity: 0;
    position: fixed;
    height: 35%;
    width: 35%;
    color: cyan;
    box-shadow: var(--neon-glow);
    top: 47%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 20px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .heading{
    box-shadow: var(--neon-glow);
    width: 45%;
    font-size: 2rem;
    padding: 35px;
    border-radius: 10px 10px 10px 10px;
    margin-top: 60px;
    display: grid;
    place-items: center;
    font-weight: bolder;
  }
  .select-difficulty .result_buttons{
    display: flex;
    justify-content: space-evenly;
    height: 20%;
    margin-top: 35%;
    position: absolute;
  }
  .select-difficulty .button{
    width: 25%;
    height: 60%;
    margin: 0;
  }
  .select-difficulty .button:hover{
    transition: font-size 0.3s ease;
    font-size: 2.2rem;
  }
/* Select difficulty styling ends here */



/* Home button styling starts from here */
.home-button{
  visibility: hidden;
  opacity: 0;
  position: absolute;
  height: 5%;
  width: 6%;
  border-radius: 10px 10px 10px 10px;
  padding: 5px;
  background: conic-gradient(
    from var(--angle),
    transparent,
    rgb(255, 0, 217),
    cyan,
    rgb(255, 0, 217)
  );
  font-size: 190%;
  animation: 5s spin linear infinite;
  right: 80%;
  top: 10%;
}
/* Home button styling ends here */



/* Ai input styling starts from here */
  .ai-input{
    visibility: hidden;
    opacity: 0;
    height: 65%;
  }
  .ai-input svg{
    visibility: hidden;
    opacity: 0;
  }
  .ai-input .submit-button-container{
    margin-top: 2.5%;
  }
  .ai-weapons{
    display: grid;
    grid-template-columns: repeat(6,1fr);
    margin-right: 23px;
  }
  .ai-weapons img{
    width: 90%;
    height: 75%;
  }
  .ai_result{
    width: 30%;
    height: 20%;
    visibility: hidden;
    opacity: 0;
    display: grid;
    place-items: center;
    padding-bottom: 3%;
  }
  .ai-go-back-button{
    visibility: hidden;
    opacity: 0;
  }
/* Ai input styling ends here */



/* Footer styling starts from here */
.footer {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 85%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  font-family: sans-serif;
  font-size: 14px;
  color: white;
  font-weight: bolder;
  background-color: transparent;
  margin-top: auto;
  outline: 1px solid #5e5b5bcb;
  width: 20%;
  height: 30px;
  border-radius: 10px 10px 10px 10px;
  background: conic-gradient(
    from var(--angle),
    transparent,
    rgb(255, 0, 217),
    transparent,
    cyan,
    transparent,
    rgb(255, 0, 217),
    transparent
  );
  backdrop-filter: blur(10px);
  animation: 5s spin linear infinite;
}
.footer a {
  color: white;
  text-decoration: none;
  font-weight: bolder;
}
.footer a:hover {
  color: #ec70bc;
  font-size: medium;
}
.footer:hover {
  outline: 1px solid cyan;
}
.github-logo {
  width: 25px;
  height: 25px;
  transition: transform 0.7s ease;
}
.github-logo:hover {
  transition: transform 0.7s;
  transform: rotate(360deg) scale(1.3);
}
/* Footer styling ends here */