/*======================================== main ================ */
#myVideo {
    position: fixed;
    object-fit: cover;
    top: 0;
    right: 0;
    z-index:-10;
    width: 100vw;
    height: 100vh;
}

#playerMode {
       display: flex; 
       justify-content: center;
       flex-wrap: wrap;
       align-items: center;
      
     
}
#onePlayerMode, #twoPlayerMode {

    padding:20px;
    margin:10px;
    background: rgb(247, 147, 164);
    color: rgb(2, 2, 94);
    border-radius: 20px;
    font-size: 20px;
    font-weight: bold;
    font-family: "Comic Neue", cursive;
}

#timerP1, #timerP2{
    padding:10px;
    font-size: 30px;


}
/*========================= chores input or select============================= */
#fullContainer {
    display: flex;
    justify-content:space-evenly;
    width: 100%;
}
#playerOne {
 display: flex;
 flex-wrap: wrap;
 flex-direction: column;
background-color: rgb(247, 201, 208);
padding:50px;
display:none;
border-radius: 20px;
}

#playerTwo {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
     background: rgb(137, 243, 137);
     padding:50px;
     display: none;
     border-radius: 20px;
    
   }
  #choreListP1, #choreListP2{
    padding:8px;
    border-radius: 10px;
    margin:5px;
    font-size: 20px;
    font-weight: bold;
    font-family: "Schoolbell", cursive;
  }
   #customChoreP1, #customChoreP2 {
    padding:5px;
    border-radius: 10px;
    margin:5px;
    font-size: 20px;
    font-weight: bold;
    font-family: "Schoolbell", cursive;
   }

   #startBtnP1, #startBtnP2 {
    margin:20px;
    border-radius: 20px;
    padding: 15px;
    background:  rgb(247, 247, 40);
    box-shadow: 0 2px 0px #04370e, 0 4px 5px rgb(28, 32, 1);
    color: rgb(2, 48, 50);
    font-weight: bold;
    width: 150px; 
    font-size: 20px; 
    font-family: "Schoolbell", cursive;
    
   }



   #startBtnP1:active, #startBtnP2:active{
    background: white;
    color: blue;
   }


   #playButtonContainerP1, #playButtonContainerP2  {
   
    display: flex;
    justify-content:center;
   }
 
   #stopButtonContainerP1, #stopButtonContainerP2 {
    display: flex;
    justify-content:center;
   }

   #timerContainerP1, #timerContainerP2 {
   
    display: flex;
    justify-content:center;
    
   }

   #stopBtnP1, #stopBtnP2 {
    margin:10px;
    border-radius: 20px;
    padding: 20px;
    background:  rgb(154, 140, 245);
    color:rgb(235, 245, 51);
    font-weight: bold;
    border:none;
    box-shadow: 0 2px 0 #0a1854, 0 4px 5px rgb(28, 32, 1);
  transition: all 0.2s ease;
  width:250px;
  font-size: 20px;
  font-family: "Schoolbell", cursive;
   
   }


   #stopBtnP1:active, #stopBtnP2:active{
    background: green;
   }

   .dim {
    opacity: 0.5;
    filter: blur(3px);
    background-color: bisque;
   }

   #choreCompletedP1, #choreCompletedP2{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    font-family: "Schoolbell", cursive;
    font-weight: bold;
    font-size: 20px;
   }


   #starContainerP1, #starContainerP2 {
    display: flex;
    justify-content: center;
   }

   #completedChoresP1, #completedChoresP2 {
    display:none
   }


   #choreInProgressContainerP1, #choreInProgressContainerP2 {
    display: flex;
    justify-content: center;
    font-family: "Comic Neue", cursive;
    font-weight: bold;
   }


   .successMsg {
    color: red !important;
    font-size: 30px;
    font-family: "Schoolbell", cursive;
   }
   .errorMsg{
    color:red !important;
    background:rgb(243, 243, 197);
    padding:10px;
    font-size: 20px;
    border-radius: 20px;
    font-family: "Schoolbell", cursive;
   }


   #choreInProgressP1, #choreInProgressP2 {
    color: blue;
    font-size: 20px;
    font-family: "Comic Neue", cursive;
   }


   .star-icon {
    width: 40px;
    height: 40px;
 
  }

  #starCollectedP1, #starCollectedP2{
    font-family: "Comic Neue", cursive;
    font-size: 20px;
    font-weight: bold;
    display:none;

  }


  /* Mobile Devices responsiveness */

  @media all and (max-width: 800px) {
    #myVideo {
      object-fit: cover;
      width: 100vw;
      height: 100vh;
    }
  
    #playerMode {
      flex-direction: column;
      padding: 10px;
    }
  
    #onePlayerMode, #twoPlayerMode {
      width: 100%;
      margin: 10px 0;
      font-size: 19px;
    }
  
    #fullContainer {
      flex-direction: column;
      align-items: center;
    }
  


  @media all and (max-width: 500px) {
    #myVideo {
      object-fit: cover;
      width: 100vw;
      height: 100vh;
    }
  
    #playerMode {
      flex-direction: column;
      padding: 10px;
    }
  
    #onePlayerMode, #twoPlayerMode {
      width: 100%;
      margin: 10px 0;
      font-size: 17px;
 
    }
  
    #fullContainer {
      flex-direction: column;
      align-items: center;
    }
  
    #playerOne, #playerTwo {
      width: 85%;
      padding: 15px;
      font-size: 16px;
    }
  
    #choreListP1, #choreListP2,
    #customChoreP1, #customChoreP2 {
      font-size: 16px;
      width: 85%;
      font-weight: bold;
    }
  
    #startBtnP1, #startBtnP2,
    #stopBtnP1, #stopBtnP2 {
      width: 90%;
      font-size: 18px;
      padding: 10px;
    }
  
    #timerP1, #timerP2 {
      font-size: 24px;
    }
  
    .star-icon {
      width: 30px;
      height: 30px;
    }
  
    .successMsg {
      font-size: 24px;
      text-align: center;
    }
  
    .errorMsg {
      font-size: 18px;
      text-align: center;
    }
  
    #choreCompletedP1, #choreCompletedP2 {
      align-items: center;
      font-size: 16px;
    }
  
    #choreInProgressP1, #choreInProgressP2 {
      font-size: 18px;
      text-align: center;
    }
  
    #starCollectedP1, #starCollectedP2 {
      font-size: 16px;
      text-align: center;
    }
  }
}